vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: ajout des panneaux donations et tickets

Browse Source
This commit is contained in:
Vega
2026-04-04 04:14:10 +02:00
parent 7c6e33d624
commit c94b22444a
5 changed files with 296 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/src/indieComponents/DonationPannel.vue
+118
View File
@@ -0,0 +1,118 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="donationPannel" class="windowStyle" ref="donationPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Nous faire une donation:
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<p>Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
<div id="linkRow">
<a href="#" class="textBtnStyle">Lydia</a>
<a href="#" class="textBtnStyle">Paypal</a>
<a href="#" class="textBtnStyle">SumUp</a>
</div>
</div>
</div>
</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:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#donationPannel{
position: fixed;
width: 333px;
height: auto;
top: 366px;
left: 66px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
#donationPannel .windowContent p{
width: 90%;
text-align: left;
margin-bottom: 16.1px;
font-family: 'velvelyne';
font-size: 16.1px;
color: var(--main-color);
font-weight: bold;
line-height: 1.2em;
}
#linkRow{
width:100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
#linkRow .textBtnStyle{
width: 27%;
height: 50px;
margin-bottom: 16.1px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#donationPannel{
left:366px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'DonationPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.donationPannel;
console.log("Donation pannel is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/GraffOverlay.vue
+1 -1
View File
@@ -63,7 +63,7 @@
}
#TsContainer{
top: -161%;
top: -155%;
left: 131.2px;
}
#graffTs{
v1-com-officielle/src/indieComponents/TicketPannel.vue
+136
View File
@@ -0,0 +1,136 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="ticketPannel" class="windowStyle" ref="ticketPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Réserver une place
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<p>
Afin de pouvoir estimer le nombre
<br>
de participation, nous avons mis en place
<br>
un système de <strong>"prévente à prix libre"</strong>
<br>
<br>
Lors de la réservation, tu indiques
<br>
une intention de don le jour même,
<br>
c'est-à-dire la somme que tu penses
<br>
pouvoir donner le jour J.
<br>
<br>
Cette réservation ne t'engage
<br>
<strong>à rien en terme de paiement,</strong>
<br>
et tu pourras toujours revenir sur le montant indiqué, lors de l'évènement.
<br>
<br>
De notre coté, on s'engage à te garder une place <strong>jusqu'au début des shows,</strong>
<br>
si jamais la jauge est atteinte.
</p>
<a href="#" class="textBtnStyle">Je veux une place !</a>
</div>
</div>
</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:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#ticketPannel{
position: fixed;
width: 333px;
height: auto;
top: 200px;
left: 33px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
#ticketPannel .windowContent p{
width: 90%;
text-align: left;
margin-bottom: 16.1px;
font-family: 'velvelyne';
font-size: 16.1px;
color: var(--main-color);
font-weight: bold;
line-height: 1.2em;
}
#ticketPannel .windowContent p strong{
font-family: 'lineal';
font-weight: normal;
}
#ticketPannel .textBtnStyle{
width: 77%;
height: 50px;
margin-bottom: 16.1px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#ticketPannel{
left:399px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'DonationPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.ticketPannel;
console.log("Donation pannel is loaded!");
}
};
</script>
v1-com-officielle/src/infoComponents/InfoMenu.vue
+37
View File
@@ -42,6 +42,8 @@
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')">NOUS FAIRE UNE DONATION</button>
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')">RÉSERVER MA PLACE!</button>
</div>
<div id="btnColumn">
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
@@ -110,6 +112,18 @@
@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>
@@ -194,6 +208,23 @@
#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*/
@@ -225,6 +256,12 @@
font-size: 22.2px;
}
#ticketButton.textBtnStyle{
top: unset;
bottom: -85%;
left: -300px;
}
}
</style>
v1-com-officielle/src/main.js
+4
View File
@@ -23,6 +23,8 @@ import MessagePannel from './indieComponents/MessagePannel.vue'
import FollowPannel from './indieComponents/FollowPannel.vue'
import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
import LinkPannel from './indieComponents/LinkPannel.vue'
import DonationPannel from './indieComponents/DonationPannel.vue'
import TicketPannel from './indieComponents/TicketPannel.vue'
import Infobubble from './indieComponents/Infobulle.vue'
@@ -50,6 +52,8 @@ app.component('MessagePan', MessagePannel);
app.component('FollowPan', FollowPannel);
app.component('VisualizerPan', VisualizerPannel);
app.component('LinkPan', LinkPannel);
app.component('DonationPan', DonationPannel);
app.component('TicketPan', TicketPannel);
app.component('Infobulle', Infobubble);
app.component('ColorPan', ColorBtn);