Rajoute un message d'aide

This commit is contained in:
Tom Hubrecht 2022-03-13 18:35:47 +01:00
parent ed6ea39d3c
commit b19ef82b6d
4 changed files with 63 additions and 11 deletions

View file

@ -12,6 +12,7 @@
import FilterBar from './FilterBar.svelte'; import FilterBar from './FilterBar.svelte';
import { mkSource, calendarTree } from './calendar'; import { mkSource, calendarTree } from './calendar';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import Help from './Help.svelte';
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';
@ -85,6 +86,8 @@
<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>
<Help />
<FilterBar {calendarTree} bind:selected={selectedCalendars} /> <FilterBar {calendarTree} bind:selected={selectedCalendars} />
<FullCalendar bind:this={calendar} options={$options} /> <FullCalendar bind:this={calendar} options={$options} />
@ -93,6 +96,10 @@
</div> </div>
<style> <style>
:global(.fs-7) {
font-size: 0.9rem !important;
}
:global(.st-tentative) { :global(.st-tentative) {
opacity: 40%; opacity: 40%;
} }

View file

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

48
src/Help.svelte Normal file
View file

@ -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>

View file

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