1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>Plumes - Lists</title>
|
6 |
|
7 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
8 | <link rel="stylesheet" href="/public/base/base-plumes.css" type="text/css" />
|
9 | <style type="text/css">
|
10 | .example-mask {
|
11 | z-index: 99998;
|
12 | position: fixed;
|
13 | top: 0;
|
14 | left: 0;
|
15 | right: 0;
|
16 | bottom: 0;
|
17 | background: #fff;
|
18 | }
|
19 |
|
20 | .pl-grouped-list {
|
21 | position: fixed !important;
|
22 | top: 80px;
|
23 | left: 3rem;
|
24 | right: 3rem;
|
25 | bottom: 3rem;
|
26 | }
|
27 |
|
28 | .pl-grouped-list-item {
|
29 | font-size: 1.8rem;
|
30 | line-height: 3rem;
|
31 | background: white;
|
32 | }
|
33 |
|
34 | .country {
|
35 | font-size: 4rem;
|
36 | line-height: 5rem;
|
37 | text-transform: uppercase;
|
38 | color: #ff6600;
|
39 | }
|
40 |
|
41 | .area {
|
42 | font-size: 3.4rem;
|
43 | line-height: 4.6rem;
|
44 | }
|
45 |
|
46 | .department {
|
47 | font-size: 2rem;
|
48 | line-height: 3.6rem;
|
49 | }
|
50 |
|
51 | .canton {
|
52 | font-size: 1.6rem;
|
53 | line-height: 3rem;
|
54 | color: #999;
|
55 | }
|
56 | </style>
|
57 | </head>
|
58 | <body>
|
59 |
|
60 | <rv-require
|
61 | name="pl-layout-platform"
|
62 | src="../public/layouts/pl-layout-platform"
|
63 |
|
64 | data-bind-onloaded="onloaded"
|
65 | data-bind-brand="brand"
|
66 | data-bind-apps="apps"
|
67 | data-bind-user="user"
|
68 | data-bind-listitems="listitems"
|
69 | >
|
70 | <rv-partial target="mask-title">
|
71 | Lists <span class="accent">example</span>
|
72 | </rv-partial>
|
73 | <rv-partial target="message-title">
|
74 | Lists <span class="accent">example</span>
|
75 | </rv-partial>
|
76 | <rv-partial target="content">
|
77 |
|
78 | <rv-require
|
79 | name="pl-grouped-list"
|
80 | src="../public/lists/pl-grouped-list"
|
81 |
|
82 | data-bind-items="listitems"
|
83 | >
|
84 | <rv-partial target="itemTemplate" src="./lists-items-partial.html"></rv-partial>
|
85 | </rv-require>
|
86 |
|
87 | </rv-partial>
|
88 | </rv-require>
|
89 |
|
90 | <div class="example-mask"></div>
|
91 |
|
92 | <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
|
93 | <script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
|
94 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.1/ractive-require.js"></script>
|
95 | <script type="text/javascript" src="/public/base/base-bootstrap.js"></script>
|
96 |
|
97 | <script type="text/javascript">
|
98 | (function() {
|
99 | 'use strict';
|
100 |
|
101 | window.Ractive.bootstrap(function(page) {
|
102 |
|
103 | page.set('brand', 'Plumes');
|
104 | page.set('apps', [{
|
105 | name: 'Layout',
|
106 | select: function() {
|
107 | window.location.href = 'layout.html';
|
108 | }
|
109 | }, {
|
110 | name: 'Login',
|
111 | select: function() {
|
112 | window.location.href = 'login.html';
|
113 | }
|
114 | }, {
|
115 | name: 'Lists',
|
116 | selected: true,
|
117 | select: function() {
|
118 | window.location.href = 'lists.html';
|
119 | }
|
120 | }]);
|
121 | page.set('user', {
|
122 | avatar: 'https://www.gravatar.com/avatar/9e38451efa23937301594f273033c5f1.png'
|
123 | });
|
124 |
|
125 | page.set('listitems', [{
|
126 | label: 'France',
|
127 | country: true,
|
128 | items: [{
|
129 | label: 'Alsace',
|
130 | area: true,
|
131 | items: [{
|
132 | department: true,
|
133 | label: 'Bas-Rhin',
|
134 | items: [{
|
135 | label: 'Haguenau-Wissembourg',
|
136 | canton: true
|
137 | }, {
|
138 | label: 'Molsheim',
|
139 | canton: true
|
140 | }, {
|
141 | label: 'Saverne',
|
142 | canton: true
|
143 | }, {
|
144 | label: 'Sélestat-Erstein',
|
145 | canton: true
|
146 | }, {
|
147 | label: 'Strasbourg',
|
148 | canton: true
|
149 | }]
|
150 | }, {
|
151 | department: true,
|
152 | label: 'Haut-Rhin'
|
153 | }]
|
154 | }, {
|
155 | label: 'Aquitaine',
|
156 | area: true
|
157 | }, {
|
158 | label: 'Auvergne',
|
159 | area: true
|
160 | }, {
|
161 | label: 'Basse-Normandie',
|
162 | area: true
|
163 | }, {
|
164 | label: 'Bourgogne',
|
165 | area: true
|
166 | }, {
|
167 | label: 'Bretagne',
|
168 | area: true
|
169 | }, {
|
170 | label: 'Centre',
|
171 | area: true
|
172 | }, {
|
173 | label: 'Champagne-Ardenne',
|
174 | area: true
|
175 | }, {
|
176 | label: 'Corse',
|
177 | area: true
|
178 | }, {
|
179 | label: 'Franche-Comté',
|
180 | area: true
|
181 | }, {
|
182 | label: 'Guadeloupe',
|
183 | area: true
|
184 | }, {
|
185 | label: 'Guyane',
|
186 | area: true
|
187 | }, {
|
188 | label: 'Haute-Normandie',
|
189 | area: true
|
190 | }, {
|
191 | label: 'Île-de-France',
|
192 | area: true,
|
193 | items: [{
|
194 | label: '75 - Paris',
|
195 | department: true,
|
196 | items: [{
|
197 | label: 'Paris',
|
198 | canton: true
|
199 | }]
|
200 | }, {
|
201 | label: '77 - Seine-et-Marne',
|
202 | department: true,
|
203 | items: [{
|
204 | label: 'Fontainebleau',
|
205 | canton: true
|
206 | }, {
|
207 | label: 'Meaux',
|
208 | canton: true
|
209 | }, {
|
210 | label: 'Melun',
|
211 | canton: true
|
212 | }, {
|
213 | label: 'Provins',
|
214 | canton: true
|
215 | }, {
|
216 | label: 'Torcy',
|
217 | canton: true
|
218 | }]
|
219 | }, {
|
220 | label: '78 - Yvelines',
|
221 | department: true,
|
222 | items: [{
|
223 | label: 'Mantes-la-Jolie',
|
224 | canton: true
|
225 | }, {
|
226 | label: 'Rambouillet',
|
227 | canton: true
|
228 | }, {
|
229 | label: 'Saint-Germain-en-Laye',
|
230 | canton: true
|
231 | }, {
|
232 | label: 'Versailles',
|
233 | canton: true
|
234 | }]
|
235 | }, {
|
236 | label: '91 - Essonne',
|
237 | department: true
|
238 | }, {
|
239 | label: '92 - Hauts-de-Seine',
|
240 | department: true
|
241 | }, {
|
242 | label: '93 - Seine-Saint-Denis',
|
243 | department: true
|
244 | }, {
|
245 | label: '94 - Val-de-Marne',
|
246 | department: true
|
247 | }, {
|
248 | label: '95 - Val-d\'Oise',
|
249 | department: true
|
250 | }]
|
251 | }, {
|
252 | label: 'La Réunion',
|
253 | area: true
|
254 | }, {
|
255 | label: 'Languedoc-Roussillon',
|
256 | area: true
|
257 | }, {
|
258 | label: 'Limousin',
|
259 | area: true
|
260 | }, {
|
261 | label: 'Lorraine',
|
262 | area: true
|
263 | }, {
|
264 | label: 'Martinique',
|
265 | area: true
|
266 | }, {
|
267 | label: 'Mayotte',
|
268 | area: true
|
269 | }, {
|
270 | label: 'Midi-Pyrénées',
|
271 | area: true
|
272 | }, {
|
273 | label: 'Nord-Pas-de-Calais',
|
274 | area: true
|
275 | }, {
|
276 | label: 'Pays de la Loire',
|
277 | area: true
|
278 | }, {
|
279 | label: 'Picardie',
|
280 | area: true
|
281 | }, {
|
282 | label: 'Poitou-Charentes',
|
283 | area: true
|
284 | }, {
|
285 | label: 'Provence-Alpes-Côte d\'Azur',
|
286 | area: true
|
287 | }, {
|
288 | label: 'Rhône-Alpes',
|
289 | area: true
|
290 | }]
|
291 | }, {
|
292 | label: 'Austria',
|
293 | country: true
|
294 | }, {
|
295 | label: 'Belgium',
|
296 | country: true
|
297 | }, {
|
298 | label: 'Bulgaria',
|
299 | country: true
|
300 | }, {
|
301 | label: 'Croatia',
|
302 | country: true
|
303 | }, {
|
304 | label: 'Cyprus',
|
305 | country: true
|
306 | }, {
|
307 | label: 'Czech Republic',
|
308 | country: true
|
309 | }, {
|
310 | label: 'Denmark',
|
311 | country: true
|
312 | }, {
|
313 | label: 'Estonia',
|
314 | country: true
|
315 | }, {
|
316 | label: 'Finland',
|
317 | country: true
|
318 | }, {
|
319 | label: 'France',
|
320 | country: true
|
321 | }, {
|
322 | label: 'Germany',
|
323 | country: true
|
324 | }, {
|
325 | label: 'Greece',
|
326 | country: true
|
327 | }, {
|
328 | label: 'Hungary',
|
329 | country: true
|
330 | }, {
|
331 | label: 'Ireland',
|
332 | country: true
|
333 | }, {
|
334 | label: 'Italy',
|
335 | country: true
|
336 | }, {
|
337 | label: 'Latvia',
|
338 | country: true
|
339 | }, {
|
340 | label: 'Lithuania',
|
341 | country: true
|
342 | }, {
|
343 | label: 'Luxembourg',
|
344 | country: true
|
345 | }, {
|
346 | label: 'Malta',
|
347 | country: true
|
348 | }, {
|
349 | label: 'Netherlands',
|
350 | country: true
|
351 | }, {
|
352 | label: 'Poland',
|
353 | country: true
|
354 | }, {
|
355 | label: 'Portugal',
|
356 | country: true
|
357 | }, {
|
358 | label: 'Romania',
|
359 | country: true
|
360 | }, {
|
361 | label: 'Slovakia',
|
362 | country: true
|
363 | }, {
|
364 | label: 'Slovenia',
|
365 | country: true
|
366 | }, {
|
367 | label: 'Spain',
|
368 | country: true
|
369 | }, {
|
370 | label: 'Sweden',
|
371 | country: true
|
372 | }, {
|
373 | label: 'United Kingdom',
|
374 | country: true
|
375 | }]);
|
376 |
|
377 | page.set('onloaded', function() {
|
378 | $('.example-mask').remove();
|
379 | });
|
380 |
|
381 | page.require();
|
382 | });
|
383 |
|
384 | })();
|
385 | </script>
|
386 | </body>
|
387 | </html>
|