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

index.html

@@ -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>

src/App.vue

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,12 @@
+import { reactive } from 'vue'
+
+export const dataStorage = reactive({
+  selectedEvent: {
+    title: '',
+    date: '',
+    time: '',
+    subtitle: '',
+    desc: ''
+  },
+  eventInfoActive: false
+})

src/lolEvents.js

@@ -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

@@ -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

@@ -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%;
+          height: auto;
-          overflow-y: scroll;
           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;