Responsive design

src/App.svelte

@@ -21,11 +21,12 @@
 
   let openModal = false;
   const toggle = () => (openModal = !openModal);
+  const mobile = window.innerWidth < 765;
 
   let calendar;
 
   let options = writable({
-    initialView: window.innerWidth < 765 ? 'listWeek' : 'timeGridWeek',
+    initialView: mobile ? 'listWeek' : 'timeGridWeek',
     plugins: [
       timeGridPlugin,
       dayGridPlugin,
@@ -37,9 +38,11 @@
     locale: frLocale,
     allDayContent: '',
     headerToolbar: {
-      left: 'prev,next today',
+      left: mobile ? false : 'prev,next today',
       center: 'title',
-      right: 'dayGridMonth,timeGridWeek,listWeek'
+      right: mobile
+        ? 'prev,today,next dayGridMonth,timeGridWeek,listWeek'
+        : 'dayGridMonth,timeGridWeek,listWeek'
     },
     height: '100%',
     schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
@@ -49,7 +52,11 @@
       openModal = true;
       event.set(info.event);
     },
-    titleFormat: { year: '2-digit', month: 'numeric', day: 'numeric' },
+    titleFormat: {
+      year: mobile ? '2-digit' : 'numeric',
+      month: mobile ? 'numeric' : 'long',
+      day: 'numeric'
+    },
     events: [],
     themeSystem: 'bootstrap5'
   });
@@ -82,8 +89,8 @@
   $: updateEvents(selectedCalendars);
 </script>
 
-<div class="app-container">
-  <h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
+<div class="h-100 d-flex flex-column">
+  <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
 
   <FilterBar {calendarTree} bind:selected={selectedCalendars} />
 
@@ -95,28 +102,20 @@
 
   <EventModal event={$event} open={openModal} {toggle} />
 </div>
+<div class="fc-toolbar-title" />
 
 <style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  .title {
-    text-align: center;
-  }
-
-  .app-container {
-    display: flex;
-    flex-flow: column;
-    height: 100%;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
+  @media (max-width: 765px) {
+    :global(.fc-header-toolbar) {
+      flex-direction: column;
+    }
+    :global(.fc-toolbar-title) {
+      margin-bottom: 0.25em !important;
+    }
+    :global(.fc-toolbar-chunk) {
+      display: flex;
+      justify-content: space-evenly;
+      width: 100%;
     }
   }
 </style>

src/FilterBar.svelte

@@ -11,7 +11,7 @@
   const toggle = () => (open = !open);
 </script>
 
-<Button on:click={toggle} class="my-2">
+<Button on:click={toggle} class="mb-3 col-6 mx-auto">
   <span class="me-2">Sélection des calendriers</span>
   <Icon name="chevron-double-right" />
 </Button>