edit: position logo ts + correction z-index, filtrage par username, gamme colorée adaptée + changement du fond avec le thème
This commit is contained in:
@@ -1,3 +1,3 @@
|
||||
[
|
||||
"vega"
|
||||
"vga_nar6_ta"
|
||||
]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
[
|
||||
{
|
||||
"name": "vega",
|
||||
"name": "vga_nar6_ta",
|
||||
"folder": 2
|
||||
},
|
||||
{
|
||||
"name": "Drags and Nerds /",
|
||||
"name": "drags_nerds",
|
||||
"folder": 2
|
||||
}
|
||||
]
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
:root[data-theme="light"]{
|
||||
--back-color: white;
|
||||
--main-color: black;
|
||||
--accent-color: #C303FF;
|
||||
--accent-color: #FFA64D;
|
||||
--neon-color: black;
|
||||
}
|
||||
|
||||
@@ -134,6 +134,7 @@ html, body{
|
||||
#canvas video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ export async function loadAudioData() {
|
||||
if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
||||
|
||||
const pouets = await res.json();
|
||||
const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
|
||||
const filtered = pouets.filter(p => aData.some(user => p.account.username === user));
|
||||
//console.log(filtered);
|
||||
const files = {};
|
||||
for (const user of aData) {
|
||||
|
||||
@@ -27,7 +27,7 @@ export async function loadMsgData() {
|
||||
if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
||||
|
||||
const pouets = await res.json();
|
||||
const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
|
||||
const filtered = pouets.filter(p => p.account.username === 'drags_nerds_live');
|
||||
//console.log(filtered);
|
||||
|
||||
let msgContent = [];
|
||||
|
||||
@@ -56,8 +56,8 @@ function exceptionKey(user, content){
|
||||
let key = "";
|
||||
if (data.length > 1) key = data[1].split('<br>')[0];
|
||||
//console.log(key);
|
||||
if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="Drags and Nerds /") return true;
|
||||
if (user === "Drags and Nerds /"){
|
||||
if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
|
||||
if (user === "drags_nerds"){
|
||||
if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
|
||||
return true;
|
||||
}
|
||||
@@ -75,23 +75,24 @@ export async function loadPeopleData() {
|
||||
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
||||
|
||||
const pouets = await res.json();
|
||||
//console.log("POUETS :" , pouets);
|
||||
const filtered = pouets.filter(p => pData.some(user => p.account.display_name === user.name));
|
||||
//console.log("FILTERED :" , filtered);
|
||||
console.log("POUETS :" , pouets);
|
||||
const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name));
|
||||
console.log("FILTERED :" , filtered);
|
||||
const files = {};
|
||||
for (const user of pData) {
|
||||
files[user.name] = [];
|
||||
}
|
||||
const description = {};
|
||||
for (const user of pData){
|
||||
const pouet = filtered.find(p => p.account.display_name === user.name);
|
||||
const pouet = filtered.find(p => p.account.username === user.name);
|
||||
if (pouet){
|
||||
description[user.name] = pouet.account.note;
|
||||
}
|
||||
}
|
||||
|
||||
for (const pouet of filtered) {
|
||||
const username = pouet.account.display_name;
|
||||
const username = pouet.account.username;
|
||||
const displayName = pouet.account.display_name;
|
||||
let infos = idAndDate(pouet.created_at);
|
||||
let entry;
|
||||
//console.log(pouet);
|
||||
@@ -114,11 +115,11 @@ export async function loadPeopleData() {
|
||||
if (pouet.content.includes('http')) {
|
||||
let textInfos = titleAndContent(pouet.content);
|
||||
entry = {
|
||||
id: 'link' + username + infos.id,
|
||||
id: 'link' + displayName + infos.id,
|
||||
date: infos.date,
|
||||
dateInfo: pouet.created_at,
|
||||
type: "link",
|
||||
author: username,
|
||||
author: displayName,
|
||||
caption: textInfos.title + '.liens',
|
||||
links: textInfos.links,
|
||||
description: textInfos.content,
|
||||
@@ -128,11 +129,11 @@ export async function loadPeopleData() {
|
||||
let textInfos = titleAndContent(pouet.content);
|
||||
console.log(pouet);
|
||||
entry = {
|
||||
id: 'img' + username + infos.id,
|
||||
id: 'img' + displayName + infos.id,
|
||||
date: infos.date,
|
||||
dateInfo: pouet.created_at,
|
||||
type: "image",
|
||||
author: username,
|
||||
author: displayName,
|
||||
caption: textInfos.title + '.star',
|
||||
src: pouet.media_attachments[0].url,
|
||||
alt: pouet.media_attachments[0].description,
|
||||
@@ -143,11 +144,11 @@ export async function loadPeopleData() {
|
||||
} else {
|
||||
let textInfos = titleAndContent(pouet.content);
|
||||
entry = {
|
||||
id: 'txt' + username + infos.id,
|
||||
id: 'txt' + displayName + infos.id,
|
||||
date: infos.date,
|
||||
dateInfo: pouet.created_at,
|
||||
type: "text",
|
||||
author: username,
|
||||
author: displayName,
|
||||
caption: textInfos.title + '.msg',
|
||||
description: textInfos.content,
|
||||
isSelected: false
|
||||
|
||||
@@ -71,10 +71,11 @@
|
||||
|
||||
#artistPannel{
|
||||
position: fixed;
|
||||
width: 380px;
|
||||
height: 500px;
|
||||
width: 420px;
|
||||
height: 600px;
|
||||
top: 16.1px;
|
||||
left: 16.1px;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
#artistContent{
|
||||
@@ -123,14 +124,15 @@
|
||||
.theMatrix{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
grid-auto-rows: 133px;
|
||||
gap: 10px;
|
||||
grid-auto-rows: 150px;
|
||||
gap: 16.1px;
|
||||
width: 97%;
|
||||
height: 66%;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.itemDesc{
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#infoMenuContainer" defer>
|
||||
<Teleport to="#playerContainer" defer>
|
||||
<div class="graffContainer" id="TsContainer">
|
||||
<TsGraff name="graffTs" class="graff" id="graffTs"/>
|
||||
<TsNeon name="neonTs" class="neon" id="neonTs"/>
|
||||
@@ -63,7 +63,7 @@
|
||||
}
|
||||
|
||||
#TsContainer{
|
||||
top: -155%;
|
||||
top: 66px;
|
||||
left: 131.2px;
|
||||
}
|
||||
#graffTs{
|
||||
@@ -106,17 +106,12 @@
|
||||
margin-left: -7.77px;
|
||||
margin-top: -7.77px;
|
||||
}
|
||||
/*================ TINY PHONE*/
|
||||
@media(max-width:350px){
|
||||
#TsContainer{
|
||||
top: -133%;
|
||||
}
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1300px){
|
||||
#TsContainer{
|
||||
top: 50px;
|
||||
left: -144%;
|
||||
top: 55px;
|
||||
left: 300px;
|
||||
}
|
||||
#graffTs{
|
||||
width: 100px;
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
z-index: 33;
|
||||
}
|
||||
#inboxHeader{
|
||||
width: 100%;
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
|
||||
<!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
|
||||
<InboxDiv @open="openPannel('msg')"></InboxDiv>
|
||||
<ArtistPan
|
||||
v-show="isActive.includes('artist')"
|
||||
@@ -148,6 +148,7 @@
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
#btnColumn{
|
||||
|
||||
@@ -125,7 +125,8 @@
|
||||
emits: ['themeDark', 'themeLight'],
|
||||
data(){
|
||||
return{
|
||||
isChecked: false
|
||||
isChecked: false,
|
||||
target: null
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@@ -133,15 +134,18 @@
|
||||
if(this.isChecked){
|
||||
this.isChecked = false;
|
||||
this.$emit('themeLight');
|
||||
this.target.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'
|
||||
return document.documentElement.setAttribute("data-theme", "light")
|
||||
}else{
|
||||
this.isChecked = true;
|
||||
this.$emit('themeDark');
|
||||
this.target.style.filter = 'invert(0) saturate(161%) brightness(117%) hue-rotate(1.61deg)'
|
||||
return document.documentElement.setAttribute("data-theme", "dark")
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
async mounted(){
|
||||
this.target = await document.querySelector('#canvas video');
|
||||
console.log("Theme button is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<template>
|
||||
<div id="generatedContainer" ref="generatorContainer">
|
||||
<div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
|
||||
<div class="loadingOverlay" v-show="false"><p id="loadingOText">ça charge...</p></div>
|
||||
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 13.12px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#playerContainer .iconBtnStyle{
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<br>
|
||||
20h/ Début des shows
|
||||
<br>
|
||||
    → → → jusqu'à 1h
|
||||
   → → → jusqu'à 1h
|
||||
</p>
|
||||
</time>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user