refactor(client): use css modules

This commit is contained in:
syuilo
2023-01-10 11:15:29 +09:00
parent d10e000883
commit 3f033d6ab7
5 changed files with 72 additions and 67 deletions

View File

@@ -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;