From 976eaa544322be18c9feb1a165b9645533af4538 Mon Sep 17 00:00:00 2001 From: polo Date: Sat, 19 Jul 2025 13:15:12 +0200 Subject: =?UTF-8?q?am=C3=A9lioration=20calendrier=20=C3=A9cran=20tactile,?= =?UTF-8?q?=20selection=20sans=20touch=C3=A9=20prolong=C3=A9,=20versionedF?= =?UTF-8?q?ileURL()=20dispo=20de=20partout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/calendar.css | 23 ++++++++++++++++++----- public/js/calendar.js | 18 ++++++++++++++---- public/js/calendar_admin.js | 2 ++ src/view/HeadBuilder.php | 16 ++++++++-------- src/view/templates/calendar.php | 4 ++-- 5 files changed, 44 insertions(+), 19 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(){

` + info.event.title + `

` + info.event.extendedProps.description + `

`; if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour - aside_content = aside_content + `

le ` + formated_start + `

- `; + aside_content = aside_content + `

le ` + formated_start + `

`; } else{ aside_content = aside_content + `

du ` + formated_start + `

-

au ` + formated_end + `

- `; +

au ` + formated_end + `

`; } + aside_content += ` + `; 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 diff --git a/src/view/HeadBuilder.php b/src/view/HeadBuilder.php index f1f41ba..06a1301 100644 --- a/src/view/HeadBuilder.php +++ b/src/view/HeadBuilder.php @@ -26,25 +26,25 @@ class HeadBuilder extends AbstractBuilder $css = ''; foreach($css_array as $name) { - $css .= '' . "\n"; + $css .= '' . "\n"; } $js = ''; foreach($js_array as $name) { - $js .= '' . "\n"; + $js .= '' . "\n"; } if(MainBuilder::$modif_mode){ - $css .= '' . "\n"; - $js .= '' . "\n"; + $css .= '' . "\n"; + $js .= '' . "\n"; } // tinymce, nécéssite un script de copie dans composer.json if($_SESSION['admin']){ - $css .= '' . "\n"; - $js .= '' . "\n"; // pour js/tinymce/tinymce.min.js - $js .= '' . "\n"; + $css .= '' . "\n"; + $js .= '' . "\n"; // pour js/tinymce/tinymce.min.js + $js .= '' . "\n"; } // titre @@ -77,7 +77,7 @@ class HeadBuilder extends AbstractBuilder return $this->stop; } - private function versionedFileURL(string $type, string $filename): string + static public function versionedFileURL(string $type, string $filename): string { $path = $type . '/' . $filename . '.' . $type; diff --git a/src/view/templates/calendar.php b/src/view/templates/calendar.php index 144df00..e45f631 100644 --- a/src/view/templates/calendar.php +++ b/src/view/templates/calendar.php @@ -8,10 +8,10 @@ ' . "\n"; + echo '' . "\n"; } else{ - echo '' . "\n"; + echo '' . "\n"; } ?>

-- cgit v1.2.3