file-show: better layout on mobile
Massimo Melina committed
Jan 31, 2024 at 23:31 UTC
2d3ba54605ad234e4456e5b93799e7427f023a74
2 files changed
+23
-25
frontend/src/index.scss
+3
-3
@@ -669,16 +669,16 @@ button .label {
669
&.nav-hidden { opacity: 0 }
670
}
671
.bar {
672
- padding: .5em 1em;
672
+ padding: .5em min(2vw, 1em);
673
background: var(--bg);
674
opacity: .8;
675
display: flex;
676
flex-wrap: wrap;
677
align-items: center;
678
justify-content: flex-end;
679
- gap: .5em 1.5em;
679
+ gap: .5em;
680
681
- .entry-details { font-size: smaller; }
681
+ .entry-details { font-size: smaller; margin-left: 1em; }
682
.entry-ts { display: inherit; font-size: smaller; }
683
.entry-size::after { display: none }
684
}
frontend/src/show.ts
+20
-22
@@ -93,28 +93,26 @@ export function fileShow(entry: DirEntry) {
93
h('div', { className: 'bar' },
94
h('div', { className: 'filename' }, cur.n),
95
h(EntryDetails, { entry: cur, midnight: useMidnight() }),
96
- h(Flex, {},
97
- useWindowSize().width > 1280 && iconBtn('?', showHelp),
98
- h('div', {}, // fuse buttons
99
- h(Btn, {
100
- className: 'small',
101
- label: t`Auto-play`,
102
- toggled: autoPlaying,
103
- onClick: () => setAutoPlaying(x => !x),
104
- }),
105
- autoPlaying && h(Btn, {
106
- className: 'small',
107
- label: String(auto_play_seconds),
108
- onClick: configAutoPlay,
109
- }),
110
- ),
111
- iconBtn('menu', ev => openFileMenu(cur, ev, [
112
- 'open','delete',
113
- { id: 'zoom', icon: 'zoom', label: t`Switch zoom mode`, onClick: switchZoomMode },
114
- { id: 'fullscreen', icon: 'fullscreen', label: t`Full screen`, onClick: toggleFullScreen },
115
- ])),
116
- iconBtn('close', close),
117
- )
96
+ useWindowSize().width > 1280 && iconBtn('?', showHelp),
97
+ h('div', {}, // fuse buttons
98
+ h(Btn, {
99
+ className: 'small',
100
+ label: t`Auto-play`,
101
+ toggled: autoPlaying,
102
+ onClick: () => setAutoPlaying(x => !x),
103
+ }),
104
+ autoPlaying && h(Btn, {
105
+ className: 'small',
106
+ label: String(auto_play_seconds),
107
+ onClick: configAutoPlay,
108
+ }),
109
+ ),
110
+ iconBtn('menu', ev => openFileMenu(cur, ev, [
111
+ 'open','delete',
112
+ { id: 'zoom', icon: 'zoom', label: t`Switch zoom mode`, onClick: switchZoomMode },
113
+ { id: 'fullscreen', icon: 'fullscreen', label: t`Full screen`, onClick: toggleFullScreen },
114
+ ])),
115
+ iconBtn('close', close),
116
),
117
h(FlexV, { center: true, alignItems: 'center', className: 'main', ref: mainRef },
118
loading && h(Spinner, { style: { position: 'absolute', fontSize: '20vh', opacity: .5 } }),