refactor(client): use css modules
This commit is contained in:
parent
d10e000883
commit
3f033d6ab7
@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss" module>
|
||||
@keyframes earwiggleleft {
|
||||
from { transform: rotate(37.6deg) skew(30deg); }
|
||||
25% { transform: rotate(10deg) skew(30deg); }
|
||||
@ -68,9 +68,7 @@ watch(() => props.user.avatarBlurhash, () => {
|
||||
75% { transform: rotate(0deg) skew(-30deg); }
|
||||
to { transform: rotate(-37.6deg) skew(-30deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
@ -7,7 +7,7 @@
|
||||
<XSidebar/>
|
||||
</div>
|
||||
<div v-else ref="widgetsLeft" class="widgets left">
|
||||
<XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/>
|
||||
<XWidgets place="left" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
</div>
|
||||
|
||||
<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
|
||||
@ -17,7 +17,7 @@
|
||||
</main>
|
||||
|
||||
<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/>
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -80,7 +80,7 @@ provide('shouldHeaderThin', showMenuOnTop);
|
||||
provide('forceSpacerMin', true);
|
||||
|
||||
function attachSticky(el) {
|
||||
const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
|
||||
const sticky = new StickySidebar(el, 0, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
@ -248,7 +248,6 @@ onMounted(() => {
|
||||
> .widgets {
|
||||
//--panelBorder: none;
|
||||
width: 300px;
|
||||
margin-top: 16px;
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
|
@ -13,7 +13,7 @@
|
||||
</MkStickyContainer>
|
||||
|
||||
<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets">
|
||||
<XWidgets @mounted="attachSticky"/>
|
||||
<XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/>
|
||||
</div>
|
||||
|
||||
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
|
||||
@ -26,7 +26,12 @@
|
||||
<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||
</div>
|
||||
|
||||
<Transition :name="$store.state.animation ? 'menuDrawer-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.menuDrawerBg"
|
||||
@ -36,11 +41,21 @@
|
||||
></div>
|
||||
</Transition>
|
||||
|
||||
<Transition :name="$store.state.animation ? 'menuDrawer' : ''">
|
||||
<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 : ''"
|
||||
>
|
||||
<XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
|
||||
</Transition>
|
||||
|
||||
<Transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
|
||||
<Transition
|
||||
:enter-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
|
||||
:leave-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
|
||||
:enter-from-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
|
||||
:leave-to-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
|
||||
>
|
||||
<div
|
||||
v-if="widgetsShowing"
|
||||
:class="$style.widgetsDrawerBg"
|
||||
@ -50,8 +65,15 @@
|
||||
></div>
|
||||
</Transition>
|
||||
|
||||
<Transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
|
||||
<XWidgets v-if="widgetsShowing" :class="$style.widgetsDrawer"/>
|
||||
<Transition
|
||||
:enter-active-class="$store.state.animation ? $style.transition_widgetsDrawer_enterActive : ''"
|
||||
:leave-active-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
|
||||
:enter-from-class="$store.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
|
||||
:leave-to-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
|
||||
>
|
||||
<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
|
||||
<XWidgets/>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<XCommon/>
|
||||
@ -176,55 +198,53 @@ function top() {
|
||||
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.widgetsDrawer-enter-active,
|
||||
.widgetsDrawer-leave-active {
|
||||
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);
|
||||
}
|
||||
.widgetsDrawer-enter-from,
|
||||
.widgetsDrawer-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
<style lang="scss" module>
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$widgets-hide-threshold: 1090px;
|
||||
|
||||
.widgetsDrawer-back-enter-active,
|
||||
.widgetsDrawer-back-leave-active {
|
||||
.transition_menuDrawerBg_enterActive,
|
||||
.transition_menuDrawerBg_leaveActive {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.widgetsDrawer-back-enter-from,
|
||||
.widgetsDrawer-back-leave-active {
|
||||
.transition_menuDrawerBg_enterFrom,
|
||||
.transition_menuDrawerBg_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menuDrawer-enter-active,
|
||||
.menuDrawer-leave-active {
|
||||
.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);
|
||||
}
|
||||
.menuDrawer-enter-from,
|
||||
.menuDrawer-leave-active {
|
||||
.transition_menuDrawer_enterFrom,
|
||||
.transition_menuDrawer_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
.menuDrawer-back-enter-active,
|
||||
.menuDrawer-back-leave-active {
|
||||
.transition_widgetsDrawerBg_enterActive,
|
||||
.transition_widgetsDrawerBg_leaveActive {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.menuDrawer-back-enter-from,
|
||||
.menuDrawer-back-leave-active {
|
||||
.transition_widgetsDrawerBg_enterFrom,
|
||||
.transition_widgetsDrawerBg_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
$ui-font-size: 1em; // TODO: どこかに集約したい
|
||||
$widgets-hide-threshold: 1090px;
|
||||
.transition_widgetsDrawer_enterActive,
|
||||
.transition_widgetsDrawer_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);
|
||||
}
|
||||
.transition_widgetsDrawer_enterFrom,
|
||||
.transition_widgetsDrawer_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(240px);
|
||||
}
|
||||
|
||||
.root {
|
||||
min-height: 100dvh;
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="efzpzdvf" :class="{ universal: !classic, classic }">
|
||||
<XWidgets :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
||||
<div :class="$style.root" :style="{ paddingTop: marginTop }">
|
||||
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
|
||||
|
||||
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
|
||||
<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
|
||||
@ -21,10 +21,10 @@ const props = withDefaults(defineProps<{
|
||||
// left = place: leftだけを表示
|
||||
// right = rightとnullを表示
|
||||
place?: 'left' | null | 'right';
|
||||
classic?: boolean;
|
||||
marginTop?: string;
|
||||
}>(), {
|
||||
place: null,
|
||||
classic: false,
|
||||
marginTop: '0',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -81,31 +81,15 @@ function updateWidgets(thisWidgets) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.efzpzdvf {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.universal {
|
||||
padding-top: var(--margin);
|
||||
|
||||
> * {
|
||||
margin: var(--margin) 0;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
.widgets {
|
||||
width: 300px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .add {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -59,7 +59,11 @@ export default defineConfig(({ command, mode }) => {
|
||||
css: {
|
||||
modules: {
|
||||
generateScopedName: (name, filename, css) => {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4);
|
||||
} else {
|
||||
return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4) + '-' + name;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user