file-show: better layout on mobile
Massimo Melina committed
Feb 3, 2024 at 19:22 UTC
6699e22b2322bd338e3caa4b9d8f6b175f73d4fa
2 files changed
+35
-28
frontend/src/index.scss
+10
-5
@@ -644,10 +644,13 @@ button .icon + .label {
644
&>div {
645
height: 100%;
646
width: 100%;
647
+ @media (max-width: 30em) { // portrait mobile
648
+ flex-direction: column-reverse !important; // bar at the bottom, easier on the thumb
649
+ }
650
}
651
.showing-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
652
.showing {
650
- max-width: calc(100% - var(--nav-size)*2); // avoid overlapping of controls and nav buttons
653
+ max-width: calc(100% - min(4vw, var(--nav-size)) * 2); // avoid overlapping of controls and nav buttons
654
max-height: 100%;
655
}
656
audio.showing { min-width: 60%; }
@@ -682,11 +685,13 @@ button .icon + .label {
685
padding: .5em min(2vw, 1em);
686
background: var(--bg);
687
opacity: .8;
685
- display: flex;
688
flex-wrap: wrap;
687
- align-items: center;
688
- justify-content: flex-end;
689
- gap: .5em;
689
+ &,&>.controls {
690
+ display: flex;
691
+ align-items: center;
692
+ justify-content: flex-end;
693
+ gap: .5em;
694
+ }
695
696
.entry-details { font-size: smaller; margin-left: 1em; }
697
.entry-ts { display: inherit; font-size: smaller; }
frontend/src/show.ts
+25
-23
@@ -105,30 +105,32 @@ export function fileShow(entry: DirEntry) {
105
},
106
h('div', { className: 'bar' },
107
h('div', { className: 'filename' }, cur.n),
108
- h(EntryDetails, { entry: cur, midnight: useMidnight() }),
109
- useWindowSize().width > 800 && iconBtn('?', showHelp),
110
- h('div', {}, // fuse buttons
111
- h(Btn, {
112
- className: 'small',
113
- label: t`Auto-play`,
114
- toggled: autoPlaying,
115
- onClick: toggleAutoPlay,
116
- }),
117
- autoPlaying && h(Btn, {
118
- className: 'small',
119
- label: String(auto_play_seconds),
120
- title: autoPlaySecondsLabel,
121
- onClick: configAutoPlay,
122
- }),
108
+ h('div', { className: 'controls' }, // keep on same row
109
+ h(EntryDetails, { entry: cur, midnight: useMidnight() }),
110
+ useWindowSize().width > 800 && iconBtn('?', showHelp),
111
+ h('div', {}, // fuse buttons
112
+ h(Btn, {
113
+ className: 'small',
114
+ label: t`Auto-play`,
115
+ toggled: autoPlaying,
116
+ onClick: toggleAutoPlay,
117
+ }),
118
+ autoPlaying && h(Btn, {
119
+ className: 'small',
120
+ label: String(auto_play_seconds),
121
+ title: autoPlaySecondsLabel,
122
+ onClick: configAutoPlay,
123
+ }),
124
+ ),
125
+ iconBtn('menu', ev => openFileMenu(cur, ev, [
126
+ 'open','delete',
127
+ { id: 'zoom', icon: 'zoom', label: t`Switch zoom mode`, onClick: switchZoomMode },
128
+ { id: 'fullscreen', icon: 'fullscreen', label: t`Full screen`, onClick: toggleFullScreen },
129
+ { id: 'shuffle', icon: 'shuffle', label: t`Shuffle`, toggled: Boolean(shuffle), onClick: toggleShuffle },
130
+ { id: 'repeat', icon: 'repeat', label: t`Repeat`, toggled: repeat, onClick: toggleRepeat },
131
+ ])),
132
+ iconBtn('close', close),
133
),
124
- iconBtn('menu', ev => openFileMenu(cur, ev, [
125
- 'open','delete',
126
- { id: 'zoom', icon: 'zoom', label: t`Switch zoom mode`, onClick: switchZoomMode },
127
- { id: 'fullscreen', icon: 'fullscreen', label: t`Full screen`, onClick: toggleFullScreen },
128
- { id: 'shuffle', icon: 'shuffle', label: t`Shuffle`, toggled: Boolean(shuffle), onClick: toggleShuffle },
129
- { id: 'repeat', icon: 'repeat', label: t`Repeat`, toggled: repeat, onClick: toggleRepeat },
130
- ])),
131
- iconBtn('close', close),
134
),
135
h(FlexV, { center: true, alignItems: 'center', className: 'main', ref: mainRef },
136
loading && h(Spinner, { style: { position: 'absolute', fontSize: '20vh', opacity: .5 } }),