From 076e103d5320eb4f90db5261606f99f74d6ba17a Mon Sep 17 00:00:00 2001 From: ed Date: Wed, 16 Jun 2021 19:10:32 +0200 Subject: [PATCH] ux: responsive settings layout --- copyparty/web/browser.css | 17 +++++++++++++++-- copyparty/web/browser.html | 18 ++++++++++-------- copyparty/web/browser.js | 8 ++++---- 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 00c08cc4..e06f0afd 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -728,10 +728,20 @@ input.eq_gain { max-width: none; margin-right: 1.5em; } -.opwide>div>a { +.opwide>div { + display: inline-block; + vertical-align: top; + border-left: .2em solid #444; + margin-left: .5em; + padding-left: .5em; +} +.opwide>div.fill { + display: block; +} +.opwide>div>div>a { line-height: 2em; } -#op_cfg>div>span { +#op_cfg>div>div>span { display: inline-block; padding: .2em .4em; } @@ -988,6 +998,9 @@ html.light #files tr.sel a.play.act { html.light input[type="checkbox"] + label { color: #333; } +html.light .opwide>div { + border-color: #ddd; +} html.light .opview input[type="text"] { background: #fff; color: #333; diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index b91de0ed..c3c40dec 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -45,18 +45,20 @@ {%- include 'upload.html' %}
-

switches

- ℹ️ tooltips - ☀️ lightmode - 田 the grid - 🖼️ thumbs +

switches

+
+ ℹ️ tooltips + ☀️ lightmode + 田 the grid + 🖼️ thumbs +
{%- if have_zip %} -

folder download

+

folder download

{%- endif %} -

key notation

-

hidden columns

+

key notation

+

hidden columns

diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 995c4eba..f428e4e1 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -44,12 +44,12 @@ var have_webp = null; var mpl = (function () { ebi('op_player').innerHTML = ( - '

audio equalizer

' + - - '

playback mode

' + + '

playback mode

'); + '
' + + + '

audio equalizer

'); var r = { "pb_mode": sread('pb_mode') || 'loop-folder'