From df690a62893468f171a95c18709a28e288cdd764 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Thu, 28 Jul 2022 18:43:40 +0200
Subject: [PATCH] Better print quality

---
 src/App.svelte   | 22 ++++++++++++++++++++++
 src/Help.svelte  |  2 +-
 src/Share.svelte |  7 ++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 78eda8d..626cb72 100644
--- a/src/App.svelte
+++ b/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) {
+      display: none !important;
+    }
+  }
 </style>
diff --git a/src/Help.svelte b/src/Help.svelte
index 912dfbe..7afe4c6 100644
--- a/src/Help.svelte
+++ b/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>
 
diff --git a/src/Share.svelte b/src/Share.svelte
index db8dd30..c6f2b7e 100644
--- a/src/Share.svelte
+++ b/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>