amélioration calendrier écran tactile, selection sans touché prolongé, versionedFileURL() dispo de partout

3 files changed, 34 insertions, 9 deletions

diff --git a/public/css/calendar.css b/public/css/calendar.css
index 1cfb0fd..314a5ad 100644
--- a/public/css/calendar.css
+++ b/public/css/calendar.css
@@ -1,7 +1,10 @@
+/* !important est nécessaire pour écraser le CSS inséré par le javascript de fullcalendar */
+
 .event{
     border: 2px double;
     border-radius: 5px;
     width: max-content;
+    max-width: 250px;
     padding: 5px;
 }
 #calendar_zone{
@@ -13,16 +16,17 @@
 #calendar{
     width: 1165px; /* on enlève le "gap" */
 }
+#event_modal{}
 .event_title_box{
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 .event_close_button{
-    height: fit-content;
+    /*height: fit-content;*/
 }
 .fc-toolbar-title{
-    font-size: x-large !important;
+    /*font-size: x-large !important;*/
 }
 .fc-button{
     padding: 0.2em 0.4em !important;
@@ -60,12 +64,21 @@ td .fc-timegrid-axis{
         padding: 0;
     }
     .fc-toolbar-title{
-        font-size: large !important;
+        /*font-size: large !important;*/
+    }
+    .fc-header-toolbar{
+        font-size: smaller;
+    }
+    h3, p, .event > button{
+        font-size: smaller;
     }
 }
 @media screen and (max-width: 650px){
-    .fc-toolbar-chunk{
-        font-size: smaller;
+    .fc-header-toolbar{
+        font-size: small;
+    }
+    .fc-toolbar-title{
+        font-size: 1.5em !important; /* au lieu de 1.75em */
     }
 }
 @media screen and (max-width: 550px){
diff --git a/public/js/calendar.js b/public/js/calendar.js
index 7450a91..2275c10 100644
--- a/public/js/calendar.js
+++ b/public/js/calendar.js
@@ -29,6 +29,8 @@ document.addEventListener('DOMContentLoaded', function(){
         stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll
         fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois
         selectable: true, // sélection de jours multiples
+        longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde,
+        chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */
         navLinks: true, // numéros de jour et de semaines clicables
         
         // vue semaine
@@ -43,6 +45,14 @@ document.addEventListener('DOMContentLoaded', function(){
             selected_start_string = info.startStr; // variable "globale"
             hideModal();
         },
+        // méthode alternative à longPressDelay: 0 pour obtenir une sélection d'un simple "tap" sur écran tactile (mettre le if inverse dans select)
+        /*dateClick: function(info) {
+            if (window.matchMedia('(pointer: coarse)').matches) {
+                // utile sur mobile/tablette : déclenche sur un tap
+                console.log('dateClick', info.dateStr);
+                calendar.select(info.date, info.date); // hack permettant de sélectionner une journée seule uniquement
+            }
+        },*/
         //unselect: function(event, view){},
 
         eventClick: function(info){
@@ -72,14 +82,14 @@ document.addEventListener('DOMContentLoaded', function(){
                     <h3>` + info.event.title + `</h3>
                     <p><i>` + info.event.extendedProps.description + `</i></p>`;
             if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour
-                aside_content = aside_content + `<p>le ` + formated_start + `</p>
-                    </div>`;
+                aside_content = aside_content + `<p>le ` + formated_start + `</p>`;
             }
             else{
                 aside_content = aside_content + `<p>du ` + formated_start + `</p>
-                        <p>au ` + formated_end + `</p>
-                    </div>`;
+                        <p>au ` + formated_end + `</p>`;
             }
+            aside_content += `<button class="event_close_button">Fermer</button>
+                </div>`;
             
             aside.innerHTML = aside_content;
             calendar.updateSize();
diff --git a/public/js/calendar_admin.js b/public/js/calendar_admin.js
index 76a1ce9..7f167a4 100644
--- a/public/js/calendar_admin.js
+++ b/public/js/calendar_admin.js
@@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', function(){
         stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll
         fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois
         selectable: true, // sélection de jours multiples
+        longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde,
+        chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */
         navLinks: true, // numéros de jour et de semaines clicables
         
         // vue semaine