plumes
Version:
Flying-fast Metro future vision components
382 lines (360 loc) • 8.62 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plumes - Lists</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/public/plumes/plumes.css" type="text/css" />
<style type="text/css">
.example-mask {
z-index: 99998;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
.pl-grouped-list {
position: fixed ;
top: 80px;
left: 3rem;
right: 3rem;
bottom: 3rem;
}
.pl-grouped-list-item {
font-size: 1.8rem;
line-height: 3rem;
background: white;
}
.country {
font-size: 4rem;
line-height: 5rem;
text-transform: uppercase;
color: #ff6600;
}
.area {
font-size: 3.4rem;
line-height: 4.6rem;
}
.department {
font-size: 2rem;
line-height: 3.6rem;
}
.canton {
font-size: 1.6rem;
line-height: 3rem;
color: #999;
}
</style>
</head>
<body>
<rv-require
name="pl-layout-platform"
src="../public/layouts/pl-layout-platform"
data-bind-onloaded="onloaded"
data-bind-apps="apps"
data-bind-listitems="listitems"
>
<rv-partial target="mask-title">
Lists <span class="accent">example</span>
</rv-partial>
<rv-partial target="message-title">
Lists <span class="accent">example</span>
</rv-partial>
<rv-partial target="content">
<rv-require
name="pl-grouped-list"
src="../public/lists/pl-grouped-list"
data-bind-items="listitems"
>
<rv-partial target="itemTemplate" src="./lists-items-partial.html"></rv-partial>
</rv-require>
</rv-partial>
</rv-require>
<div class="example-mask"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
<script type="text/javascript" src="/public/plumes/plumes.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.Ractive.Plumes.bootstrap(function(page) {
page.set('apps', [{
name: 'Plumes',
select: function() {
window.location.href = 'index.html';
}
}, {
name: 'Example Login',
select: function() {
window.location.href = 'login.html';
}
}, {
name: 'Example Lists',
selected: true,
select: function() {
window.location.href = 'lists.html';
}
}]);
page.set('listitems', [{
label: 'France',
country: true,
items: [{
label: 'Alsace',
area: true,
items: [{
department: true,
label: 'Bas-Rhin',
items: [{
label: 'Haguenau-Wissembourg',
canton: true
}, {
label: 'Molsheim',
canton: true
}, {
label: 'Saverne',
canton: true
}, {
label: 'Sélestat-Erstein',
canton: true
}, {
label: 'Strasbourg',
canton: true
}]
}, {
department: true,
label: 'Haut-Rhin'
}]
}, {
label: 'Aquitaine',
area: true
}, {
label: 'Auvergne',
area: true
}, {
label: 'Basse-Normandie',
area: true
}, {
label: 'Bourgogne',
area: true
}, {
label: 'Bretagne',
area: true
}, {
label: 'Centre',
area: true
}, {
label: 'Champagne-Ardenne',
area: true
}, {
label: 'Corse',
area: true
}, {
label: 'Franche-Comté',
area: true
}, {
label: 'Guadeloupe',
area: true
}, {
label: 'Guyane',
area: true
}, {
label: 'Haute-Normandie',
area: true
}, {
label: 'Île-de-France',
area: true,
items: [{
label: '75 - Paris',
department: true,
items: [{
label: 'Paris',
canton: true
}]
}, {
label: '77 - Seine-et-Marne',
department: true,
items: [{
label: 'Fontainebleau',
canton: true
}, {
label: 'Meaux',
canton: true
}, {
label: 'Melun',
canton: true
}, {
label: 'Provins',
canton: true
}, {
label: 'Torcy',
canton: true
}]
}, {
label: '78 - Yvelines',
department: true,
items: [{
label: 'Mantes-la-Jolie',
canton: true
}, {
label: 'Rambouillet',
canton: true
}, {
label: 'Saint-Germain-en-Laye',
canton: true
}, {
label: 'Versailles',
canton: true
}]
}, {
label: '91 - Essonne',
department: true
}, {
label: '92 - Hauts-de-Seine',
department: true
}, {
label: '93 - Seine-Saint-Denis',
department: true
}, {
label: '94 - Val-de-Marne',
department: true
}, {
label: '95 - Val-d\'Oise',
department: true
}]
}, {
label: 'La Réunion',
area: true
}, {
label: 'Languedoc-Roussillon',
area: true
}, {
label: 'Limousin',
area: true
}, {
label: 'Lorraine',
area: true
}, {
label: 'Martinique',
area: true
}, {
label: 'Mayotte',
area: true
}, {
label: 'Midi-Pyrénées',
area: true
}, {
label: 'Nord-Pas-de-Calais',
area: true
}, {
label: 'Pays de la Loire',
area: true
}, {
label: 'Picardie',
area: true
}, {
label: 'Poitou-Charentes',
area: true
}, {
label: 'Provence-Alpes-Côte d\'Azur',
area: true
}, {
label: 'Rhône-Alpes',
area: true
}]
}, {
label: 'Austria',
country: true
}, {
label: 'Belgium',
country: true
}, {
label: 'Bulgaria',
country: true
}, {
label: 'Croatia',
country: true
}, {
label: 'Cyprus',
country: true
}, {
label: 'Czech Republic',
country: true
}, {
label: 'Denmark',
country: true
}, {
label: 'Estonia',
country: true
}, {
label: 'Finland',
country: true
}, {
label: 'France',
country: true
}, {
label: 'Germany',
country: true
}, {
label: 'Greece',
country: true
}, {
label: 'Hungary',
country: true
}, {
label: 'Ireland',
country: true
}, {
label: 'Italy',
country: true
}, {
label: 'Latvia',
country: true
}, {
label: 'Lithuania',
country: true
}, {
label: 'Luxembourg',
country: true
}, {
label: 'Malta',
country: true
}, {
label: 'Netherlands',
country: true
}, {
label: 'Poland',
country: true
}, {
label: 'Portugal',
country: true
}, {
label: 'Romania',
country: true
}, {
label: 'Slovakia',
country: true
}, {
label: 'Slovenia',
country: true
}, {
label: 'Spain',
country: true
}, {
label: 'Sweden',
country: true
}, {
label: 'United Kingdom',
country: true
}]);
page.set('onloaded', function() {
$('.example-mask').remove();
});
page.require();
});
})();
</script>
</body>
</html>