vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: interface évènement + modif typo texte (légèrement +gras)

Browse Source
This commit is contained in:
Vega
2026-07-04 19:32:56 +02:00
parent 80629f785a
commit 4bdd4561a8
9 changed files with 396 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-2
View File
@@ -113,8 +113,6 @@
<div class="uiStyle" id="title">
évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
</div>
<div id="eventList">
</div>
</div>
</div>
</div>
public/typo/Velvelyne-Book.ttf
BIN
View File
Binary file not shown.
src/App.vue
+2 -1
View File
@@ -5,7 +5,8 @@
<Teleport to="#lolOpener.uiStyle" defer>
<lolStatusDiv></lolStatusDiv>
</Teleport>
<eventDiv></eventDiv>
<eventPannel class="zFocus"></eventPannel>
</template>
<style scoped>
src/components/EventContent.vue
+137
View File
@@ -0,0 +1,137 @@
<template>
<Teleport to="#eventSection" defer>
<div id="eventContainer">
<div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
<div class="titleSection">
<p class="title">{{item.title}}</p>
<p class="date">{{item.date}} &rarr; {{item.time}}</p>
</div>
<div class="subtitleSection">
<p class="subtitle">{{item.subtitle}}</p>
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>
#eventContainer{
width:100%;
height: auto;
max-height: 90vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
gap: 7.77px;
padding-top: 7.77px;
box-sizing: border-box;
@media(min-width: 700px){
max-height: 50vh;
}
@media(min-width: 1300px){
max-height: 46.5vh;
}
.eventEntry{
width: 90%;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
border-color: var(--back-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
flex-shrink: 0;
gap: 0;
.titleSection{
width: 100%;
height: 44px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding-top: 7.77px;
pointer-events: none;
p{
font-family: 'velvelyne';
font-size: 16.1px;
font-weight: bold;
color: var(--back-color);
height: 50%;
margin: 0;
padding: 0;
text-transform: uppercase;
}
p.date{
font-family: 'karrik';
font-weight: normal;
font-size: 9px;
text-transform: none;
}
}
.subtitleSection{
width: 100%;
height: auto;
padding-right: 16.1px;
padding-left: 16.1px;
box-sizing: border-box;
position: relative;
margin-top: 0;
padding-top: 0;
pointer-events: none;
p{
font-family: 'velvelyne';
font-size: 13.12px;
font-weight: normal;
color: var(--back-color);
white-space: pre-line;
}
}
}
.eventEntry:hover{
background-color: var(--back-color);
color: var(--main-color);
p{
color: var(--main-color);
}
}
}
</style>
<script>
import { watch } from 'vue'
import { lolEventsList } from '../lolEvents.js'
import { dataStorage } from '../dataExchange.js'
export default {
name : 'EventContent',
methods: {
openEvent(obj){
console.log('updating...')
dataStorage.selectedEvent = obj;
dataStorage.eventInfoActive = true;
}
},
computed: {
displayedEvents(){
return lolEventsList
}
},
mounted(){
console.log("Event list is loaded!");
}
};
</script>
src/components/EventInfoPannel.vue
+111
View File
@@ -0,0 +1,111 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
{{displayedEvent.title}}
</p>
<button type="button" class="closeBtn" @mousedown.stop="closePannel" @touchstart.stop="closePannel">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent" id="eventContent">
<p class="date">
{{displayedEvent.date}} &rarr; {{displayedEvent.time}}
</p>
<p>{{displayedEvent.desc}}</p>
</div>
</div>
</template>
<style scoped>
#eventPannel{
position: fixed;
width: 250px;
height: auto;
max-height: 250px;
top: 222px;
left: 117px;
padding-bottom: 3.33px;
#eventContent{
padding: 7.77px;
align-items: flex-start;
justify-content: start;
overflow-y: scroll;
p{
font-family: 'velvelyne';
font-weight: normal;
font-size: 13.12;
color: var(--main-color);
margin: 0;
padding: 0;
margin-bottom: 3.33px;
margin-left: 7.77px;
margin-right: 13.12px;
white-space: pre-line;
}
p.date{
font-family: 'karrik';
}
}
}
/*================ PC LARGE*/
@media(min-width:650px){
#eventPannel{
left: 477px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
import { dataStorage } from '../dataExchange.js'
export default {
name : 'EventInfoPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
computed: {
displayedEvent(){
return dataStorage.selectedEvent
},
isActive(){
return dataStorage.eventInfoActive
}
},
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
closePannel(){
dataStorage.eventInfoActive = false;
}
},
mounted(){
this.target = this.$refs.eventPannel;
console.log("Event info pannel is loaded!");
}
};
</script>
src/dataExchange.js
+12
View File
@@ -0,0 +1,12 @@
import { reactive } from 'vue'
export const dataStorage = reactive({
selectedEvent: {
title: '',
date: '',
time: '',
subtitle: '',
desc: ''
},
eventInfoActive: false
})
src/lolEvents.js
+34
View File
@@ -0,0 +1,34 @@
import { reactive } from 'vue'
export const lolEventsList = reactive(
[
{
title: 'test-01',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 001',
desc: 'ça marche !'
},
{
title: 'test-02',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 002',
desc: 'oui je crois bien'
},
{
title: 'test-333',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 333 \n test event 333 \n test event 333 \n test event 333',
desc: 'super !'
},
{
title: 'test-004',
date: '13/12/26',
time: '13h12',
subtitle: 'test event 004',
desc: 'test de très longue description: \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
]
)
src/main.js
+6
View File
@@ -5,11 +5,17 @@ import './style.css'
import App from './App.vue'
// import composants
import lolStatus from './components/lolStatus.vue'
import EventContent from './components/EventContent.vue'
import EventInfoPannel from './components/EventInfoPannel.vue'
// création app racine
const app = createApp(App);
//Composants
app.component('lolStatusDiv', lolStatus);
app.component('eventDiv', EventContent);
app.component('eventPannel', EventInfoPannel);
//Démarrage dans div#app de index.html
app.mount('#app');
src/style.css
+94 -5
View File
@@ -23,7 +23,7 @@
@font-face {
font-family: 'velvelyne';
src: url('./typo/Velvelyne-Light.ttf') format('truetype');
src: url('./typo/Velvelyne-Book.ttf') format('truetype');
font-weight: normal;
}
@@ -189,6 +189,82 @@ html, body{
color: var(--back-color);
}
/*==============FENETRES*/
.windowStyle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: var(--back-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--main-color);
overflow: hidden;
}
.zBase{
z-index: 33;
}
.zFocus{
z-index: revert;
z-index: 1312;
}
.windowTitle{
width:100%;
height:50px;
background-color: var(--main-color);
border-radius: 0;
font-family: 'velvelyne';
font-weight: bold;
text-transform: uppercase;
font-size: 22px;
color: var(--back-color);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
cursor: move;
}
.windowTitleLower{
font-family: 'velvelyne';
font-weight: bold;
font-size: 13.12px;
}
.closeBtn{
color: var(--back-color);
background-color: var(--main-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--back-color);
width: 33px;
height: 33px;
align-items: center;
}
.closeBtn:hover{
color: var(--main-color);
background-color: var(--back-color);
}
.windowContent{
height:77%;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/*=============INTERFACE*/
.uiStyle{
background-color: var(--back-color);
@@ -569,26 +645,39 @@ html, body{
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
height: 50vh;
#aboutText{
width: 60%;
height: 100%;
overflow-y: scroll;
height: auto;
padding-left: 4.44px;
padding-right: 13.12px;
box-sizing: border-box;
padding-bottom: 13.12px;
overflow-y: scroll;
@media(min-width: 700px){
height: 50vh;
}
@media(min-width: 1300px){
height: 50vh;
}
p{
font-family: 'velvelyne';
font-weight: normal;
font-size: 13.12px;
color: var(--main-color);
@media(min-width: 1300px){
font-size: 20px;
}
}
}
#eventSection{
width: 40%;
height: auto;
height: 100%;
position: relative;
#title{
height: 44px;