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

refactor(client): use css modules

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