Rajoute un message d'aide

src/App.svelte

@@ -12,6 +12,7 @@
   import FilterBar from './FilterBar.svelte';
   import { mkSource, calendarTree } from './calendar';
   import { debounce } from 'lodash';
+  import Help from './Help.svelte';
 
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -85,6 +86,8 @@
 <div class="h-100 d-flex flex-column">
   <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
 
+  <Help />
+
   <FilterBar {calendarTree} bind:selected={selectedCalendars} />
 
   <FullCalendar bind:this={calendar} options={$options} />
@@ -93,6 +96,10 @@
 </div>
 
 <style>
+  :global(.fs-7) {
+    font-size: 0.9rem !important;
+  }
+
   :global(.st-tentative) {
     opacity: 40%;
   }

src/EventModal.svelte

@@ -18,9 +18,9 @@
 <Modal isOpen={open} {toggle} centered scrollable>
   <ModalHeader {toggle}>
     <span class="pe-3">
-      <Badge color="custom" style="background-color:{event.backgroundColor}"
+      <Badge color="custom" style="background-color:{event.backgroundColor}">
-        >{event.extendedProps.calendar}</Badge
+        {event.extendedProps.calendar}
-      >
+      </Badge>
     </span>
     <b>{event.extendedProps.short_name}</b>
   </ModalHeader>
@@ -40,24 +40,24 @@
     {#if event.extendedProps.description}
       {@html md.render(event.extendedProps.description)}
     {:else}
-      <i>Pas de description</i>
+      <i class="fs-7">Pas de description</i>
     {/if}
   </ModalBody>
 
   <ModalFooter class="justify-content-between">
     <span>
       {#if event.extendedProps.location}
-        <Icon name="geo" />
+        <Icon name="geo" class="text-success" />
         <span class="ms-1">{event.extendedProps.location}</span>
       {/if}
     </span>
 
     <span>
       {#if event.allDay}
-        <Icon name="calendar-range" />
+        <Icon name="calendar-range" class="text-primary" />
         <span class="ms-1">{dateFormat(event.start)} - {dateFormat(event.end)}</span>
       {:else}
-        <Icon name="clock-history" />
+        <Icon name="clock-history" class="text-primary" />
         <span class="ms-1">{timeFormat(event.start)} - {timeFormat(event.end)}</span>
       {/if}
     </span>

src/Help.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon } from 'sveltestrap';
+
+  let isOpen = true;
+  const toggle = () => (isOpen = !isOpen);
+</script>
+
+<span class="help-toggle fs-4" on:click={toggle}>
+  <Icon name="question-circle" />
+</span>
+
+<Modal {isOpen} {toggle} centered scrollable>
+  <ModalHeader {toggle}>
+    <Icon name="question-circle" class="text-primary me-2" />
+    <b>Aide</b>
+  </ModalHeader>
+
+  <ModalBody>
+    <p>Calendrier commun de la vie étudiante de l'ENS</p>
+    <b>Comment rajouter son calendrier :</b>
+    <ul>
+      <li>
+        Utiliser un NextCloud, idéalement
+        <a href="https://cloud.eleves.ens.fr">cloud.eleves.ens.fr</a>, ou
+        <a href="https://framagenda.org">Framagenda</a>.
+      </li>
+      <li>Créer un calendrier dessus, créer un lien de partage public.</li>
+      <li>
+        Envoyer le lien de partage public au Club Réseau<br />
+        (club-reseau [at] lists [.] ens [.] psl [.] eu) pour faire une requête d'ajout.
+      </li>
+    </ul>
+  </ModalBody>
+
+  <ModalFooter>
+    <Icon name="balloon-heart" class="text-danger fs-5" />
+    <span class="fs-7">Propulsé par le Club Réseau de l'ENS</span>
+  </ModalFooter>
+</Modal>
+
+<style>
+  .help-toggle {
+    position: absolute;
+    top: 0.75em;
+    right: 1em;
+    cursor: pointer;
+  }
+</style>

src/TriStateCheckbox.svelte

@@ -26,9 +26,7 @@
 </script>
 
 <span class="cal w-100 d-block" on:click={handleClick}>
-  <span class="ms-2">
+  <Icon name={icon} class="ms-2" />
-    <Icon name={icon} />
-  </span>
   <span class="ms-1">{value}</span>
   {#if collapsed !== undefined}
     <span class="float-end" on:click|stopPropagation={() => (collapsed = !collapsed)}>
@@ -45,7 +43,6 @@
   }
 
   .cal:hover {
-    /* background-color: #62a1fe; */
     background-color: #6c757d;
     color: #fff;
   }