Update MkDrive.vue

This commit is contained in:
syuilo 2025-05-10 15:35:41 +09:00
parent c98d72e6e1
commit 796b0c3706
1 changed files with 63 additions and 59 deletions

View File

@ -44,7 +44,6 @@ SPDX-License-Identifier: AGPL-3.0-only
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
> >
<div ref="contents">
<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo> <MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
<div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders"> <div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders">
<XFolder <XFolder
@ -73,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()"> <MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
<template #header> <template #header>
<div :class="$style.date"> <div :class="$style.date">
<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}/{{ item.date.getDate() }}</span> <span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
</div> </div>
</template> </template>
@ -101,7 +100,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
</div>
<div v-if="draghover" :class="$style.dropzone"></div> <div v-if="draghover" :class="$style.dropzone"></div>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -712,9 +710,6 @@ onBeforeUnmount(() => {
} }
.main { .main {
flex: 1;
overflow: auto;
padding: var(--MI-margin);
user-select: none; user-select: none;
&.fetching { &.fetching {
@ -733,6 +728,15 @@ onBeforeUnmount(() => {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 12px; grid-gap: 12px;
padding: var(--MI-margin);
}
.date {
padding: 8px 16px;
font-size: 90%;
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
} }
.empty { .empty {