chore(client): tweak ui
This commit is contained in:
parent
03973654b5
commit
734fe9fd9d
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue