diff --git a/proj/map/asset/css/style.css b/proj/map/asset/css/style.css index c46d0a1..6782238 100644 --- a/proj/map/asset/css/style.css +++ b/proj/map/asset/css/style.css @@ -87,7 +87,7 @@ div#list::-webkit-scrollbar { span.listname { margin-top: 10px; - margin-bottom: 10px; + margin-bottom: 0px; display: inline-block; } @@ -98,14 +98,16 @@ span.listname h3 { span.listname span.listicon { margin: 5px; + margin-left: 10px; float: left; + font-size: 0.8rem; transform: rotate(0deg); transition: transform 0.3s; } span.listname.active span.listicon { float: left; - transform: rotate(-180deg); + transform: rotate(-45deg); transition: transform 0.3s; } @@ -167,8 +169,8 @@ section.lastlistitem aside span.info { div.sep { background-color: var(--b9h-color-fg); - height:5px; - width: 100vw; + height:0px; + width: 110vw; margin-left: -8px; overflow-x: hidden; @@ -323,7 +325,7 @@ section.restomenu h2 { section#resto nav span.resto-tag { margin-top: 0px; - margin-bottom: 20px; + margin-bottom: 0px; width: auto; display: inline-block; cursor: pointer; @@ -332,12 +334,17 @@ section#resto nav span.resto-tag { section#resto nav span.resto-tag h3 { border: 3px; border-style: solid; - border-width: 5px; + border-width: 4px; width: auto; - padding: 10px; - margin: 10px; + padding: 6px; + margin: 5px; + font-size: 0.9rem; } section#resto nav span.resto-tag.active h3 { border-color: var(--b9h-color-accent); } + +nav.restotagcloud { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/proj/map/asset/js/db.js b/proj/map/asset/js/db.js index fa51fb0..8e40d42 100644 --- a/proj/map/asset/js/db.js +++ b/proj/map/asset/js/db.js @@ -27,6 +27,10 @@ var jdb = { card: { tabs: { info: { + tabtype: "info", + site: "https://www.cannes.com/fr/mairie/annuaire-pratique/equipements-municipaux/p10-parking-lamy.html", + addres: "121 rue d'Antibes - 06400 Cannes", + } } diff --git a/proj/map/asset/js/main.js b/proj/map/asset/js/main.js index 14bdb4e..7066f36 100644 --- a/proj/map/asset/js/main.js +++ b/proj/map/asset/js/main.js @@ -1,3 +1,52 @@ +Vue.component('Info',{ + template : ` + <div class="tabinfocontent"> + + <section> + <a href=""> + <span class="byl-icon-link"></span> + <span></span> + </a> + </section> + + </div> + `, + props : { + obj : Object + }, + data () { + return { + message : "hello from menu", + et : { + fr : " et ", + en : " and ", + it : " e ", + }, + fourchette : { + fr : "Fourchette de prix par personne:", + en : "Price range per person:", + it : "Fascia di prezzo per persona:", + }, + horsboissons : { + fr : "(hors boissons)", + en : "(excluding drinks)", + it : "(bevande escluse)", + }, + } + }, + methods : { + capitalize(s){ + return s.charAt(0).toUpperCase() + s.slice(1) + }, + } + //byl-icon-link + //byl-icon-wifi + //byl-icon-call + //byl-icon-location_on + //byl-icon-mail_outline + //byl-icon-accessible +}) + Vue.component('Menu',{ template: ` <section class="restomenu"> @@ -186,12 +235,12 @@ Vue.component('Accordeon', { <h3 class="b9h-lang-fr">{{ this.list.nameFR }}</h3> <h3 class="b9h-lang-en">{{ this.list.nameEN }}</h3> <h3 class="b9h-lang-it">{{ this.list.nameIT }}</h3> - <span class="byl-icon-chevron-down listicon"> + <span class="byl-icon-plus listicon"></span> </span> </a> <section class="listchild" :class="{ active: this.list.isActive }"> - <nav v-if="this.list.id == 'resto'"> + <nav class="restotagcloud" v-if="this.list.id == 'resto'"> <span v-for="t in this.tl" class="resto-tag" @@ -254,6 +303,7 @@ Vue.component('Accordeon', { v-for="i in this.list.card.tabs"> <Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time> <Menu v-if="i.tabtype === 'menu'" v-bind:obj="i"></Menu> + <Info v-if="i.tabtype === 'info'" v-bind:obj="i"></Info> </section> </section> </div> @@ -380,6 +430,8 @@ Vue.component('Accordeon', { return "byl-icon-clock" // code block break; + case "info": + return "byl-icon-info" default: // code block } diff --git a/proj/map/index.html b/proj/map/index.html index 33e1f80..6b74175 100644 --- a/proj/map/index.html +++ b/proj/map/index.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="asset/leaflet/leaflet.css"/> <link rel="stylesheet" href="asset/css/style.css"/> - <link rel="stylesheet" href="asset/fonts/byl-iconfont-v3.2/icons.css"/> + <link rel="stylesheet" href="asset/fonts/byl-iconfont-v4.0/icons.css"/> </head> <body>