heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

enhance(client): snap scroll on deck

Browse source
This commit is contained in:
syuilo 2023-02-19 19:54:19 +09:00
parent 2e76fcdf6f
commit 47b6f466ec
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/frontend/src/ui/deck.vue
View file

@ -4,7 +4,7 @@
<div :class="$style.main"> <div :class="$style.main">
<XStatusBars/> <XStatusBars/>
<div ref="columnsEl" :class="[$style.columns, deckStore.reactiveState.columnAlign.value]" @contextmenu.self.prevent="onContextmenu"> <div ref="columnsEl" :class="[$style.columns, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
<template v-for="ids in layout"> <template v-for="ids in layout">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section <section
@ -115,6 +115,7 @@ window.addEventListener('resize', () => {
isMobile.value = window.innerWidth <= 500; isMobile.value = window.innerWidth <= 500;
}); });
const snapScroll = isMobile;
const drawerMenuShowing = ref(false); const drawerMenuShowing = ref(false);
const route = 'TODO'; const route = 'TODO';
@ -297,9 +298,14 @@ async function deleteProfile() {
margin-right: auto; margin-right: auto;
} }
} }
&.snapScroll {
scroll-snap-type: x mandatory;
}
} }
.column { .column {
scroll-snap-align: start;
flex-shrink: 0; flex-shrink: 0;
border-right: solid var(--deckDividerThickness) var(--deckDivider); border-right: solid var(--deckDividerThickness) var(--deckDivider);