Improve mobile view

This commit is contained in:
Brieuc Dubois 2024-01-17 20:13:33 +01:00
parent 875cac536f
commit 3f95e2811a
4 changed files with 9 additions and 4 deletions

View File

@ -35,7 +35,7 @@
{#if showModal} {#if showModal}
<ModalCard {card} /> <ModalCard {card} />
{:else}{/if} {/if}
<style lang="less"> <style lang="less">
.card { .card {

View File

@ -137,10 +137,11 @@
.column { .column {
margin: 20px 10px; margin: 20px 10px;
width: 250px; flex: 0 0 250px;
.one-column({ .one-column({
scroll-snap-align: center; scroll-snap-align: center;
flex-basis: 80vw;
}); });
} }

View File

@ -126,7 +126,7 @@
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
.one-column({ .one-column({
padding-left: calc(50vw - (250px / 2)); padding: 0 10%;
}); });
} }
</style> </style>

View File

@ -56,12 +56,16 @@
{#each $views as view} {#each $views as view}
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role --> <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
<li <li
on:click={() => currentView.set(view)} on:click={() => {
currentView.set(view);
isVisible = false;
}}
role="button" role="button"
tabindex="0" tabindex="0"
on:keydown={(e) => { on:keydown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
currentView.set(view); currentView.set(view);
isVisible = false;
} }
}} }}
class:active={$currentView === view} class:active={$currentView === view}