mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-25 15:46:17 +09:00
Code

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo 2022-06-25 00:03:59 +09:00
parent 03973654b5
commit 734fe9fd9d
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/client/src/components/file-list-for-admin.vue
View File

@ -8,6 +8,7 @@
:to="`/admin/file/${file.id}`" :to="`/admin/file/${file.id}`"
class="file _button" class="file _button"
> >
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div v-if="viewMode === 'list'" class="body"> <div v-if="viewMode === 'list'" class="body">
<div> <div>
@ -15,14 +16,14 @@
</div> </div>
<div> <div>
<MkAcct v-if="file.user" :user="file.user"/> <MkAcct v-if="file.user" :user="file.user"/>
<div v-else>{{ $ts.system }}</div> <div v-else>{{ i18n.ts.system }}</div>
</div> </div>
<div> <div>
<span style="margin-right: 1em;">{{ file.type }}</span> <span style="margin-right: 1em;">{{ file.type }}</span>
<span>{{ bytes(file.size) }}</span> <span>{{ bytes(file.size) }}</span>
</div> </div>
<div> <div>
<span>{{ $ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span> <span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
</div> </div>
</div> </div>
</MkA> </MkA>
@ -47,6 +48,11 @@ const props = defineProps<{
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes sensitive-blink {
0% { opacity: 1; }
50% { opacity: 0; }
}
.urempief { .urempief {
margin-top: var(--margin); margin-top: var(--margin);
@ -86,12 +92,26 @@ const props = defineProps<{
margin: var(--margin) 0; margin: var(--margin) 0;
> .file { > .file {
position: relative;
aspect-ratio: 1; aspect-ratio: 1;
> .thumbnail { > .thumbnail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
> .sensitive-label {
position: absolute;
z-index: 10;
top: 8px;
left: 8px;
padding: 2px 4px;
background: #ff0000bf;
color: #fff;
border-radius: 4px;
font-size: 85%;
animation: sensitive-blink 1s infinite;
}
} }
} }
} }