monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-08 18:30:40 +09:00
parent 8709487cd5
commit f8ed6b1a54
7 changed files with 8 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/components/MkWindow.vue
View file

@ -29,7 +29,7 @@
<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button> <button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
</span> </span>
</div> </div>
<div v-container :class="$style.content"> <div :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -541,7 +541,7 @@ defineExpose({
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--panel); background: var(--panel);
container-type: inline-size; container-type: size;
} }
$handleSize: 8px; $handleSize: 8px;

21
packages/frontend/src/directives/container.ts
View file

@ -1,21 +0,0 @@
import { Directive } from 'vue';
const map = new WeakMap<HTMLElement, ResizeObserver>();
export default {
mounted(el: HTMLElement, binding, vn) {
const ro = new ResizeObserver((entries, observer) => {
el.style.setProperty('--containerHeight', el.offsetHeight + 'px');
});
ro.observe(el);
map.set(el, ro);
},
unmounted(el, binding, vn) {
const ro = map.get(el);
if (ro) {
ro.disconnect();
map.delete(el);
}
},
} as Directive;

2
packages/frontend/src/directives/index.ts
View file

@ -11,7 +11,6 @@ import clickAnime from './click-anime';
import panel from './panel'; import panel from './panel';
import adaptiveBorder from './adaptive-border'; import adaptiveBorder from './adaptive-border';
import adaptiveBg from './adaptive-bg'; import adaptiveBg from './adaptive-bg';
import container from './container';
export default function(app: App) { export default function(app: App) {
for (const [key, value] of Object.entries(directives)) { for (const [key, value] of Object.entries(directives)) {
@ -32,5 +31,4 @@ export const directives = {
'panel': panel, 'panel': panel,
'adaptive-border': adaptiveBorder, 'adaptive-border': adaptiveBorder,
'adaptive-bg': adaptiveBg, 'adaptive-bg': adaptiveBg,
'container': container,
}; };

2
packages/frontend/src/pages/channel.vue
View file

@ -206,7 +206,7 @@ definePageMetadata(computed(() => channel ? {
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
} }
.footer { .footer {

2
packages/frontend/src/pages/my-lists/list.vue
View file

@ -131,7 +131,7 @@ definePageMetadata(computed(() => list ? {
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
} }
.userItem { .userItem {

4
packages/frontend/src/ui/deck/column.vue
View file

@ -22,7 +22,7 @@
<span :class="$style.title"><slot name="header"></slot></span> <span :class="$style.title"><slot name="header"></slot></span>
<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button> <button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</header> </header>
<div v-show="active" ref="body" v-container :class="$style.body"> <div v-show="active" ref="body" :class="$style.body">
<slot></slot> <slot></slot>
</div> </div>
</section> </section>
@ -362,7 +362,7 @@ function onDrop(ev) {
overflow-x: clip; overflow-x: clip;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
box-sizing: border-box; box-sizing: border-box;
container-type: inline-size; container-type: size;
background-color: var(--bg); background-color: var(--bg);
} }
</style> </style>

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

@ -2,10 +2,10 @@
<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]"> <div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer v-container :class="$style.contents"> <MkStickyContainer :class="$style.contents">
<template #header><XStatusBars :class="$style.statusbars"/></template> <template #header><XStatusBars :class="$style.statusbars"/></template>
<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu"> <main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
<div :class="$style.content" style="container-type: inline-size;"> <div :class="$style.content" style="container-type: size;">
<RouterView/> <RouterView/>
</div> </div>
<div :class="$style.spacer"></div> <div :class="$style.spacer"></div>