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

edit: infobulle sur pc

Browse Source
This commit is contained in:
Vega
2026-03-22 04:14:40 +01:00
parent 9982670841
commit 460f7f637d
17 changed files with 170 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/src/App.vue
+1
View File
@@ -1,5 +1,6 @@
<template>
<div id="mainContainer">
<Infobulle></Infobulle>
<TitleDiv></TitleDiv>
<InfoDiv></InfoDiv>
</div>
v1-com-officielle/src/assets/style.css
+31 -1
View File
@@ -35,6 +35,35 @@
font-weight: bold;
}
/*===================Animation*/
@keyframes blink {
0% { color: var(--accent-color);}
15% { color: var(--main-color);}
35% { color: var(--main-color);}
50% { color: var(--accent-color);}
65% { color: var(--main-color);}
85% { color: var(--main-color);}
100% { color: var(--accent-color);}
}
@keyframes blinkBack {
0% { background-color: var(--accent-color);}
15% { background-color: var(--main-color);}
35% { background-color: var(--main-color);}
50% { background-color: var(--accent-color);}
65% { background-color: var(--main-color);}
85% { background-color: var(--main-color);}
100% { background-color: var(--accent-color);}
}
@keyframes float {
0% { transform: translateY(0px); }
35% { transform: translateY(1px); }
50% { transform: translateY(-10px); }
65% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
/*=============Désact défault*/
input {
-webkit-appearance: none !important;
@@ -137,6 +166,7 @@ canvas {
width: 16.1px;
height: auto;
fill: currentColor;
pointer-events: none;
}
.iconBtnStyle{
@@ -202,7 +232,7 @@ canvas {
}
.zFocus{
z-index: 333;
z-index: 1312;
border-color: var(--accent-color);
border-width: thick;
}
v1-com-officielle/src/components/InfoContent.vue
+1
View File
@@ -41,6 +41,7 @@
<script>
export default {
name : 'InfoContent',
emits:['hideBubble'],
mounted(){
console.log("Info content is loaded!");
}
v1-com-officielle/src/indieComponents/ArtistPannel.vue
+2 -2
View File
@@ -24,10 +24,10 @@
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<div class="dblBtnContainer">
<button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot">
<button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot" data-tooltip="retour">
<BackIcon name="backwoods" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/ContactPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
Contacter l'orga :
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/FollowPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
Nous Suivre Hors des Réseaux !
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/Infobulle.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<div id="infoBulleContainer" :style="{top: posY + 'px', left: posX + 'px'}">
<div v-show="isActive">{{bubbleContent}}</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:500px){}
================ PC LARGE
@media(min-width:1000px){}
*/
#infoBulleContainer{
width:161px;
position:fixed;
height:20px;
background-color: transparent;
z-index: 333;
pointer-events: none;
}
#infoBulleContainer div{
visibility: hidden;
text-align: center;
width: 100%;
height: 100%;
color: var(--back-color);
border-color: var(--main-color);
border-style: solid;
border-width: thin;
font-family: 'velvelyne';
font-weight: bold;
font-size: 10px;
line-height: 0.5em;
padding: 0;
margin: 0;
border-radius: 33px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
animation: blinkBack 1.61s infinite;
pointer-events: none;
}
/*================ PC LARGE*/
@media(min-width:800px){
#infoBulleContainer div{
visibility: visible;
font-size: 13.12px;
}
}
</style>
<script>
export default {
name : 'Infobulle',
data(){
return{
isActive: false,
posX: 0,
posY: 0,
bubbleContent:""
}
},
methods:{
loadBubble(event){
let item = event.target
if (!item.dataset.tooltip) {
this.hideBubble();
return
}
this.bubbleContent = item.dataset.tooltip;
this.posX = event.clientX - 200;
this.posY = event.clientY + 20;
this.isActive = true;
},
hideBubble(){
this.isActive = false
}
},
mounted(){
document.addEventListener('mousemove', this.loadBubble);
document.addEventListener('hideBubble', this.hideBubble);
console.log("Info-bubble is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/InstaPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
ATTENTION!
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/LinkPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
{{selectedLink.caption}}
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/MessagePannel.vue
+1 -1
View File
@@ -17,7 +17,7 @@
{{selectedMsg.title}}
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="closeMsg" @click="closeMsg">
<button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="closeMsg" @click="closeMsg" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/NewsletterPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
Newsletter
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/indieComponents/VisualizerPannel.vue
+1 -1
View File
@@ -15,7 +15,7 @@
{{selectedImg.caption}}
</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')">
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
<CloseIcon name="close" class="icon"/>
</button>
</div>
v1-com-officielle/src/infoComponents/InboxContent.vue
+5 -1
View File
@@ -9,7 +9,7 @@
<div id="inboxTitle">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
</div>
<div id="msgNumberStyle">
<div id="msgNumberStyle" data-tooltip="message.s non lu.s">
<p>{{msgNumber}}</p>
</div>
</div>
@@ -78,6 +78,10 @@
padding-right: 44px;
}
#msgNumberStyle p{
pointer-events: none;
}
#inboxList{
width:100%;
height: 75%;
v1-com-officielle/src/infoComponents/InfoMenu.vue
+5 -5
View File
@@ -14,21 +14,21 @@
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
</div>
<div id="btnColumn">
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')">
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')" data-tooltip="à propos de nous">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')">
<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')">
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')">
<button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')" data-tooltip="nous contacter">
<CloseIcon name="test" class="icon"/>
</button>
</div>
</div>
<!--'msg' 'insta' 'news' 'contact' 'artist'-->
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
<InboxDiv @open="openPannel('msg')"></InboxDiv>
<ArtistPan
v-show="isActive.includes('artist')"
v1-com-officielle/src/main.js
+3
View File
@@ -23,6 +23,7 @@ import FollowPannel from './indieComponents/FollowPannel.vue'
import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
import LinkPannel from './indieComponents/LinkPannel.vue'
import Infobubble from './indieComponents/Infobulle.vue'
// création app racine
const app = createApp(App);
@@ -47,6 +48,8 @@ app.component('FollowPan', FollowPannel);
app.component('VisualizerPan', VisualizerPannel);
app.component('LinkPan', LinkPannel);
app.component('Infobulle', Infobubble);
//Montage dans div#app de index.html
app.mount('#app');
v1-com-officielle/src/titleComponents/MusicPlayer.vue
+3 -3
View File
@@ -8,13 +8,13 @@
<div id="playerCreditStyle">
<p>{{audioCredits}}</p>
</div>
<button type="button" class="iconBtnStyle" @click="prevTrack">
<button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
<CloseIcon name="prev" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="toggleAudio">
<button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
<CloseIcon name="toggle" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" @click="nextTrack">
<button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
<CloseIcon name="next" class="icon"/>
</button>
</div>
v1-com-officielle/src/titleComponents/TitleText.vue
+14 -3
View File
@@ -11,13 +11,19 @@
<p id="numberTwo"></p>
</div>
<div class="subtitleTextStyle">
<p>Drag shows, musique électronique, synthés vidéos et autre performances nerds</p>
<p id="subAccent">Drag shows + musique électronique, synthés vidéos<br>et autre performances nerds</p>
</div>
<div id="infoContainer">
<div class="subtitleTextStyle">
<time datetime="2026-05-22" id="timeInfo">
<time datetime="2026-05-22T16:00" id="timeInfo">
<p><strong>22 Mai</strong></p>
<p>2026</p>
<p>
<br>
&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;16h00
<br>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; - 01h00
</p>
</time>
</div>
<div id="placeInfo" class="subtitleTextStyle">
@@ -48,7 +54,7 @@
*/
#titleTextContainer{
width:100%;
width:99.8%;
height:24%;
}
@@ -108,6 +114,11 @@
padding: 0;
margin-left: 16.1px;
margin-right: 16.1px;
line-height: 1.117em;
}
#subAccent{
font-family: 'lineal';
font-weight: normal;
}
#infoContainer{