cards added xwith time
This commit is contained in:
parent
4c55f620ca
commit
8490602d2d
Binary file not shown.
|
|
@ -4,7 +4,8 @@
|
|||
@import url("./font.css");
|
||||
|
||||
header {
|
||||
|
||||
height: 100px;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -13,15 +14,28 @@ body {
|
|||
}
|
||||
|
||||
section#logo {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
section#lang {
|
||||
position: fixed;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
section#lang span.marker {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
bottom: -8px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
section#lang span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
section#map-container {
|
||||
|
|
@ -40,6 +54,7 @@ main {
|
|||
top: 340px;
|
||||
bottom: 0px;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div#list {
|
||||
|
|
@ -49,20 +64,13 @@ div#list {
|
|||
padding-left: 10px;
|
||||
padding-top: 10px
|
||||
scrollbar-width: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div#list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
bottom: -10px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.listchild {
|
||||
height: 0%;
|
||||
|
|
@ -156,3 +164,73 @@ section.lastlistitem aside span.info {
|
|||
background-color: var(--b9h-color-fg);
|
||||
color: var(--b9h-color-bg);
|
||||
}
|
||||
|
||||
div.sep {
|
||||
background-color: var(--b9h-color-fg);
|
||||
height:5px;
|
||||
width: 100vw;
|
||||
margin-left: -8px;
|
||||
overflow-x: hidden;
|
||||
|
||||
content: "jsdflkj"
|
||||
}
|
||||
|
||||
section.card {
|
||||
position: fixed;
|
||||
top: 110vh;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: var(--b9h-color-bg);
|
||||
z-index: 1000;
|
||||
transition: top 0.5s;
|
||||
}
|
||||
|
||||
section.card nav {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
section.card nav span {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
section.card span.byl-icon-cross {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
section.tabroll {
|
||||
margin-top: 20px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
section.tabroll {
|
||||
transform: translateX(-0vw);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
section.tabroll section.singletab {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav.cardnav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav.cardnav span.marker {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
left: 0px;
|
||||
width: 0px;
|
||||
background-color: var(--b9h-color-accent);
|
||||
bottom: -20px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -2,12 +2,120 @@
|
|||
//const dburl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
|
||||
const dburl = "https://ed.brz9.dev/proj/map/asset/json/endpoint/"
|
||||
|
||||
Vue.component('Time', {
|
||||
template : `
|
||||
<div>
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.mon.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.mon.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.mon.it }}</span>
|
||||
<span>{{ this.obj.mon }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.tue.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.tue.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.tue.it }}</span>
|
||||
<span>{{ this.obj.tue }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.wed.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.wed.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.wed.it }}</span>
|
||||
<span>{{ this.obj.wed }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.thu.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.thu.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.thu.it }}</span>
|
||||
<span>{{ this.obj.thu }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.fri.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.fri.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.fri.it }}</span>
|
||||
<span>{{ this.obj.fri }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.sat.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.sat.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.sat.it }}</span>
|
||||
<span>{{ this.obj.sat }}</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="b9h-lang-fr">{{ this.days.sun.fr }}</span>
|
||||
<span class="b9h-lang-en">{{ this.days.sun.en }}</span>
|
||||
<span class="b9h-lang-it">{{ this.days.sun.it }}</span>
|
||||
<span>{{ this.obj.sun }}</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
`,
|
||||
props : {
|
||||
obj : Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
message : "hello from time",
|
||||
days : {
|
||||
mon : {
|
||||
fr : "Lundi",
|
||||
en : "Monday",
|
||||
it : "Lunedì"
|
||||
},
|
||||
tue : {
|
||||
fr : "Mardi",
|
||||
en : "Tuesday",
|
||||
it : "Martedì"
|
||||
},
|
||||
wed : {
|
||||
fr : "Mercredi",
|
||||
en : "Wednesday",
|
||||
it : "Mercoledì"
|
||||
},
|
||||
thu : {
|
||||
fr : "Jeudi",
|
||||
en : "Thursday",
|
||||
it : "Giovedì"
|
||||
},
|
||||
fri : {
|
||||
fr : "Vendredi",
|
||||
en : "Friday",
|
||||
it : "Venerdì"
|
||||
},
|
||||
sat : {
|
||||
fr : "Samedi",
|
||||
en : "Saturday",
|
||||
it : "Sabato"
|
||||
},
|
||||
sun : {
|
||||
fr : "Dimanche",
|
||||
en : "Sunday",
|
||||
it : "Domenica"
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
getTime () {
|
||||
tabtype
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Vue.component('Accordeon', {
|
||||
template : `
|
||||
<section v-bind:id="this.list.id">
|
||||
<nav v-if="this.list.type === 'list'">
|
||||
|
||||
<a v-bind:href="this.href">
|
||||
<a>
|
||||
<span
|
||||
v-on:click="toggleActive()"
|
||||
class="listname"
|
||||
|
|
@ -34,7 +142,52 @@ Vue.component('Accordeon', {
|
|||
<p class="b9h-lang-en">{{ this.list.txtEN }}</p>
|
||||
<p class="b9h-lang-it">{{ this.list.txtIT }}</p>
|
||||
|
||||
<span class="info">i</span>
|
||||
<section
|
||||
v-if="'card' in this.list"
|
||||
class="card"
|
||||
v-bind:id="this.cardid"
|
||||
v-bind:style="{ top: this.cardTop }">
|
||||
<span v-on:click="hideCard()"class="byl-icon-cross"></span>
|
||||
<div>
|
||||
|
||||
<nav class="cardnav">
|
||||
<span class="marker"
|
||||
v-bind:style="{
|
||||
left : this.markerL,
|
||||
width : this.markerW
|
||||
}"
|
||||
></span>
|
||||
<span
|
||||
v-for="i in this.list.card.tabs"
|
||||
v-on:click="setTab(getIndex(i))"
|
||||
v-bind:id="getMarkerId(i)"
|
||||
v-bind:class="getTabLogo(i)"
|
||||
ref="tabnavi"
|
||||
>
|
||||
</span>
|
||||
</nav>
|
||||
<section class="tabroll"
|
||||
v-bind:style="{
|
||||
width : this.tabrollw,
|
||||
transform : this.tabrollTransX
|
||||
}"
|
||||
>
|
||||
<section class="singletab"
|
||||
v-for="i in this.list.card.tabs">
|
||||
<p>{{ i.tabtype }}</p>
|
||||
<Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<span
|
||||
v-if="'card' in this.list"
|
||||
v-on:click="showCard()"
|
||||
class="info">i</span>
|
||||
|
||||
</aside>
|
||||
</section>
|
||||
|
|
@ -45,26 +198,110 @@ Vue.component('Accordeon', {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
isActive : false
|
||||
isActive : false,
|
||||
displayCard : "block",
|
||||
cardTop : "110vh",
|
||||
tabrollxoff : 0,
|
||||
tabind : 0,
|
||||
markerL : 0,
|
||||
markerW : 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
href: function () {
|
||||
return "#" + this.list.id;
|
||||
}
|
||||
},
|
||||
cardid: function () {
|
||||
return "card" + this.list.id;
|
||||
},
|
||||
tabcount: function () {
|
||||
if ('card' in this.list){
|
||||
console.log(this.list + " has a card")
|
||||
var arr = Object.entries(this.list.card.tabs);
|
||||
return arr.length
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
tabrollw: function () {
|
||||
return this.tabcount + "00vw";
|
||||
},
|
||||
tabrollTransX: function () {
|
||||
return "translateX(-" + this.tabrollxoff + "00vw)";
|
||||
},
|
||||
markerLL : function () {
|
||||
if ('card' in this.list){
|
||||
try {
|
||||
return this.$refs.tabnavi[this.tabind].getBoundingClientRect().left + "px"
|
||||
}catch(err) {}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
markerWW : function () {
|
||||
if ('card' in this.list){
|
||||
try {
|
||||
target = document.querySelector("#" + this.cardid +"0");
|
||||
marker.style.left = target.offsetLeft + "px";
|
||||
return target.offsetWidth + "px";
|
||||
//return this.$refs.tabnavi[this.tabind].getBoundingClientRect().width + "px"
|
||||
}catch(err) {
|
||||
console.log(err.message)
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods : {
|
||||
getMarkerId(i) {
|
||||
return this.cardid + this.getIndex(i).toString()
|
||||
},
|
||||
getIndex(obj) {
|
||||
var arr = Object.entries(this.list.card.tabs);
|
||||
let ind = arr.findIndex(e => e[0] === obj.tabtype);
|
||||
return ind
|
||||
},
|
||||
setTab(ind) {
|
||||
this.tabrollxoff = ind;
|
||||
this.tabind = ind
|
||||
t = document.getElementById(this.cardid + ind);
|
||||
this.markerL = t.offsetLeft + "px"
|
||||
this.markerW = t.offsetWidth + "px"
|
||||
console.log(this.markerL)
|
||||
},
|
||||
getTabLogo(obj) {
|
||||
switch(obj.tabtype) {
|
||||
case "menu":
|
||||
return "byl-icon-restaurant"
|
||||
// code block
|
||||
break;
|
||||
case "time":
|
||||
return "byl-icon-clock"
|
||||
// code block
|
||||
break;
|
||||
default:
|
||||
// code block
|
||||
}
|
||||
},
|
||||
showCard() {
|
||||
this.displayCard = "block";
|
||||
this.setTab(0)
|
||||
console.log("showing card")
|
||||
this.cardTop = "0vh"
|
||||
this.setTab(0)
|
||||
this.setTab(0)
|
||||
this.setTab(0)
|
||||
},
|
||||
hideCard() {
|
||||
this.cardTop = "110vh"
|
||||
},
|
||||
donothing () {
|
||||
|
||||
},
|
||||
toggleActive () {
|
||||
this.isActive = !this.isActive
|
||||
document.getElementById(this.list.id).scrollIntoView(
|
||||
{
|
||||
behavior: "smooth",
|
||||
block: "end",
|
||||
inline: "nearest"}
|
||||
);
|
||||
document.getElementById(this.list.id).scrollIntoView();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -85,9 +322,22 @@ let vm = new Vue({
|
|||
data: {
|
||||
currentLang: 'fr',
|
||||
fdata: {},
|
||||
db : {},
|
||||
db2 : {
|
||||
restaurants : {
|
||||
db : {
|
||||
parking : {
|
||||
id : "parking",
|
||||
type : "list",
|
||||
nameFR : "Parking",
|
||||
nameEN : "Car park",
|
||||
nameIT : "Parcheggio",
|
||||
sub : {
|
||||
lamy : {
|
||||
id: "lamy",
|
||||
type: "item",
|
||||
name: "Parking Lamy"
|
||||
}
|
||||
}
|
||||
},
|
||||
resto : {
|
||||
id : "resto",
|
||||
type : "list",
|
||||
nameFR : "Restaurant",
|
||||
|
|
@ -112,6 +362,7 @@ let vm = new Vue({
|
|||
card : {
|
||||
tabs : {
|
||||
menu : {
|
||||
tabtype : "menu",
|
||||
priceRange : "18-32€",
|
||||
dishes : {
|
||||
divola : {
|
||||
|
|
@ -123,9 +374,14 @@ let vm = new Vue({
|
|||
}
|
||||
},
|
||||
time : {
|
||||
monAM : "11h30-14h00",
|
||||
monPM : "18h30-22h00",
|
||||
|
||||
tabtype : "time",
|
||||
mon : "11h30-14h00 18h30-22h00",
|
||||
tue : "11h30-14h00 18h30-22h00",
|
||||
wed : "11h30-14h00 18h30-22h00",
|
||||
thu : "11h30-14h00 18h30-22h00",
|
||||
fri : "11h30-14h00 18h30-22h00",
|
||||
sat : "11h30-14h00 18h30-22h00",
|
||||
sun : "",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -185,11 +441,6 @@ let vm = new Vue({
|
|||
langElms[i].style.display = 'revert';
|
||||
}
|
||||
},
|
||||
async getJDB(){
|
||||
const res = await fetch(dburl);
|
||||
const data = await res.json();
|
||||
this.db = data;
|
||||
},
|
||||
setlang: function (lang) {
|
||||
target = document.querySelector("#"+"tab-"+lang);
|
||||
marker = document.querySelector("#lang-marker");
|
||||
|
|
@ -199,13 +450,6 @@ let vm = new Vue({
|
|||
},
|
||||
},
|
||||
created: function(){
|
||||
console.log("about to call getJDB")
|
||||
// this.getJDB();
|
||||
fetch(dburl)
|
||||
.then(res => res.json())
|
||||
.then(data => this.db = data)
|
||||
.catch(err => console.log(err.message))
|
||||
console.log("after getJDB call")
|
||||
this.setlang('fr');
|
||||
},
|
||||
mounted: function() {
|
||||
|
|
@ -213,9 +457,15 @@ let vm = new Vue({
|
|||
this.setlang('fr');
|
||||
console.log("mounted");
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
},
|
||||
updated: function() {
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
this.setlang('fr');
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -28,7 +28,9 @@
|
|||
<main>
|
||||
<div id="list">
|
||||
|
||||
<Accordeon v-bind:list="db.db.restaurants"></Accordeon>
|
||||
<Accordeon v-bind:list="db.parking"></Accordeon>
|
||||
<div class="sep"></div>
|
||||
<Accordeon v-bind:list="db.resto"></Accordeon>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -40,6 +42,9 @@
|
|||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
<script src="asset/js/vue.min.js"></script>
|
||||
<script src="asset/leaflet/leaflet.js"></script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue