From f2c9a04183278fbfb01d833bde105a6a6b03e30d Mon Sep 17 00:00:00 2001 From: Michel NAUD Date: Thu, 12 Mar 2026 13:06:36 +0100 Subject: [PATCH 1/2] calendar, add planning view for mobiles --- CHANGELOG.md | 1 + frontend/package-lock.json | 10 ++ frontend/package.json | 1 + frontend/src/assets/css/main.css | 27 +++++ frontend/src/views/CalendarView.vue | 17 +-- frontend/src/views/EventDetailView.vue | 140 +++++++++++++------------ frontend/src/views/EventEditView.vue | 6 +- 7 files changed, 123 insertions(+), 79 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d77ef5..05a2800 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,3 +9,4 @@ - ADDED admin - track files sizes - ADDED login/logout notifications - FIXED system - customer deploy stack name +- ADDED calandar - planning view (default for mobile) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0ce956a..91047ed 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "@fullcalendar/core": "^6.1.20", "@fullcalendar/daygrid": "^6.1.20", "@fullcalendar/interaction": "^6.1.20", + "@fullcalendar/list": "^6.1.20", "@fullcalendar/timegrid": "^6.1.20", "@fullcalendar/vue3": "^6.1.20", "axios": "^1.7.0", @@ -578,6 +579,15 @@ "@fullcalendar/core": "~6.1.20" } }, + "node_modules/@fullcalendar/list": { + "version": "6.1.20", + "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.20.tgz", + "integrity": "sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==", + "license": "MIT", + "peerDependencies": { + "@fullcalendar/core": "~6.1.20" + } + }, "node_modules/@fullcalendar/timegrid": { "version": "6.1.20", "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz", diff --git a/frontend/package.json b/frontend/package.json index f0ac4c3..b266feb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@fullcalendar/core": "^6.1.20", "@fullcalendar/daygrid": "^6.1.20", "@fullcalendar/interaction": "^6.1.20", + "@fullcalendar/list": "^6.1.20", "@fullcalendar/timegrid": "^6.1.20", "@fullcalendar/vue3": "^6.1.20", "axios": "^1.7.0", diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css index 364a337..9668f9a 100644 --- a/frontend/src/assets/css/main.css +++ b/frontend/src/assets/css/main.css @@ -324,3 +324,30 @@ .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { min-height: 4.5em; } + +/* FullCalendar mobile responsive overrides */ +@media (max-width: 640px) { + .fc .fc-toolbar { + flex-wrap: wrap; + gap: 0.5rem; + } + .fc .fc-toolbar-title { + font-size: 1rem; + width: 100%; + text-align: center; + order: -1; + } + .fc .fc-button { + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + } + .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { + min-height: 2.5em; + } + .fc .fc-daygrid-event-dot { + border-width: 4px; + } + .fc { + font-size: 0.75rem; + } +} diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue index f7ea4aa..39bd90b 100644 --- a/frontend/src/views/CalendarView.vue +++ b/frontend/src/views/CalendarView.vue @@ -4,6 +4,7 @@ import { useRouter } from 'vue-router' import FullCalendar from '@fullcalendar/vue3' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid' +import listPlugin from '@fullcalendar/list' import interactionPlugin from '@fullcalendar/interaction' import frLocale from '@fullcalendar/core/locales/fr' import type { EventClickArg, DatesSetArg } from '@fullcalendar/core' @@ -38,15 +39,15 @@ const calendarEvents = computed(() => })) ) +const isMobile = window.innerWidth < 640 + const calendarOptions = computed(() => ({ - plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin], - initialView: 'dayGridMonth' as const, + plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin], + initialView: isMobile ? 'listWeek' : 'dayGridMonth', locale: frLocale, - headerToolbar: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay', - }, + headerToolbar: isMobile + ? { left: 'prev,next', center: 'title', right: 'listWeek,dayGridMonth' } + : { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, eventTimeFormat: { hour: '2-digit' as const, minute: '2-digit' as const, @@ -121,7 +122,7 @@ onMounted(() => { diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue index 53e1b66..51d42d0 100644 --- a/frontend/src/views/EventDetailView.vue +++ b/frontend/src/views/EventDetailView.vue @@ -196,7 +196,7 @@ function formatShortDate(d: string) {
-
+

@@ -219,7 +219,7 @@ function formatShortDate(d: string) { Organisé par {{ event.owner_nickname }}

-
+
Modifier @@ -307,31 +307,33 @@ function formatShortDate(d: string) {

ATO

- - - - - - - - - - - - - - - - - -
FlightAppareilMissionJoueurs
{{ f.name }} - {{ f.aircraft_name }} x{{ f.nb_slots }} - {{ f.mission }} - -
+
+ + + + + + + + + + + + + + + + + +
FlightAppareilMissionJoueurs
{{ f.name }} + {{ f.aircraft_name }} x{{ f.nb_slots }} + {{ f.mission }} + +
+
@@ -458,48 +460,50 @@ function formatShortDate(d: string) { > {{ showAllChoices ? 'masquer' : 'voir plus ...' }} - - - - - - - - - - - - - - - - - - - - -
JoueursChoix 1Choix 2Choix 3
ModuleTâcheModuleTâcheModuleTâche
- {{ v.user_nickname }} - - - {{ formatShortDate(v.created_at) }} -