techwire/copyparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: responsive settings layout

Browse Source
This commit is contained in:
ed 2021-06-16 19:10:32 +02:00
parent 38c00ea8fc
commit 076e103d53
3 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
copyparty/web/browser.css
View File

@ -728,10 +728,20 @@ input.eq_gain {
max-width: none; max-width: none;
margin-right: 1.5em; 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; line-height: 2em;
} }
#op_cfg>div>span { #op_cfg>div>div>span {
display: inline-block; display: inline-block;
padding: .2em .4em; padding: .2em .4em;
} }
@ -988,6 +998,9 @@ html.light #files tr.sel a.play.act {
html.light input[type="checkbox"] + label { html.light input[type="checkbox"] + label {
color: #333; color: #333;
} }
html.light .opwide>div {
border-color: #ddd;
}
html.light .opview input[type="text"] { html.light .opview input[type="text"] {
background: #fff; background: #fff;
color: #333; color: #333;

18
copyparty/web/browser.html
View File

@ -45,18 +45,20 @@
{%- include 'upload.html' %} {%- include 'upload.html' %}
<div id="op_cfg" class="opview opbox opwide"> <div id="op_cfg" class="opview opbox opwide">
<h3>switches</h3>
<div> <div>
<a id="tooltips" class="tgl btn" href="#">ℹ️ tooltips</a> <h3>switches</h3>
<a id="lightmode" class="tgl btn" href="#">☀️ lightmode</a> <div>
<a id="griden" class="tgl btn" href="#">田 the grid</a> <a id="tooltips" class="tgl btn" href="#">ℹ️ tooltips</a>
<a id="thumbs" class="tgl btn" href="#">🖼️ thumbs</a> <a id="lightmode" class="tgl btn" href="#">☀️ lightmode</a>
<a id="griden" class="tgl btn" href="#">田 the grid</a>
<a id="thumbs" class="tgl btn" href="#">🖼️ thumbs</a>
</div>
</div> </div>
{%- if have_zip %} {%- if have_zip %}
<h3>folder download</h3><div id="arc_fmt"></div> <div><h3>folder download</h3><div id="arc_fmt"></div></div>
{%- endif %} {%- endif %}
<h3>key notation</h3><div id="key_notation"></div> <div><h3>key notation</h3><div id="key_notation"></div></div>
<h3>hidden columns</h3><div id="hcols"></div> <div class="fill"><h3>hidden columns</h3><div id="hcols"></div></div>
</div> </div>
<h1 id="path"> <h1 id="path">

8
copyparty/web/browser.js
View File

@ -44,12 +44,12 @@ var have_webp = null;
var mpl = (function () { var mpl = (function () {
ebi('op_player').innerHTML = ( ebi('op_player').innerHTML = (
'<h3>audio equalizer</h3><div id="audio_eq"></div>' + '<div><h3>playback mode</h3><div id="pb_mode">' +
'<h3>playback mode</h3><div id="pb_mode">' +
'<a href="#" class="tgl btn">🔁 loop-folder</a>' + '<a href="#" class="tgl btn">🔁 loop-folder</a>' +
'<a href="#" class="tgl btn">📂 next-folder</a>' + '<a href="#" class="tgl btn">📂 next-folder</a>' +
'</div>'); '</div></div>' +
'<div><h3>audio equalizer</h3><div id="audio_eq"></div></div>');
var r = { var r = {
"pb_mode": sread('pb_mode') || 'loop-folder' "pb_mode": sread('pb_mode') || 'loop-folder'