cards improvement
This commit is contained in:
parent
49c6449fe5
commit
d195f3eea8
|
|
@ -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-weight: 600;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
background-color: var(--b9h-color-fg);
|
||||
color: var(--b9h-color-bg);
|
||||
font-size: 35px;
|
||||
/*background-color: var(--b9h-color-fg);*/
|
||||
color: var(--b9h-color-fg);
|
||||
}
|
||||
|
||||
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;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
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 {
|
||||
|
|
@ -348,3 +348,30 @@ 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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
|
|
@ -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.",
|
||||
txtEN: "Underground public parking, located 3 minutes walk from the hotel.",
|
||||
txtIT: "Parcheggio pubblico sotterraneo, situato a 3 minuti a piedi dall'hotel.",
|
||||
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. Maximum height: 1,9 m.",
|
||||
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",
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,36 +2,92 @@ Vue.component('Info',{
|
|||
template : `
|
||||
<div class="tabinfocontent">
|
||||
|
||||
<section>
|
||||
<a href="">
|
||||
<span class="byl-icon-link"></span>
|
||||
<span></span>
|
||||
<section class="infoline" v-if="this.obj.hasOwnProperty('site')">
|
||||
<a v-bind:href="this.obj.site" target="_blank">
|
||||
<span class="byl-icon-link infotags"></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",
|
||||
et : {
|
||||
fr : " et ",
|
||||
en : " and ",
|
||||
it : " e ",
|
||||
siteoff : {
|
||||
fr : "Site officiel",
|
||||
en : "Official website",
|
||||
it : "Sito ufficiale",
|
||||
},
|
||||
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)",
|
||||
handi : {
|
||||
fr : "Accessible en fauteuil roulant",
|
||||
en : "Wheelchair accessible",
|
||||
it : "Accessibile con sedia a rotelle",
|
||||
},
|
||||
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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue