From 056849bd4c90985515f6f02b8eec0754a49fcb11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <git.matteo@delab.re>
Date: Mon, 30 Sep 2024 01:05:57 -0400
Subject: [PATCH] =?UTF-8?q?D=C3=A9place=20calendrier=20des=20=C3=A9v=C3=A9?=
 =?UTF-8?q?nements=20vers=20page=20s=C3=A9par=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/_index.md                             |  4 -
 content/calendrier/_index.md                  | 11 +++
 themes/aediroum/layouts/index.html            | 36 --------
 .../aediroum/layouts/section/calendrier.html  | 83 +++++++++++++++++++
 themes/aediroum/static/css/style.css          | 60 ++++++++++----
 5 files changed, 136 insertions(+), 58 deletions(-)
 create mode 100644 content/calendrier/_index.md
 create mode 100644 themes/aediroum/layouts/section/calendrier.html

diff --git a/content/_index.md b/content/_index.md
index bef18cc..f0f53ab 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -24,10 +24,6 @@ Elle représente les étudiants des programmes suivants au [Département d'Infor
 * [Maîtrise en informatique](//diro.umontreal.ca/programmes-cours/cycles-superieurs/maitrise-en-informatique)
 * [Doctorat en informatique](//diro.umontreal.ca/programmes-cours/cycles-superieurs/doctorat-en-informatique)
 
-### Événements à venir
-
-<div id="events-calendar"></div>
-
 ### Nous rejoindre
 
 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" height="16"><path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path></svg> **Local:** 3190 [Pav. André-Aisenstadt](https://goo.gl/maps/YWSDwqFxJw72)
diff --git a/content/calendrier/_index.md b/content/calendrier/_index.md
new file mode 100644
index 0000000..fe6a53d
--- /dev/null
+++ b/content/calendrier/_index.md
@@ -0,0 +1,11 @@
+---
+title: Calendrier des événements
+menu:
+  main:
+    parent: evenements
+    weight: 2
+sitemap:
+  changefreq: daily
+  priority: 0.7
+---
+
diff --git a/themes/aediroum/layouts/index.html b/themes/aediroum/layouts/index.html
index 3a8e9f7..1fbdce2 100644
--- a/themes/aediroum/layouts/index.html
+++ b/themes/aediroum/layouts/index.html
@@ -5,39 +5,3 @@
 {{ define "main" }}
   {{ .Content }}
 {{ end }}
-
-{{ define "scripts" }}
-<script src="https://cdn.jsdelivr.net/npm/ical.js@1.5.0/build/ical.min.js" integrity="sha256-uotVKltUv5neKsIlZxrxUccba0PaptusFj6p+w8Sons=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js" integrity="sha256-ZztCtsADLKbUFK/X6nOYnJr0eelmV2X3dhLDB/JK6fM=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@6.1.15/index.global.min.js" integrity="sha256-4zHPHslCgpks0gXVzHuFcF3aL1y674HH8L9s3vQiJK4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/locales-all.global.min.js" integrity="sha256-lzem0W8FCaLegnCNhEQnF4bMnpq9Du4IiUDonSOXCA8=" crossorigin="anonymous"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const calendarEl = document.getElementById("events-calendar");
-    const calendar = new FullCalendar.Calendar(calendarEl, {
-      initialView: "dayGridFourDay",
-      headerToolbar: {
-        center: "dayGridFourDay,dayGridMonth",
-      },
-      locale: "fr",
-      contentHeight: 400,
-      events: {
-        url: "https://bot.aediroum.ca/events.ics",
-        format: "ics",
-      },
-      views: {
-        dayGridFourDay: {
-          type: "dayGrid",
-          duration: { days: 4 },
-          buttonText: "À venir"
-        },
-      },
-      navLinks: true,
-      navLinkDayClick: function(date, jsEvent) {
-        calendar.changeView("dayGridFourDay", date);
-      },
-    });
-    calendar.render();
-  });
-</script>
-{{ end }}
diff --git a/themes/aediroum/layouts/section/calendrier.html b/themes/aediroum/layouts/section/calendrier.html
new file mode 100644
index 0000000..1bdee9b
--- /dev/null
+++ b/themes/aediroum/layouts/section/calendrier.html
@@ -0,0 +1,83 @@
+{{ define "main" }}
+  <h3>{{ .Title }}</h3>
+
+  {{ .Content }}
+
+  <p>
+    <strong>Abonnement via</strong>
+    <a href="webcal://bot.aediroum.ca/events.ics">Calendrier iCal</a>
+  </p>
+
+  <p>
+    <button class="btn btn-dark" id="events-fullscreen">Passer en plein écran</button>
+  </p>
+
+  <div id="events-calendar"></div>
+{{ end }}
+
+{{ define "scripts" }}
+  <script src="https://cdn.jsdelivr.net/npm/ical.js@1.5.0/build/ical.min.js" integrity="sha256-uotVKltUv5neKsIlZxrxUccba0PaptusFj6p+w8Sons=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js" integrity="sha256-ZztCtsADLKbUFK/X6nOYnJr0eelmV2X3dhLDB/JK6fM=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@6.1.15/index.global.min.js" integrity="sha256-4zHPHslCgpks0gXVzHuFcF3aL1y674HH8L9s3vQiJK4=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.15/locales-all.global.min.js" integrity="sha256-lzem0W8FCaLegnCNhEQnF4bMnpq9Du4IiUDonSOXCA8=" crossorigin="anonymous"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const calendarEl = document.getElementById("events-calendar");
+      const fullscreenEl = document.getElementById("events-fullscreen");
+
+      fullscreenEl.addEventListener("click", () => {
+        calendarEl.requestFullscreen();
+      });
+
+      const calendar = new FullCalendar.Calendar(calendarEl, {
+        /* Paramètres de langue. */
+        locale: "fr",
+        firstDay: 0,
+
+        /* Configuration des vues de calendrier. */
+        contentHeight: 500,
+        initialView: "dayGridNextDays",
+        headerToolbar: {
+          center: "dayGridNextDays,dayGridMonth",
+        },
+        views: {
+          dayGridNextDays: {
+            type: "dayGrid",
+            duration: { days: 4 },
+            buttonText: "À venir"
+          },
+        },
+
+        /* Charge le contenu depuis le flux ICS externe. */
+        events: {
+          url: "https://bot.aediroum.ca/events.ics",
+          format: "ics",
+        },
+
+        /* Navigue vers la vue par journée lors du clic sur une date du mois. */
+        navLinks: true,
+        navLinkDayClick: function(date, jsEvent) {
+          calendar.changeView("dayGridNextDays", date);
+        },
+
+        /* Change le rendu des événements pour ajouter la localisation. */
+        eventContent: function(info, createElement) {
+          const time = document.createElement("div");
+          time.className = "fc-event-time";
+          time.textContent = info.timeText;
+
+          const title = document.createElement("div");
+          title.className = "fc-event-title";
+          title.textContent = info.event.title;
+
+          const location = document.createElement("div");
+          location.className = "fc-event-location";
+          location.textContent = info.event.extendedProps.location;
+
+          return {domNodes: [time, title, location]};
+        },
+      });
+      calendar.render();
+    });
+</script>
+{{ end }}
diff --git a/themes/aediroum/static/css/style.css b/themes/aediroum/static/css/style.css
index 700b950..2aed9e2 100644
--- a/themes/aediroum/static/css/style.css
+++ b/themes/aediroum/static/css/style.css
@@ -27,7 +27,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #1E1E1E;
-    --background-highlight: #3E3E3E;
+    --background-highlight: #2B2B2B;
     --foreground: #FAFAFA;
     --foreground-muted: #A0A0A0;
 
@@ -217,6 +217,24 @@ button {
 
 /* Calendrier */
 
+.fc:fullscreen {
+  padding: 4em;
+  background-color: var(--background);
+}
+
+.fc-view {
+  overflow: scroll;
+}
+
+.fc-scrollgrid {
+  min-width: 696px;
+}
+
+/** En-tête **/
+.fc .fc-toolbar {
+  flex-flow: row wrap;
+}
+
 .fc .fc-toolbar-title {
   font-size: 1.4em;
 }
@@ -249,31 +267,37 @@ button {
   background-color: var(--background-highlight);
 }
 
-.fc-daygrid-dot-event {
-  align-items: start;
+.fc-event .fc-event-time::before {
+  display: inline-block;
+  content: "";
+  border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);
+  border-radius: calc(var(--fc-daygrid-event-dot-width)/2);
+  box-sizing: content-box;
+  height: 0px;
+  margin: 0px 4px;
+  width: 0px;
 }
 
-.fc-daygrid-event-dot {
-  margin: .5em .25em;
+/** Affichage par mois **/
+.fc-dayGridMonth-view .fc-event .fc-event-location {
+  display: none;
 }
 
-.fc-dayGridFourDay-view .fc-daygrid-dot-event {
+/** Affichage par journées **/
+.fc-dayGridNextDays-view .fc-daygrid-dot-event {
   flex-flow: row wrap;
+  font-size: 1em;
+  padding: .5em;
 }
 
-.fc-dayGridFourDay-view .fc-event::before {
-  order: 1;
-  content: "";
+.fc-dayGridNextDays-view .fc-event .fc-event-time,
+.fc-dayGridNextDays-view .fc-event .fc-event-title,
+.fc-dayGridNextDays-view .fc-event .fc-event-location {
+  padding: 0 .25em;
+  white-space: normal;
   width: 100%;
 }
 
-.fc-dayGridFourDay-view .fc-event .fc-daygrid-event-dot,
-.fc-dayGridFourDay-view .fc-event .fc-event-time {
-  order: 1;
-}
-
-.fc-dayGridFourDay-view .fc-event .fc-event-title {
-  order: 2;
-  padding: 0 .25em;
-  white-space: normal;
+.fc-dayGridNextDays-view .fc-event .fc-event-location {
+  font-style: italic;
 }