mobile test

proj/map/asset/css/style.css

@@ -104,6 +104,34 @@ section.listchild {
   padding-right: 10px;
 }
 
+main section.void {
+  height: 100vh;
+}
 
+section.lastlistitem {
+  width: 100vw;
+  margin-bottom: 10px;
+}
 
+section.lastlistitem aside {
+  float: left;
+  width: 50%;
+}
 
+section.lastlistitem aside h3 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+section.lastlistitem img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  margin-left: -10px;
+}
+
+section.lastlistitem:after {
+  content: "";
+  display: table;
+  clear: both;
+}

proj/map/asset/js/main.js

@@ -1,6 +1,8 @@
 Vue.component('Accordeon', {
   template : `
   <section v-bind:id="this.list.id">
+  <nav v-if="this.list.type === 'list'">
+
     <a v-bind:href="this.href">
       <span
       v-on:click="toggleActive()"
@@ -15,7 +17,19 @@ Vue.component('Accordeon', {
       </span>
     </a>
     <section class="listchild" :class="{ active: isActive }">
-      <h3 v-for="i in this.list.sub"> {{ i.nameFR }} </h3>
+      <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
+    </section>
+  </nav>
+    <section v-if="this.list.type === 'item'" class="lastlistitem">
+      <aside>
+        <img v-bind:src="this.list.img"></img>
+      </aside>
+      <aside>
+        <h3>{{ this.list.name }}</h3>
+        <p class="b9h-lang-fr">{{ this.list.txtFR }}</p>
+        <p class="b9h-lang-en">{{ this.list.txtEN }}</p>
+        <p class="b9h-lang-it">{{ this.list.txtIT }}</p>
+      </aside>
     </section>
   </section>
   `,
@@ -34,9 +48,16 @@ Vue.component('Accordeon', {
   },
   methods : {
     donothing () {
+
     },
     toggleActive () {
       this.isActive = !this.isActive
+      document.getElementById(this.list.id).scrollIntoView(
+        {
+          behavior: "smooth",
+          block: "end",
+          inline: "nearest"}
+      );
     }
   }
 })
@@ -44,11 +65,13 @@ Vue.component('Accordeon', {
 
 const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
 
+/*
 let jdnb
 
 fetch(jsonurl)
   .then(res => res.json())
   .then(data => jdnb = data)
+*/
 
 let vm = new Vue({
   el: '#root',
@@ -56,32 +79,58 @@ let vm = new Vue({
     currentLang: 'fr',
     db : {},
     dburl : "https://ed.brz9.dev/proj/map/asset/json/db.json",
-    db2 : {
+    db : {
       restaurants : {
         id : "resto",
+        type : "list",
         nameFR : "Restaurant",
         nameEN : "Restaurant",
         nameIT : "Ristoranti",
         sub : {
           italiens : {
             id: "restoital",
+            type : "list",
             nameFR : "Italien",
             nameEN : "Italian",
             nameIT : "Italiano",
-            SanTelmo : {
-              name: "San Telmo"
+            sub : {
+              SanTelmo : {
+                id: "santelmo",
+                type : "item",
+                name: "San Telmo",
+                img: "/home/ed/code/web/html-css/ed.brz9.dev/proj/map/asset/img/santelmo.jpg",
+                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+              },
+              Salsamenteria : {
+                id: "salsamenteria",
+                type : "item",
+                name: "Salsamenteria di Parma",
+                img: "/home/ed/code/web/html-css/ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
+                txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+                txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies. DIY readymade brunch VHS small batch tofu eiusmod sartorial street art gastropub af minim. Yes plz hot chicken chartreuse irony church-key.",
+              },
             },
-            Salsamenteria : {
-              name: "Salsamenteria di Parma"
-            }
           },
           vege : {
             id : "restovege",
+            type : "list",
             nameFR : "Végétarien",
             nameEN : "Vegan",
             nameIT : "Vegetariano",
-            SanTelmo : {
-              name: "San Telmo"
+            sub : {
+              SanTelmo : {
+                id: "santelmo",
+                type : "item",
+                name: "San Telmo",
+              },
+              Salsamenteria : {
+                id: "salsamenteria",
+                type : "item",
+                name: "Salsamenteria di Parma",
+              },
             }
           }
         }
@@ -123,9 +172,9 @@ let vm = new Vue({
     },
   },
   created: function(){
-    cosole.log("about to call getJDB")
-    this.getJDB();
-    cosole.log("after getJDB call")
+    console.log("about to call getJDB")
+//    this.getJDB();
+    console.log("after getJDB call")
   },
   mounted: function() {
     console.log("mounting");

proj/map/index.html

@@ -30,6 +30,7 @@
 
   <Accordeon v-bind:list="db.restaurants"></Accordeon>
 
+  <section class="void"></section>
 </div>
 
 </main>

proj/map/notes

@@ -1,2 +1,5 @@
-      <Accordeon v-bind:list="this.list.sub"></Accordeon>
 
+
+  <Accordeon v-bind:list="db.restaurants"></Accordeon>
+
+  <Accordeon v-bind:list="this.list.sub"></Accordeon>