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

edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar

Browse Source
This commit is contained in:
Vega
2026-03-23 09:05:45 +01:00
parent 7ccede8b51
commit e399584e4b
14 changed files with 307 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/public/DATA/peopleData.json
+19 -2
View File
@@ -1,25 +1,31 @@
[
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Artistes DRAGs",
"description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
"children": [
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria",
"description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
"children": [
{
"type": "image",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria003.star",
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
"src":"./DATA/Images/ura-bleu.png"
"src":"./DATA/Images/ura-bleu.png",
"like": 0,
"isLiked": false
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria.loveMsg",
"description": "Coucou !"
@@ -28,6 +34,7 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria.loveMsg",
"description": "Coucou !"
@@ -36,18 +43,21 @@
},
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Artistes NERDs",
"description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
"children": [
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Théo",
"description": "Theo est un musicien qui construit des synthés modulaires",
"children": [
{
"type": "link",
"date": "33/33",
"isSelected": false,
"caption": "Theo.web",
"description": "Réseaux de Theo",
@@ -64,6 +74,7 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "Theo.loveMsg",
"description": "Hello !"
@@ -74,12 +85,14 @@
},
{
"type": "folder",
"date": "33/33",
"isSelected": false,
"caption": "Autres",
"description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
"children": [
{
"type": "link",
"date": "33/33",
"isSelected": false,
"caption": "Background.web",
"description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
@@ -92,16 +105,20 @@
},
{
"type": "text",
"date": "33/33",
"isSelected": false,
"caption": "DNN.loveMsg",
"description": "Hello again!"
},
{
"type": "image",
"date": "33/33",
"isSelected": false,
"caption": "Urazoria003.star",
"description": "Urazoria dans son show à XXXX pour XXXX en 2025",
"src":"./DATA/Images/ura-vert.png"
"src":"./DATA/Images/ura-vert.png",
"like": 0,
"isLiked": false
}
]
}
v1-com-officielle/src/assets/icons/2extra.svg
+45
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

v1-com-officielle/src/assets/icons/2graff.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

v1-com-officielle/src/assets/style.css
+41 -4
View File
@@ -38,11 +38,11 @@
/*===================Animation*/
@keyframes blink {
0% { color: var(--accent-color);}
15% { color: var(--main-color);}
35% { color: var(--main-color);}
15% { color: var(--back-color);}
35% { color: var(--back-color);}
50% { color: var(--accent-color);}
65% { color: var(--main-color);}
85% { color: var(--main-color);}
65% { color: var(--back-color);}
85% { color: var(--back-color);}
100% { color: var(--accent-color);}
}
@@ -89,6 +89,7 @@ a button{
}
p{
pointer-events: none;
cursor: inherit;
}
@@ -222,6 +223,42 @@ canvas {
font-size: 16.1px;
}
}
/*==================Reaction Bar for indi pannels*/
.reactBar{
margin-left: -16.1%;
width: 77%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
color: var(--main-color);
padding: 0;
}
.reactBar .reactStatStyle{
text-align: center;
width: 33px;
padding-right: 0;
}
.reactBar .icon{
height: 16.1px;
width: auto;
margin-top: 0;
}
.reactBar .iconBtnStyle{
height: 33px;
width: 33px;
border-radius: 33px;
}
.reactBar .textBtnStyle{
height: 33px;
width: 130px;
}
.reactedStyle{
color: var(--accent-color);
}
/*==============Window*/
.windowStyle{
v1-com-officielle/src/dataExchange.js
+3 -1
View File
@@ -15,7 +15,9 @@ export const dataStorage = reactive({
},
selectedImg: {
src: "",
caption: ""
caption: "",
like: 0,
isLiked: false
},
selectedLink:{
linksData: [],
v1-com-officielle/src/indieComponents/ArtistPannel.vue
+110 -17
View File
@@ -34,13 +34,21 @@
</div>
<div class="windowContent" id="artistContent">
<p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
<div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
</div>
</div>
<div v-show="displayedItems" class="itemDesc" @touchstart.stop>
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
<p class="itemCaption">*auteurice*</p>
<p class="itemCaption">{{item.date}}</p>
</div>
</div>
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
<p>{{displayedDescription}}</p>
</div>
</div>
@@ -110,6 +118,7 @@
font-size: 16.1px;
}
/*=================GRID DISPLAY*/
.theMatrix{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -158,7 +167,7 @@
border-style: solid;
border-width: thin;
border-color: transparent;
cursor: pointer;
cursor: cell;
}
.itemStyle:hover{
@@ -187,8 +196,7 @@
}
.selectedItemStyle .icon{
height:auto;
width:50%;
fill: currentColor;
width: 50%;
}
.itemCaption{
@@ -222,6 +230,65 @@
grid-auto-rows: 180px;
}
}
/*======================LIST DISPLAY*/
.nevrEndingList{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 95%;
height: 66%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 7.77px;
}
.listItemStyle{
width:100%;
height: 33px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 7.77px;
margin-left: 1.61px;
cursor: cell;
border-style: solid;
border-width: thin;
border-color: transparent;
border-radius: 16.1px;
}
.listItemStyle:hover{
border-color: var(--main-color);
}
.listItemStyle .icon{
height: 16.1px;
width: 33px;
margin-left: 16.1px;
margin-right: 16.1px;
margin-top: 0;
}
.listItemStyle .itemCaption{
font-family: 'velvelyne';
font-weight: bold;
font-size: 16.1px;
pointer-events: none;
cursor:inherit;
width: 30%;
height: 100%;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
padding-top: 1.61px;
user-select: none;
}
</style>
<script>
@@ -242,9 +309,12 @@
displayedItems: null,
rootFolderContent: [],
emptyFolder: false,
gridDisplay: true,
listDisplay: false,
displayedDescription: "",
fileName: "",
isNotRoot : false
isNotRoot : false,
rootDepth: 0
}
},
emits: ['close','focus','openImg','openLink'],
@@ -257,27 +327,45 @@
console.log(this.displayedItems);
this.isNotRoot = false;
this.checkEmptyFolder();
this.deselectAll();
this.fileName = "./";
if(!this.emptyFolder){
this.gridDisplay = true;
this.listDisplay = false;
};
},
deselectAll(){
this.displayedItems.forEach(it => {
it.isSelected = false;
});
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
this.fileName = "./";
if(!this.isNotRoot){
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
}else{
this.displayedDescription = this.rootFolderContent.at(-1).description;
}
},
openFile(e){
this.$emit('focus');
if(e.type === 'folder'){
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
this.rootDepth = this.rootFolderContent.length;
this.displayedItems = [...e.children];
this.checkEmptyFolder();
this.isNotRoot = true;
this.displayedDescription = e.description
this.fileName += e.caption + '/';
if (e.caption === 'Autres'){
this.gridDisplay = false;
this.listDisplay = true;
}
}
if(e.type === 'image'){
this.$emit('openImg');
dataStorage.selectedImg = {
src: e.src,
caption: e.caption
caption: e.caption,
like: e.like,
isLiked: e.isLiked
}
this.displayedDescription = e.description;
}
@@ -322,22 +410,27 @@
checkEmptyFolder(){
if (this.displayedItems.length === 0){
this.emptyFolder = true;
this.gridDisplay = false;
this.listDisplay = false;
this.displayedItems = null;
}else{
this.emptyFolder = false;
}
},
backToRoot(){
let rootDepth = this.rootFolderContent.length-1;
this.displayedItems = this.rootFolderContent[rootDepth].content;
this.fileName = this.rootFolderContent[rootDepth].directory;
this.displayedDescription = this.rootFolderContent[rootDepth].description;
this.rootFolderContent.splice(rootDepth,1);
rootDepth = this.rootFolderContent.length
if (rootDepth === 0){
this.displayedItems = this.rootFolderContent.at(-1).content;
this.fileName = this.rootFolderContent.at(-1).directory;
this.displayedDescription = this.rootFolderContent.at(-1).description;
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
this.rootDepth = this.rootFolderContent.length
if (this.rootDepth === 0){
this.isNotRoot = false;
}
this.checkEmptyFolder();
if(this.listDisplay){
this.listDisplay = false;
this.gridDisplay = true;
}
},
closeClicked(){
this.dataFirstLoad();
v1-com-officielle/src/indieComponents/Infobulle.vue
+1 -1
View File
@@ -33,7 +33,7 @@
width: 100%;
height: 100%;
color: var(--back-color);
border-color: var(--main-color);
border-color: var(--back-color);
border-style: solid;
border-width: thin;
font-family: 'velvelyne';
v1-com-officielle/src/indieComponents/MessagePannel.vue
+1 -37
View File
@@ -22,7 +22,7 @@
</button>
</div>
<div class="windowContent">
<div class="msgReact">
<div class="reactBar">
<p class="reactStatStyle">{{selectedMsg.like}}</p>
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
<CloseIcon name="test" class="icon"/>
@@ -65,38 +65,6 @@
}
}
.windowContent .msgReact{
margin-left: -16.1%;
width: 77%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
color: var(--main-color);
padding: 0;
}
.windowContent .reactStatStyle{
text-align: center;
width: 33px;
padding-right: 0;
}
.windowContent .icon{
height: 16.1px;
width: auto;
margin-top: 0;
}
.windowContent .iconBtnStyle{
height: 33px;
width: 33px;
border-radius: 33px;
}
.windowContent .textBtnStyle{
height: 33px;
width: 130px;
}
#selectedMsgText{
white-space: pre-line;
font-size: 16.1px;
@@ -109,10 +77,6 @@
height: 77%;
overflow-y: scroll;
}
.reactedStyle{
color: var(--accent-color);
}
</style>
<script>
v1-com-officielle/src/indieComponents/VisualizerPannel.vue
+11 -1
View File
@@ -22,6 +22,12 @@
<div class="windowContent" id="visualizerContent">
<img :src="selectedImg.src" id="displayedImgStyle">
</div>
<div class="reactBar">
<p class="reactStatStyle">{{selectedImg.like}}</p>
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedImg.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
<CloseIcon name="test" class="icon"/>
</button>
</div>
</div>
</template>
@@ -45,7 +51,7 @@
height: auto;
top: 500px;
left: 16.1px;
border-radius: 16.1px 16.1px 0 0;
border-radius: 16.1px;
}
#displayedImgStyle{
@@ -87,6 +93,10 @@
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
likeImg(){
this.selectedImg.isLiked = !this.selectedImg.isLiked;
console.log(this.selectedImg);
}
},
mounted(){
v1-com-officielle/src/infoComponents/InboxContent.vue
+1
View File
@@ -107,6 +107,7 @@
border-radius: 0;
font-family: 'velvelyne';
font-weight: bold;
cursor: cell;
}
.selectedStyle{
v1-com-officielle/src/infoComponents/InfoMenu.vue
+2 -2
View File
@@ -17,9 +17,9 @@
<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')" data-tooltip="newsletter">
<!--<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')" data-tooltip="newsletter">
<CloseIcon name="test" class="icon"/>
</button>
</button>-->
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')" data-tooltip="instagram">
<CloseIcon name="test" class="icon"/>
</button>
v1-com-officielle/src/titleComponents/ColorBtn.vue
+1 -1
View File
@@ -111,7 +111,7 @@
left: 4.44px;
width: 50px;
height: 161px;
top: 38%;
top: 28%;
}
}
</style>
v1-com-officielle/src/titleComponents/GeneratedContent.vue
+3 -3
View File
@@ -9,7 +9,7 @@
left: item.x + 'px',
top: item.y + 'px'
}">
<img :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
<img loading="lazy" :src="item.src" class="imgStyle" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" :id="'image'+item.id">
</div>
</div>
@@ -47,7 +47,7 @@
width: 44px;
height: 44px;
border-radius: 22px;
top: 50%;
top: 47%;
left: 7.77px;
animation: float 1.61s infinite;
}
@@ -121,7 +121,7 @@
}
#reloadBtnStyle{
top: 59%;
top: 49%;
left: 44.4px;
width: 77px;
height: 77px;
v1-com-officielle/src/titleComponents/TitleText.vue
+60 -5
View File
@@ -1,3 +1,8 @@
<script setup>
import TwoGraff from '../assets/icons/2graff.svg'
import TwoExtra from '../assets/icons/2extra.svg'
</script>
<template>
<div id="titleTextContainer" class="uiStyle">
<div id="mainTitleContainer">
@@ -8,8 +13,9 @@
<div class="titleTextStyle" id="nerd">
<p><strong>NERDs</strong></p>
<p>#</p>
<p id="numberTwo"></p>
</div>
<TwoGraff name="graffTwo" class="numberTwo" id="graffTwo"/>
<TwoExtra name="extraTwo" class="numberTwo" id="extraTwo"/>
<div class="subtitleTextStyle">
<p id="subAccent">Drag shows + musique électronique,<br>synthés vidéos et autre performances nerds</p>
</div>
@@ -47,10 +53,58 @@
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:500px){}
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1000px){}
@media(min-width:1300px){}
*/
.numberTwo{
fill: currentColor;
position: absolute;
z-index: 1;
}
#graffTwo{
height: 161px;
width: auto;
margin-left: 285px;
margin-top: -99px;
color: var(--main-color);
}
#extraTwo{
height: 144px;
width: auto;
margin-left: 285px;
margin-top: -99px;
animation: blink 3.33s infinite;
mix-blend-mode: difference;
}
/*================ PC HAUT/IPAD*/
@media(min-width:650px){
#graffTwo{
height: 200px;
margin-left: 500px;
margin-top: -110px;
}
#extraTwo{
height: 161px;
margin-left: 500px;
margin-top: -100px;
}
}
/*================ PC LARGE*/
@media(min-width:900px){
#graffTwo{
height: 333px;
margin-left: 633px;
margin-top: -233px;
}
#extraTwo{
height: 277px;
margin-left: 640px;
margin-top: -233px;
}
}
#titleTextContainer{
width:99.8%;
@@ -84,7 +138,7 @@
z-index: 1;
}
.titleTextStyle p{
color: (--main-color);
color: var(--main-color);
}
#drag{
margin-top: -100px;
@@ -199,7 +253,7 @@
padding-bottom: 16.1px;
padding-left: 33px;
font-size: 33px;
color: (--main-color);
color: var(--main-color);
}
#drag{
margin-top: -150px;
@@ -209,6 +263,7 @@
margin-top: -75px;
margin-left: -75px;
justify-content: space-between;
margin-right: 161px;
}
.titleTextStyle strong{
font-size: 77px;