313 lines
8.8 KiB
Vue
313 lines
8.8 KiB
Vue
<script setup>
|
|
import PeopleIcon from '../assets/icons/people.svg'
|
|
import InstaIcon from '../assets/icons/insta.svg'
|
|
import ContactIcon from '../assets/icons/contact.svg'
|
|
</script>
|
|
|
|
<template>
|
|
<div id="infoMenuContainer" class="uiStyle">
|
|
<div id="welcomeTextContainer">
|
|
<p id="welcomeText">
|
|
À tou󴟐s les queers, tou󴟐s les nerds,
|
|
<br>
|
|
et tou󴟐s les personnes entres les deux,
|
|
<br>
|
|
<br>
|
|
Vous êtes convi󱤠s à la 2ème édition
|
|
<br>
|
|
de <strong>Drags and Nerds !</strong>
|
|
<br>
|
|
Au programme, drags shows & performances nerds,
|
|
<br>
|
|
musique électronique, vjing, live-coding, synthés vidéos, etc.
|
|
<br>
|
|
<br>
|
|
Nous voulons également<br>centrer notre soirée
|
|
autour de l'inclusivité.<br>Pour ce faire,
|
|
le port du<br><strong>masque FFP2 sera<br>obligatoire à l'intérieur</strong>,
|
|
<br>
|
|
afin de protéger les plus vulnérables d'entres nous.
|
|
<br>
|
|
Les masques seront distribués gratuitement à l'entrée !
|
|
<br>
|
|
<br>
|
|
Également,<br>
|
|
afin de créer du lien entre nos commus,
|
|
plusieurs assos seront présentes, afin de partager et d'échanger nos valeurs et nos savoir-faires
|
|
<br>
|
|
<br>
|
|
Enfin,<br>
|
|
(pour les courageu󵞰s qui ont lu jusque là ^^),
|
|
notre collectif est très ouvert à s'agrandir et à se compléter, alors n'hésite pas à nous contacter,
|
|
si tu as envie de participer !
|
|
</p>
|
|
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
|
<button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
|
|
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
|
|
</div>
|
|
<div id="btnColumn">
|
|
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
|
|
<PeopleIcon name="people" class="icon"/>
|
|
</button>
|
|
<!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
|
|
<CloseIcon name="test" class="icon"/>
|
|
</button>-->
|
|
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
|
|
<InstaIcon name="insta" class="icon"/>
|
|
</button>
|
|
<button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
|
|
<ContactIcon name="contact" class="icon"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
|
|
<InboxDiv @open="openPannel('msg')"></InboxDiv>
|
|
<ArtistPan
|
|
v-show="isActive.includes('artist')"
|
|
@openImg = "openPannel('visual')"
|
|
@openLink = "openPannel('link')"
|
|
@close="closePannel('artist')"
|
|
@focus="focusPannel('artist')"
|
|
:class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
|
|
</ArtistPan>
|
|
<NewsPan
|
|
v-show="isActive.includes('news')"
|
|
@close="closePannel('news')"
|
|
@focus="focusPannel('news')"
|
|
:class="{zBase: isFocused!=='news', zFocus: isFocused==='news'}">
|
|
</NewsPan>
|
|
<ContactPan
|
|
v-show="isActive.includes('contact')"
|
|
@close="closePannel('contact')"
|
|
@focus="focusPannel('contact')"
|
|
:class="{zBase: isFocused!=='contact', zFocus: isFocused==='contact'}">
|
|
</ContactPan>
|
|
<InstaPan
|
|
v-show="isActive.includes('insta')"
|
|
@close="closePannel('insta')"
|
|
@focus="focusPannel('insta')"
|
|
:class="{zBase: isFocused!=='insta', zFocus: isFocused==='insta'}">
|
|
</InstaPan>
|
|
<MessagePan
|
|
v-show="isActive.includes('msg')"
|
|
@close="closePannel('msg')"
|
|
@focus="focusPannel('msg')"
|
|
:class="{zBase: isFocused!=='msg', zFocus: isFocused==='msg'}">
|
|
</MessagePan>
|
|
<FollowPan
|
|
v-show="isActive.includes('follow')"
|
|
@close="closePannel('follow')"
|
|
@focus="focusPannel('follow')"
|
|
:class="{zBase: isFocused!=='follow', zFocus: isFocused==='follow'}">
|
|
</FollowPan>
|
|
<VisualizerPan
|
|
v-show="isActive.includes('visual')"
|
|
@close="closePannel('visual')"
|
|
@focus="focusPannel('visual')"
|
|
:class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
|
|
</VisualizerPan>
|
|
<LinkPan
|
|
v-show="isActive.includes('link')"
|
|
@close="closePannel('link')"
|
|
@focus="focusPannel('link')"
|
|
:class="{zBase: isFocused!=='link', zFocus: isFocused==='link'}">
|
|
</LinkPan>
|
|
<DonationPan
|
|
v-show="isActive.includes('donation')"
|
|
@close="closePannel('donation')"
|
|
@focus="focusPannel('donation')"
|
|
:class="{zBase: isFocused!=='donation', zFocus: isFocused==='donation'}">
|
|
</DonationPan>
|
|
<TicketPan
|
|
v-show="isActive.includes('ticket')"
|
|
@close="closePannel('ticket')"
|
|
@focus="focusPannel('ticket')"
|
|
:class="{zBase: isFocused!=='ticket', zFocus: isFocused==='ticket'}">
|
|
</TicketPan>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/*================= Mise en page:
|
|
=> Mobile First : par défaut, moins de 500px
|
|
=> Tablette et PC format haut : de 500 à 1000px
|
|
=> PC large : à partir de 1000px
|
|
*/
|
|
|
|
/*+++++++++++++++++ COPYBOX
|
|
================ PC HAUT/IPAD
|
|
@media(min-width:500px){}
|
|
================ PC LARGE
|
|
@media(min-width:1000px){}
|
|
*/
|
|
|
|
#infoMenuContainer{
|
|
width:100%;
|
|
position:relative;
|
|
height:55%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#btnColumn{
|
|
width:15%;
|
|
height:100%;
|
|
background-color: transparent;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
}
|
|
|
|
#btnColumn .iconBtnStyle{
|
|
width:100%;
|
|
height:20%;
|
|
margin-left: -13.12%;
|
|
margin-top: 19%;
|
|
}
|
|
|
|
#btnColumn .icon{
|
|
width: 50px;
|
|
}
|
|
|
|
#welcomeTextContainer{
|
|
width:77%;
|
|
height:90%;
|
|
background-color: transparent;
|
|
position: relative;
|
|
padding: 16.1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#welcomeText{
|
|
pointer-events: all;
|
|
height: 100%;
|
|
font-size: 16.1px;
|
|
font-family: 'velvelyne';
|
|
color: var(--main-color);
|
|
font-weight: bold;
|
|
padding-right: 16.1px;
|
|
margin-top: -7.77px;
|
|
overflow-y: scroll;
|
|
line-height: 1.1em
|
|
}
|
|
|
|
#welcomeText strong{
|
|
font-family: 'lineal';
|
|
font-weight: normal;
|
|
font-size: 22.2px;
|
|
animation: blink 7.77s infinite;
|
|
}
|
|
|
|
#welcomeTextContainer .textBtnStyle{
|
|
height:44.4px;
|
|
width: 70%;
|
|
margin-bottom: 7.77px;
|
|
}
|
|
|
|
#ticketButton.textBtnStyle{
|
|
position: absolute;
|
|
top: -80px;
|
|
left: 64%;
|
|
/*animation: float 1.61s infinite;*/
|
|
color: var(--main-color);
|
|
background-color: var(--accent-color);
|
|
width: 50%;
|
|
}
|
|
/*
|
|
#ticketButton.textBtnStyle:hover{
|
|
background-color: var(--main-color);
|
|
animation: none;
|
|
border-color: var(--accent-color);
|
|
color: var(--accent-color);
|
|
}
|
|
*/
|
|
|
|
/*================ MID FORMAT*/
|
|
@media(min-width:500px){
|
|
#welcomeText{
|
|
height:72%;
|
|
}
|
|
|
|
#btnColumn .iconBtnStyle{
|
|
height:20%;
|
|
margin-left: 0;
|
|
margin-top: 7.77%;
|
|
}
|
|
|
|
}
|
|
|
|
/*================ PC LARGE*/
|
|
@media(min-width:1300px){
|
|
#welcomeText{
|
|
height:80%;
|
|
}
|
|
|
|
#btnColumn .iconBtnStyle{
|
|
height:20%;
|
|
margin-left: -13.12%;
|
|
margin-top: 13.12%;
|
|
}
|
|
#welcomeText strong{
|
|
font-size: 22.2px;
|
|
}
|
|
|
|
#ticketButton.textBtnStyle{
|
|
top: unset;
|
|
bottom: -85%;
|
|
left: -300px;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
name : 'InfoMenu',
|
|
emits: ['closeInfo'],
|
|
data(){
|
|
return{
|
|
isActive: [],
|
|
isFocused: ""
|
|
}
|
|
},
|
|
methods:{
|
|
delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
},
|
|
async openPannel(name){
|
|
console.log(name);
|
|
if(!this.isActive.includes(name)){
|
|
this.isActive.push(name);
|
|
}
|
|
this.isFocused = name;
|
|
this.delay(33);
|
|
this.$emit('closeInfo');
|
|
},
|
|
focusPannel(name){
|
|
if(this.isActive.includes(name)){
|
|
this.isFocused = name;
|
|
}
|
|
},
|
|
closePannel(name){
|
|
const index = this.isActive.indexOf(name)
|
|
if(index !== -1){
|
|
this.isActive.splice(index,1);
|
|
}
|
|
if(this.isFocused === name){
|
|
this.isFocused = null;
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
console.log("Info menu is loaded!");
|
|
}
|
|
};
|
|
</script>
|