Better print quality

This commit is contained in:
Tom Hubrecht 2022-07-28 18:43:40 +02:00
parent 43b6dbcba1
commit df690a6289
3 changed files with 29 additions and 2 deletions

View file

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

View file

@ -5,7 +5,7 @@
const toggle = () => (isOpen = !isOpen); const toggle = () => (isOpen = !isOpen);
</script> </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" /> <Icon name="question-circle" />
</span> </span>

View file

@ -69,7 +69,12 @@
</Toast> </Toast>
</div> </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" /> <Icon name="share" />
</span> </span>