cards improvement

proj/map/asset/css/style.css

@@ -100,14 +100,15 @@ span.listname span.listicon {
   margin: 5px;
   margin-left: 10px;
   float: left;
-  font-size: 0.8rem;
+  line-height: 80%;
+  font-size: 1rem;
   transform: rotate(0deg);
   transition: transform 0.3s;
 }
 
 span.listname.active span.listicon {
   float: left;
-  transform: rotate(-45deg);
+  transform: rotate(45deg);
   transition: transform 0.3s;
 }
 
@@ -157,14 +158,9 @@ section.lastlistitem aside span.info {
   position: absolute;
   bottom: 0px;
 
-  font-size: 30px;
+  font-size: 35px;
-  font-weight: 600;
+  /*background-color: var(--b9h-color-fg);*/
-  width: 32px;
+  color: var(--b9h-color-fg);
-  height: 32px;
-  text-align: center;
-  border-radius: 100%;
-  background-color: var(--b9h-color-fg);
-  color: var(--b9h-color-bg);
 }
 
 div.sep {
@@ -190,7 +186,7 @@ section.card {
 }
 
 section.card nav {
-  margin-top: 40px;
+  margin-top: 50px;
   margin-bottom: 30px;
   display: flex;
   flex-direction: row;
@@ -203,8 +199,8 @@ section.card nav span {
 
 section.card span.byl-icon-cross {
   position: absolute;
-  right: 20px;
+  right: 40px;
-  top: 20px;
+  top: 40px;
   font-size: 1.3rem;
 }
 
@@ -261,10 +257,10 @@ div.leaflet-popup-tip {
 
 div.timetable p span.hour {
   float: right;
-  margin-right: 20px;
+  margin-right: 0px;
 }
 div.timetable p {
-  margin-left: 30px;
+  margin-left: 20px;
   margin-bottom: 30px;
 }
 
@@ -308,15 +304,19 @@ section.restomenu div.dish p {
 }
 
 section.restomenu ul {
+  margin-top: 5px;
+  margin-bottom: 5px;
   margin-left: 0px;
   padding-left: 0px;
 }
 
 section.restomenu h2 {
   margin-top: 30px;
-  text-decoration: underline;
+  text-decoration: none;
   text-underline-offset: 10px;
   text-decoration-thickness: 5px;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
 }
 
 ::-webkit-scrollbar {
@@ -347,4 +347,31 @@ section#resto nav span.resto-tag.active h3 {
 
 nav.restotagcloud {
   margin-bottom: 10px;
+}
+
+div.tabinfocontent {
+  padding: 10px;
+  margin-top: 20px;
+  font-size: 1.2rem;
+}
+
+div.tabinfocontent span.infotags {
+  margin-right: 10px;
+}
+
+div.tabinfocontent section.infoline {
+  margin-bottom: 30px;
+}
+
+section.card div h3.cardtitle {
+  margin-top: 40px;
+  margin-left: 20px;
+  text-decoration: underline;
+  text-underline-offset: 15px;
+  text-decoration-thickness: 5px;
+  text-decoration-color: var(--b9h-color-accent);
+}
+
+section.restomenu div.dish {
+  margin-left: 20px;
 }

proj/map/asset/js/db.js

@@ -21,15 +21,20 @@ var jdb = {
             img: "https://ed.brz9.dev/proj/map/asset/img/lamy.jpg",
             type: "item",
             name: "Parking Lamy",
-            txtFR: "Parking public souterrain, situé à 3 minutes à pied de l'hôtel.",
+            txtFR: "Parking public souterrain, situé à 3 minutes à pied de l'hôtel. Hauteur maximum: 1,9 m.",
-            txtEN: "Underground public parking, located 3 minutes walk from the hotel.",
+            txtEN: "Underground public parking, located 3 minutes walk from the hotel. Maximum height: 1,9 m.",
-            txtIT: "Parcheggio pubblico sotterraneo, situato a 3 minuti a piedi dall'hotel.",
+            txtIT: "Parcheggio pubblico sotterraneo, situato a 3 minuti a piedi dall'hotel. Altezza massima: 1,9 m.",
             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",
+                  handi: "yes",
+                  hautmax: "1,9 m",
+                  wifi: "yes",
+                  address: "121 rue d'Antibes - 06400 Cannes",
+                  tel: "+33 4 89 82 23 23",
+                  email: "cannesparking@ville-cannes.fr",
 
 
                 }

proj/map/asset/js/main.js

@@ -2,36 +2,92 @@ Vue.component('Info',{
   template : `
     <div class="tabinfocontent">
 
-      <section>
+      <section class="infoline" v-if="this.obj.hasOwnProperty('site')">
-        <a href="">
+        <a v-bind:href="this.obj.site" target="_blank">
-          <span class="byl-icon-link"></span>
+          <span class="byl-icon-link infotags"></span>
-          <span></span>
+          <span class="b9h-lang-fr">{{ siteoff.fr }}</span>
+          <span class="b9h-lang-en">{{ siteoff.en }}</span>
+          <span class="b9h-lang-it">{{ siteoff.it }}</span>
         </a>
       </section>
 
+      <section class="infoline" v-if="this.obj.hasOwnProperty('tel')">
+        <a v-bind:href="this.telhref">
+          <span class="byl-icon-call infotags"></span>
+          <span>{{ this.obj.tel }}</span>
+        </a>
+      </section>
+
+      <section class="infoline" v-if="this.obj.hasOwnProperty('email')">
+        <a v-bind:href="this.mailhref">
+          <span class="byl-icon-mail_outline infotags"></span>
+          <span>{{ this.obj.email }}</span>
+        </a>
+      </section>
+
+      <section class="infoline" v-if="this.obj.hasOwnProperty('address')">
+        <span class="byl-icon-location_on infotags"></span>
+        <span>{{ this.obj.address }}</span>
+      </section>
+
+      <section class="infoline" v-if="this.obj.hasOwnProperty('handi')">
+        <span class="byl-icon-accessible infotags"></span>
+        <span class="b9h-lang-fr">{{ handi.fr }}</span>
+        <span class="b9h-lang-en">{{ handi.en }}</span>
+        <span class="b9h-lang-it">{{ handi.it }}</span>
+      </section>
+
+      <section class="infoline" v-if="this.obj.hasOwnProperty('hautmax')">
+        <span class="byl-icon-publish infotags"></span>
+        <span class="b9h-lang-fr">
+          {{ hautmax.fr }} {{ this.obj.hautmax}}
+        </span>
+        <span class="b9h-lang-en">
+          {{ hautmax.en }} {{ this.obj.hautmax}}
+        </span>
+        <span class="b9h-lang-it">
+          {{ hautmax.it }} {{ this.obj.hautmax}}
+        </span>
+      </section>
+
+
+
+
+
     </div>
   `,
   props : {
     obj : Object
   },
+  computed : {
+    telhref: function () {
+      if (this.obj.hasOwnProperty('tel')) {
+        return "tel:" + this.obj.tel
+      }
+    },
+    mailhref: function () {
+      if (this.obj.hasOwnProperty('email')) {
+        return "mailto:" + this.obj.email
+      }
+    },
+  },
   data () {
     return {
-      message : "hello from menu",
+      siteoff : {
-      et : {
+        fr : "Site officiel",
-        fr : " et ",
+        en : "Official website",
-        en : " and ",
+        it : "Sito ufficiale",
-        it : " e ",
       },
-      fourchette : {
+      handi : {
-        fr : "Fourchette de prix par personne:",
+        fr : "Accessible en fauteuil roulant",
-        en : "Price range per person:",
+        en : "Wheelchair accessible",
-        it : "Fascia di prezzo per persona:",
+        it : "Accessibile con sedia a rotelle",
-      },
-      horsboissons : {
-        fr : "(hors boissons)",
-        en : "(excluding drinks)",
-        it : "(bevande escluse)",
       },
+      hautmax: {
+        fr : "Hauteur maximum: ",
+        en : "Maximum height: ",
+        it : "Altezza massima: ",
+      }
     }
   },
   methods : {
@@ -39,11 +95,8 @@ Vue.component('Info',{
       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
 })
 
@@ -277,6 +330,8 @@ Vue.component('Accordeon', {
         <span v-on:click="hideCard()"class="byl-icon-cross"></span>
         <div>
 
+        <h3 class="cardtitle">{{ this.list.name }}</h3>
+
         <nav class="cardnav">
           <span class="marker"
             v-bind:style="{
@@ -312,7 +367,7 @@ Vue.component('Accordeon', {
         <span
           v-if="'card' in this.list"
           v-on:click="showCard()"
-          class="info">i</span>
+          class="byl-icon-info info"></span>
 
       </aside>
     </section>
@@ -453,7 +508,7 @@ Vue.component('Accordeon', {
     },
     toggleActive () {
       this.list.isActive = !this.list.isActive
-      document.getElementById(this.list.id).scrollIntoView();
+      document.getElementById(this.list.id).scrollIntoView(true);
     },
     setMap () {
       map.setView(this.dirxy, this.dirzl)