Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-10 20:17:08 +09:00
parent e6d666e1ee
commit d2fc5a248b
2 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,7 +52,12 @@
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div>
<Transition :name="$store.state.animation ? 'menu-back' : ''">
<Transition
:enter-active-class="$store.state.animation ? $style.transition_menuDrawerBg_enterActive : ''"
:leave-active-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
:enter-from-class="$store.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
>
<div
v-if="drawerMenuShowing"
:class="$style.menuBg"
@ -62,8 +67,15 @@
></div>
</Transition>
<Transition :name="$store.state.animation ? 'menu' : ''">
<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
<Transition
:enter-active-class="$store.state.animation ? $style.transition_menuDrawer_enterActive : ''"
:leave-active-class="$store.state.animation ? $style.transition_menuDrawer_leaveActive : ''"
:enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
>
<div v-if="drawerMenuShowing" :class="$style.menu">
<XDrawerMenu/>
</div>
</Transition>
<XCommon/>
@ -222,31 +234,29 @@ async function deleteProfile() {
}
</script>
<style lang="scss" scoped>
.menu-enter-active,
.menu-leave-active {
<style lang="scss" module>
.transition_menuDrawerBg_enterActive,
.transition_menuDrawerBg_leaveActive {
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.transition_menuDrawerBg_enterFrom,
.transition_menuDrawerBg_leaveTo {
opacity: 0;
}
.transition_menuDrawer_enterActive,
.transition_menuDrawer_leaveActive {
opacity: 1;
transform: translateX(0);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-enter-from,
.menu-leave-active {
.transition_menuDrawer_enterFrom,
.transition_menuDrawer_leaveTo {
opacity: 0;
transform: translateX(-240px);
}
.menu-back-enter-active,
.menu-back-leave-active {
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-back-enter-from,
.menu-back-leave-active {
opacity: 0;
}
</style>
<style lang="scss" module>
.root {
$nav-hide-threshold: 650px; // TODO: どこかに集約したい

4
packages/frontend/src/ui/universal.vue
View file

@ -47,7 +47,9 @@
:enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
>
<XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
<div v-if="drawerMenuShowing" :class="$style.menuDrawer">
<XDrawerMenu/>
</div>
</Transition>
<Transition