Responsive design
This commit is contained in:
parent
6328c0342e
commit
f0db19a89f
|
@ -21,11 +21,12 @@
|
|||
|
||||
let openModal = false;
|
||||
const toggle = () => (openModal = !openModal);
|
||||
const mobile = window.innerWidth < 765;
|
||||
|
||||
let calendar;
|
||||
|
||||
let options = writable({
|
||||
initialView: window.innerWidth < 765 ? 'listWeek' : 'timeGridWeek',
|
||||
initialView: mobile ? 'listWeek' : 'timeGridWeek',
|
||||
plugins: [
|
||||
timeGridPlugin,
|
||||
dayGridPlugin,
|
||||
|
@ -37,9 +38,11 @@
|
|||
locale: frLocale,
|
||||
allDayContent: '',
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
left: mobile ? false : 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,listWeek'
|
||||
right: mobile
|
||||
? 'prev,today,next dayGridMonth,timeGridWeek,listWeek'
|
||||
: 'dayGridMonth,timeGridWeek,listWeek'
|
||||
},
|
||||
height: '100%',
|
||||
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
|
||||
|
@ -49,7 +52,11 @@
|
|||
openModal = true;
|
||||
event.set(info.event);
|
||||
},
|
||||
titleFormat: { year: '2-digit', month: 'numeric', day: 'numeric' },
|
||||
titleFormat: {
|
||||
year: mobile ? '2-digit' : 'numeric',
|
||||
month: mobile ? 'numeric' : 'long',
|
||||
day: 'numeric'
|
||||
},
|
||||
events: [],
|
||||
themeSystem: 'bootstrap5'
|
||||
});
|
||||
|
@ -82,8 +89,8 @@
|
|||
$: updateEvents(selectedCalendars);
|
||||
</script>
|
||||
|
||||
<div class="app-container">
|
||||
<h1 class="title">Calendrier de la vie étudiante à l'ENS</h1>
|
||||
<div class="h-100 d-flex flex-column">
|
||||
<h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
|
||||
|
||||
<FilterBar {calendarTree} bind:selected={selectedCalendars} />
|
||||
|
||||
|
@ -95,28 +102,20 @@
|
|||
|
||||
<EventModal event={$event} open={openModal} {toggle} />
|
||||
</div>
|
||||
<div class="fc-toolbar-title" />
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
max-width: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
@media (max-width: 765px) {
|
||||
:global(.fc-header-toolbar) {
|
||||
flex-direction: column;
|
||||
}
|
||||
:global(.fc-toolbar-title) {
|
||||
margin-bottom: 0.25em !important;
|
||||
}
|
||||
:global(.fc-toolbar-chunk) {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
const toggle = () => (open = !open);
|
||||
</script>
|
||||
|
||||
<Button on:click={toggle} class="my-2">
|
||||
<Button on:click={toggle} class="mb-3 col-6 mx-auto">
|
||||
<span class="me-2">Sélection des calendriers</span>
|
||||
<Icon name="chevron-double-right" />
|
||||
</Button>
|
||||
|
|
Loading…
Reference in a new issue