edit: la fenetre évènement bouge sur pc ^^ + ajustement responsive

index.html

@@ -118,21 +118,13 @@
       <section id="statuSection" class="solidBox">
         <div id="statusDesc">
             <p>
-                Le LOL peut ouvrir en dehors des horaires habituels.<br>
+                Le LOL peut ouvrir en dehors des horaires habituels.
-                En fonction de nos envies et disponibilités.<br>&emsp;
+                En fonction de nos envies et disponibilités.
             </p>
             <p>
-                &emsp;&emsp;Un capteur sur la porte d'entrée indique<br>&emsp;&emsp;si le local est ouvert:
+                <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
             </p>
         </div>
-        <!-- Preview du statut avec js
-          <h3 id="lolStatus">
-            <small>
-              Le local est actuellement
-            </small>
-            Fermé ...
-          </h3>
-        -->
         <a href="./status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
         </section>
       <section id="extraContent">

js/events.js

@@ -9,7 +9,12 @@ export async function loadEvents(){
 
   let closeBtn = document.querySelector('#posterCloseBtn');
 
-  closeBtn.addEventListener('click', () => {
+  closeBtn.addEventListener('mousedown', () => {
+    displayWindow.style.visibility  = 'collapse';
+    displayContainer.replaceChildren();
+  })
+
+  closeBtn.addEventListener('touchstart', () => {
     displayWindow.style.visibility  = 'collapse';
     displayContainer.replaceChildren();
   })
@@ -71,7 +76,7 @@ export async function loadEvents(){
         document.head.append(style);
       }
       btn.addEventListener( 'click', () => {
-        console.log("selection :", content)
+        //console.log("selection :", content)
         displayWindow.style.visibility = 'visible';
         let targetTitle = displayWindow.querySelector('h4');
         targetTitle.innerText = title;

js/main.js

@@ -3,3 +3,64 @@ import { loadStatus } from './status.js'
 
 loadEvents();
 loadStatus();
+
+let target = document.querySelector('#posterWindow');
+
+let startTarget = target.querySelector('.posterTitle');
+
+console.log('selected target :', startTarget);
+
+let startX, startY;
+let clicked = false;
+
+startTarget.addEventListener('mousedown', (event) => {
+  startX = event.pageX;
+  startY = event.pageY;
+  clicked = true;
+  console.log('clicking...')
+})
+
+startTarget.addEventListener('touchstart', (event) => {
+  startX = event.pageX;
+  startY = event.pageY;
+  clicked = true;
+  console.log('touching...')
+})
+
+document.addEventListener('mousemove', (event) => {
+  if(clicked){
+    console.log('moving...')
+    let currentX = event.pageX;
+    let currentY = event.pageY;
+    let moveX = target.offsetLeft + currentX - startX;
+    target.style.left =  moveX + 'px';
+    let moveY = target.offsetTop + currentY - startY;
+    target.style.top = moveY + 'px';
+    startX = currentX;
+    startY = currentY;
+  }
+});
+
+document.addEventListener('touchmove', (event) => {
+  if(clicked){
+    console.log('moving...')
+    let currentX = event.pageX;
+    let currentY = event.pageY;
+    let moveX = target.offsetLeft + currentX - startX;
+    target.style.left =  moveX + 'px';
+    let moveY = target.offsetTop + currentY - startY;
+    target.style.top = moveY + 'px';
+    startX = currentX;
+    startY = currentY;
+  }
+});
+
+document.addEventListener('mouseup', () => {
+  console.log('STOP !')
+  clicked = false;
+})
+
+document.addEventListener('touchend', () => {
+  console.log('STOP !')
+  clicked = false;
+})

js/status.js

@@ -13,7 +13,7 @@ export async function loadStatus(){
   let status = html.querySelector('#lolStatus');
   let icon = html.querySelector('link[rel="icon"]');
   let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
-  console.log("selected style : ", style);
+  //console.log("selected style : ", style);
 
   document.head.append(icon);
   document.head.append(style);

readMe.MD

@@ -2,7 +2,7 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
 
 >si possible écrire tous les noms de variables en Pascal Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible
 
-> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" je comprends pas comment mettre ça en place mais du coup j'ai fait 2 pages pour le statut tous seul, je sait juste pas quoi mettre dans le lien
+> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" voir dernière entrée (***)
 
 > j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ?
 
@@ -10,6 +10,6 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
 
 > ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé )
 
-> mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
+>(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
         modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
         changer le fetch dans status.js

style/common.css

@@ -117,9 +117,6 @@
   width: auto;
   height: auto;
 
-  top: 5vh;
-  left: 5vw;
-
   background-color: var(--back-color);
   border-color: var(--main-color);
   border-radius: 16.1px;
@@ -138,7 +135,7 @@
     position: relative;
     top: 0;
     width: 100%;
-    height: 44px;
+    height: 77px;
 
     background-color: var(--main-color);
     color: var(--back-color);
@@ -157,6 +154,11 @@
     padding-right: 16.1px;
 
     box-sizing: border-box;
+    cursor: move;
+
+    h4{
+      pointer-events: none;
+    }
 
     .iconBtnStyle{
       width: 33px;

style/default.css

@@ -26,6 +26,7 @@ p,h1,h2,h3,h4{
   pointer-events: none !important;
   padding: 0;
   margin: 0;
+  user-select: none;
 }
 
 ul,ol {

style/main.css

@@ -123,7 +123,7 @@ main{
   overflow: hidden;
 
       #homeContent{
-        height: 80vh;
+        height: 66vh;
         width: 100%;
         position:relative;
         z-index: 0;
@@ -286,15 +286,20 @@ main{
             #statusDesc{
               width: 77%;
               padding: 7.77px;
-              padding-right: 13.12px;
+              padding-right: 16.1px;
-              font-size: 12px;
+              font-size: 16.1px;
-              line-height: 1em;
+              line-height: 1.1em;
+
+              small{
+                font-size: 13.12px;
+                line-height: 0.333em;
+              }
             }
 
             #lolStatus{
               position: relative;
               z-index: 33;
-              width: 33%;
+              width: 40%;
               height: 50px;
               display: flex;
               flex-direction: row;
@@ -520,6 +525,8 @@ main{
 
 #posterWindow{
   visibility: collapse;
+  top: 5vh;
+  left: 5vw;
 }
 
 #posterContainer{