mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -06:00
Code Issues 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;
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;

18
copyparty/web/browser.html
View file

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

8
copyparty/web/browser.js
View file

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