Improve mobile view
This commit is contained in:
parent
875cac536f
commit
3f95e2811a
|
@ -35,7 +35,7 @@
|
||||||
|
|
||||||
{#if showModal}
|
{#if showModal}
|
||||||
<ModalCard {card} />
|
<ModalCard {card} />
|
||||||
{:else}{/if}
|
{/if}
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.card {
|
.card {
|
||||||
|
|
|
@ -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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue