41e8c78ecd
- Major refactoring that makes Doc a class with properties - Data made only shallow reactive, for a good speedup of initial load - Minor bugfixes and UX improvements along the way - Fixed handling of hash and question marks in URLs (was confusing Vue Router) - Search made stricter to find good results (not ignore all punctuation) Reviewed-on: #5
44 lines
923 B
Vue
44 lines
923 B
Vue
<template>
|
|
<td class="size right" :class=sizeClass>{{ doc.sizedisp }}</td>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Doc } from '@/repositories/Document'
|
|
import { computed } from 'vue'
|
|
|
|
const sizeClass = computed(() => {
|
|
const unit = props.doc.sizedisp.split('\u202F').slice(-1)[0]
|
|
return +unit ? "bytes" : unit
|
|
})
|
|
|
|
const props = defineProps<{
|
|
doc: Doc
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.size.empty { color: #555 }
|
|
.size.bytes { color: #77a }
|
|
.size.kB { color: #474 }
|
|
.size.MB { color: #a80 }
|
|
.size.GB { color: #f83 }
|
|
.size.TB, .size.PB, .size.EB, .size.huge {
|
|
color: #f44;
|
|
text-shadow: 0 0 .2em;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.size.empty { color: #bbb }
|
|
.size.bytes { color: #99d }
|
|
.size.kB { color: #aea }
|
|
.size.MB { color: #ff4 }
|
|
.size.GB { color: #f86 }
|
|
.size.TB, .size.PB, .size.EB, .size.huge { color: #f55 }
|
|
}
|
|
|
|
.cursor .size {
|
|
color: inherit;
|
|
text-shadow: none;
|
|
}
|
|
</style>
|