Merge pull request 'Better print quality' (#43) from thubrecht/print into master

Reviewed-on: https://git.rz.ens.wtf/Klub-RZ/metis/pulls/43

src/App.svelte

@@ -15,6 +15,7 @@
   import Help from './Help.svelte';
   import Share from './Share.svelte';
   import Spinner from './Spinner.svelte';
+  import { Icon } from 'sveltestrap';
 
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -178,6 +179,14 @@
 <div class="h-100 d-flex flex-column">
   <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
 
+  <span
+    class="print-toggle fs-4 no-print"
+    title="Imprimer"
+    on:click={() => window.print()}
+  >
+    <Icon name="printer" />
+  </span>
+
   <Share {calendar} {selectedCalendars} />
   <Help />
 
@@ -189,6 +198,13 @@
 </div>
 
 <style>
+  .print-toggle {
+    cursor: pointer;
+    position: absolute;
+    top: 0.75em;
+    left: 1em;
+  }
+
   :global(.fs-7) {
     font-size: 0.9rem !important;
   }
@@ -229,4 +245,10 @@
       width: 100%;
     }
   }
+
+  @media print {
+    :global(.no-print, .btn, .tooltip, .offcanvas, .offcanvas-backdrop, .load-spinner) {
+      display: none !important;
+    }
+  }
 </style>

src/Help.svelte

@@ -5,7 +5,7 @@
   const toggle = () => (isOpen = !isOpen);
 </script>
 
-<span class="help-toggle fs-4" on:click={toggle}>
+<span class="help-toggle fs-4 no-print" on:click={toggle}>
   <Icon name="question-circle" />
 </span>
 

src/Share.svelte

@@ -69,7 +69,12 @@
   </Toast>
 </div>
 
-<span class="share-btn fs-4" data-bs-toggle="tooltip" title="Partager" on:click={toggle}>
+<span
+  class="share-btn fs-4 no-print"
+  data-bs-toggle="tooltip"
+  title="Partager"
+  on:click={toggle}
+>
   <Icon name="share" />
 </span>