diverses améliorations de l'affichage

4 files changed, 39 insertions, 16 deletions

diff --git a/public/css/calendar.css b/public/css/calendar.css
index 87ce75f..fb2b2fa 100644
--- a/public/css/calendar.css
+++ b/public/css/calendar.css
@@ -2,15 +2,16 @@
     border: 2px double;
     border-radius: 5px;
     width: max-content;
+    padding: 5px;
 }
 #calendar_zone{
     display: flex;
-    gap: 15px;
+    gap: 5px;
     padding: 15px;
     /*max-width: 1000px;*/
 }
 #calendar{
-    width: -moz-available;
+    width: 1170px;
 }
 .event_title_box{
     display: flex;
@@ -49,3 +50,19 @@ td .fc-timegrid-axis{
     background-color: #00679e;
     border-radius: 5px;
 }
+
+@media screen and (max-width: 900px){
+    #calendar_zone{
+        padding: 0;
+    }
+    .fc-toolbar-title{
+        font-size: large !important;
+    }
+}
+@media screen and (max-width: 650px){
+    .fc-toolbar-chunk{
+        font-size: smaller;
+    }
+}
+@media screen and (max-width: 550px){
+}
\ No newline at end of file
diff --git a/public/css/foot.css b/public/css/foot.css
index 023a0f2..dd9b953 100644
--- a/public/css/foot.css
+++ b/public/css/foot.css
@@ -134,6 +134,7 @@ footer > div
         background-color: #ffff00;
         position: fixed;
         bottom: 0px;
+        z-index: 1; /* augmenter la valeur si nécessaire */
 }
 .logged_in button
 {
diff --git a/public/js/calendar.js b/public/js/calendar.js
index 2193272..7450a91 100644
--- a/public/js/calendar.js
+++ b/public/js/calendar.js
@@ -12,8 +12,8 @@ document.addEventListener('DOMContentLoaded', function(){
         headerToolbar:{
             left: 'prev,next today',
             center: 'title',
-            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
-            //right: 'dayGridMonth,timeGridWeek'
+            //right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+            right: 'dayGridMonth,timeGridWeek,listWeek'
         },
         slotMinWidth: 70,
         defaultAllDay: false,
@@ -62,20 +62,25 @@ document.addEventListener('DOMContentLoaded', function(){
             const start = formatDate(info.event.start);
             const start_date = start.split('T')[0];
             const start_hour = (info.event.allDay ? '' : '<br>à ' + start.split('T')[1]).replace(":", "h");
-            const formated_start = 'le ' + start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour;
+            const formated_start = start_date.split('-')[2] + '/' + start_date.split('-')[1] + '/' + start_date.split('-')[0] + start_hour;
             const end = formatDate(info.event.allDay ? minusOneDay(info.event.end) : info.event.end, info.event.allDay);
             const end_date = end.split('T')[0];
             const end_hour = (info.event.allDay ? '' : '<br>à ' + end.split('T')[1]).replace(":", "h");
-            const formated_end = 'le ' + end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour;
+            const formated_end = end_date.split('-')[2] + '/' + end_date.split('-')[1] + '/' + end_date.split('-')[0] + end_hour;
 
-            const aside_content = `<div class="event" style="border-color: ` + info.event.backgroundColor +`;">
-                        <h3>` + info.event.title + `</h3>
-                        <p><i>` + info.event.extendedProps.description + `</i></p>
-                        <p>Journée entière: <br>` + (checked ? 'oui' : 'non') + `</p>
-                        <p>Début: <br>` + formated_start + `</p>
-                        <p>Fin: <br> ` + formated_end + `</p>
+            let aside_content = `<div class="event" style="border-color: ` + info.event.backgroundColor +`;">
+                    <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>`;
-
+            }
+            else{
+                aside_content = aside_content + `<p>du ` + formated_start + `</p>
+                        <p>au ` + formated_end + `</p>
+                    </div>`;
+            }
+            
             aside.innerHTML = aside_content;
             calendar.updateSize();
         },
@@ -94,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function(){
     }
 
     document.addEventListener('keydown', function(event){
-        if(event.key === 'Escape') {
+        if(event.key === 'Escape'){
             hideModal();
         }
     });
diff --git a/public/js/calendar_admin.js b/public/js/calendar_admin.js
index a99b069..8d764d8 100644
--- a/public/js/calendar_admin.js
+++ b/public/js/calendar_admin.js
@@ -13,8 +13,8 @@ document.addEventListener('DOMContentLoaded', function(){
         headerToolbar:{
             left: 'prev,next today',
             center: 'title',
-            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
-            //right: 'dayGridMonth,timeGridWeek'
+            //right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+            right: 'dayGridMonth,timeGridWeek,listWeek'
         },
         slotMinWidth: 70,
         defaultAllDay: false,