frontend: aligned file-sizes
Massimo Melina committed
Feb 9, 2023 at 17:43 UTC
bc5dcf73335b99ab1f34e4564cb70d61c664f662
3 files changed
+20
-13
frontend/src/BrowseFiles.ts
+12
-5
@@ -192,7 +192,7 @@ function fixUrl(s:string) {
192
return s.replace(/[#%]/g, encodeURIComponent)
193
}
194
195
-const EntryProps = memo(function(entry: DirEntry & { midnight: Date }) {
195
+const EntryProps = memo((entry: DirEntry & { midnight: Date }) => {
196
const { t, s } = entry
197
const today = t && t > entry.midnight
198
const shortTs = isMobile()
@@ -200,10 +200,7 @@ const EntryProps = memo(function(entry: DirEntry & { midnight: Date }) {
200
[entry])
201
return h('div', { className: 'entry-props' },
202
h(Html, { code, className: 'add-props' }),
203
- s !== undefined && h(Fragment, {},
204
- h('span', { className: 'entry-size' }, formatBytes(s)),
205
- " — ",
206
- ),
203
+ h(EntrySize, { s }),
204
t && h('span', {
205
className: 'entry-ts',
206
title: today || !shortTs ? null : t.toLocaleString(),
@@ -213,4 +210,14 @@ const EntryProps = memo(function(entry: DirEntry & { midnight: Date }) {
210
}
211
}, !shortTs ? t.toLocaleString() : today ? t.toLocaleTimeString() : t.toLocaleDateString()),
212
)
213
+})
214
+
215
+const EntrySize = memo(({ s }: { s: DirEntry['s'] }) => {
216
+ if (s === undefined) return null
217
+ const a = formatBytes(s).split(' ')
218
+ return h(Fragment, {},
219
+ h('span', { className: 'entry-size' }, a[0],
220
+ h('span', { className: 'entry-size-unit' }, a[1])),
221
+ " — ",
222
+ )
223
})
\ No newline at end of file
frontend/src/index.scss
+7
-7
@@ -178,7 +178,7 @@ ul.dir {
178
& li {
179
display: block;
180
list-style-type: none;
181
- margin-bottom: 0.3em;
181
+ margin-bottom: 0.1em;
182
padding: 0.3em;
183
border-top: 1px solid var(--button-bg);
184
@@ -199,14 +199,14 @@ ul.dir {
199
& .entry-props {
200
float: right;
201
font-size: 90%;
202
- margin-left: 12px;
203
- margin-top: 0.2em;
202
+ margin-left: 4px;
203
+ margin-top: 0.3em;
204
+ font-variant-numeric: tabular-nums; /* trick to get stuff aligned */
205
205
- & .icon {
206
- margin:0 .3em;
207
- }
208
- & .entry-size {
206
+ & .entry-size-unit {
207
display:inline-block;
208
+ margin-left: .3em;
209
+ width: 1.5em;
210
}
211
}
212
&.page-separator {
plugins/download-counter/public/hits.js
+1
-1
@@ -1,5 +1,5 @@
1
HFS.onEvent('additionalEntryProps', ({ entry }) => {
2
const n = entry.hits
3
if (typeof n === 'number')
4
- return 'Hits: ' + n + ' - '
4
+ return 'Hits: ' + n + ' — '
5
})