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

2026-07-04 19:32:56 +02:00
parent 80629f785a
commit 4bdd4561a8
9 changed files with 396 additions and 8 deletions
@@ -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>