nav beautify

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;
+}

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",
+
 
                 }
               }

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
       }

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>