mirror of
https://github.com/9001/copyparty.git
synced 2025-08-17 09:02:15 -06:00
more ux
This commit is contained in:
ed
parent
20030c91b7
commit
d77ec22007
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -9,6 +9,7 @@ buildenv/
|
|||
build/
|
||||
dist/
|
||||
sfx/
|
||||
py2/
|
||||
.venv/
|
||||
|
||||
# ide
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ html,body,tr,th,td,#files,a {
|
|||
}
|
||||
html {
|
||||
color: #ccc;
|
||||
background: #222;
|
||||
font-family: sans-serif;
|
||||
text-shadow: 1px 1px 0px #000;
|
||||
}
|
||||
|
|
@ -86,7 +85,6 @@ a, #files tbody div a:last-child {
|
|||
#files thead th {
|
||||
padding: 0 .3em .3em .3em;
|
||||
border-bottom: 1px solid #444;
|
||||
background: #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
#files td {
|
||||
|
|
@ -98,9 +96,6 @@ a, #files tbody div a:last-child {
|
|||
max-width: 30em;
|
||||
overflow: hidden;
|
||||
}
|
||||
#files tr:nth-child(2n+1) td {
|
||||
background: #282828;
|
||||
}
|
||||
#files tbody td:nth-child(3) {
|
||||
font-family: 'scp', monospace, monospace;
|
||||
text-align: right;
|
||||
|
|
@ -168,7 +163,6 @@ a, #files tbody div a:last-child {
|
|||
}
|
||||
#srv_info {
|
||||
color: #a73;
|
||||
background: #222;
|
||||
position: absolute;
|
||||
font-size: .8em;
|
||||
top: .5em;
|
||||
|
|
@ -291,7 +285,6 @@ html.light #ggrid>a.sel {
|
|||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #333;
|
||||
}
|
||||
#wtgrid,
|
||||
#wtico {
|
||||
|
|
@ -332,7 +325,6 @@ html.light #ggrid>a.sel {
|
|||
line-height: 1em;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: #333;
|
||||
box-shadow: 0 0 .5em #222;
|
||||
border-radius: .3em 0 0 0;
|
||||
padding: 0 0 0 .1em;
|
||||
|
|
@ -500,15 +492,6 @@ html.light #wfm a:not(.en) {
|
|||
box-shadow: 0 -.15em .2em #000 inset;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
#ops,
|
||||
.opbox,
|
||||
#path ,
|
||||
#srch_form,
|
||||
#ghead {
|
||||
background: #282828;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 0 .3em #111;
|
||||
}
|
||||
#ops {
|
||||
margin: 1.7em 1.5em 0 1.5em;
|
||||
padding: .3em .6em;
|
||||
|
|
@ -519,18 +502,18 @@ html.light #wfm a:not(.en) {
|
|||
.opbox {
|
||||
margin: 1.5em 0 0 0;
|
||||
padding: .5em;
|
||||
border-radius: 0 1em 1em 0;
|
||||
border-radius: 0 .3em .3em 0;
|
||||
border-width: 1px 1px 1px 0;
|
||||
max-width: 41em;
|
||||
max-width: min(41em, calc(100% - 2.6em));
|
||||
}
|
||||
.opbox input {
|
||||
margin: .5em;
|
||||
}
|
||||
.opview input[type=text] {
|
||||
background: #383838;
|
||||
color: #fff;
|
||||
border: none;
|
||||
box-shadow: 0 0 .3em #222;
|
||||
box-shadow: 0 0 .3em #181818;
|
||||
border-bottom: 1px solid #fc5;
|
||||
border-radius: .2em;
|
||||
padding: .2em .3em;
|
||||
|
|
@ -556,6 +539,9 @@ input[type="radio"]:checked+label {
|
|||
html.light input[type="radio"]:checked+label {
|
||||
color: #07c;
|
||||
}
|
||||
.opview input.i {
|
||||
width: calc(100% - 16.2em);
|
||||
}
|
||||
input.eq_gain {
|
||||
width: 3em;
|
||||
text-align: center;
|
||||
|
|
@ -657,10 +643,8 @@ input.eq_gain {
|
|||
scrollbar-color: #eb0 #333;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 0 1em #181818;
|
||||
background: #282828;
|
||||
}
|
||||
#treeh {
|
||||
background: #282828;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
|
|
@ -694,7 +678,6 @@ input.eq_gain {
|
|||
.btn {
|
||||
padding: .2em .4em;
|
||||
font-size: 1.2em;
|
||||
background: #373737;
|
||||
border-radius: .3em;
|
||||
margin: .2em;
|
||||
white-space: pre;
|
||||
|
|
@ -752,7 +735,7 @@ input.eq_gain {
|
|||
white-space: nowrap;
|
||||
}
|
||||
#tree.nowrap #treeul a+a:hover {
|
||||
background: rgba(34, 34, 34, 0.67);
|
||||
background: rgba(16, 16, 16, 0.67);
|
||||
min-width: calc(var(--nav-sz) - 2em);
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -761,7 +744,7 @@ html.light #tree.nowrap #treeul a+a:hover {
|
|||
color: #000;
|
||||
}
|
||||
#treeul a+a:hover {
|
||||
background: #222;
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
}
|
||||
#treeul a:first-child {
|
||||
|
|
@ -897,17 +880,10 @@ html.light #ghead {
|
|||
width: var(--grid-sz);
|
||||
vertical-align: top;
|
||||
overflow-wrap: break-word;
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #383838;
|
||||
border-top: 1px solid #444;
|
||||
box-shadow: 0 .1em .2em #181818;
|
||||
border-radius: .3em;
|
||||
padding: .3em;
|
||||
margin: .5em;
|
||||
}
|
||||
#ggrid>a[tt] {
|
||||
background: linear-gradient(135deg, #2c2c2c 95%, #444 95%);
|
||||
}
|
||||
#ggrid>a img {
|
||||
border-radius: .2em;
|
||||
max-width: 10em;
|
||||
|
|
@ -930,25 +906,6 @@ html.light #ghead {
|
|||
border-radius: .3em;
|
||||
font-size: 2em;
|
||||
}
|
||||
#ggrid>a:hover {
|
||||
background: #383838;
|
||||
border-color: #555;
|
||||
color: #fd9;
|
||||
}
|
||||
html.light #ggrid>a {
|
||||
background: #f7f7f7;
|
||||
border-color: #ddd;
|
||||
box-shadow: 0 .1em .2em #ddd;
|
||||
}
|
||||
html.light #ggrid>a[tt] {
|
||||
background: linear-gradient(135deg, #f7f7f7 95%, #ccc 95%);
|
||||
}
|
||||
html.light #ggrid>a:hover {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
color: #015;
|
||||
box-shadow: 0 .1em .5em #aaa;
|
||||
}
|
||||
#op_unpost {
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
@ -969,7 +926,6 @@ html.light #ggrid>a:hover {
|
|||
max-height: calc(100% - 2em);
|
||||
border-bottom: .5em solid #999;
|
||||
box-shadow: 0 0 5em rgba(0,0,0,0.8);
|
||||
background: #222;
|
||||
padding: 1em;
|
||||
z-index: 765;
|
||||
}
|
||||
|
|
@ -1053,6 +1009,76 @@ a.btn,
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html,
|
||||
#rui,
|
||||
#files thead th,
|
||||
#bbox-halp,
|
||||
#u2notbtn,
|
||||
#srv_info {
|
||||
background: #222;
|
||||
}
|
||||
#ops,
|
||||
.opbox,
|
||||
#path,
|
||||
#srch_form,
|
||||
#ghead {
|
||||
background: #2b2b2b;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 0 .3em #111;
|
||||
}
|
||||
#files tr:nth-child(2n+1) td {
|
||||
background: #282828;
|
||||
}
|
||||
#tree,
|
||||
#treeh {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
#wtoggle,
|
||||
#widgeti {
|
||||
background: #333;
|
||||
}
|
||||
.btn,
|
||||
.opview input[type=text] {
|
||||
background: #383838;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#ggrid>a {
|
||||
background: #2c2c2c;
|
||||
border: 1px solid #383838;
|
||||
border-top: 1px solid #444;
|
||||
box-shadow: 0 .1em .2em #181818;
|
||||
}
|
||||
#ggrid>a[tt] {
|
||||
background: linear-gradient(135deg, #2c2c2c 95%, #444 95%);
|
||||
}
|
||||
#ggrid>a:hover {
|
||||
background: #383838;
|
||||
border-color: #555;
|
||||
color: #fd9;
|
||||
}
|
||||
html.light #ggrid>a {
|
||||
background: #f7f7f7;
|
||||
border-color: #ddd;
|
||||
box-shadow: 0 .1em .2em #ddd;
|
||||
}
|
||||
html.light #ggrid>a[tt] {
|
||||
background: linear-gradient(135deg, #f7f7f7 95%, #ccc 95%);
|
||||
}
|
||||
html.light #ggrid>a:hover {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
color: #015;
|
||||
box-shadow: 0 .1em .5em #aaa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1445,7 +1471,6 @@ html.light #bbox-overlay figcaption a {
|
|||
}
|
||||
#bbox-halp {
|
||||
color: #fff;
|
||||
background: #222;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -1653,6 +1678,10 @@ html.light #u2err.err {
|
|||
cursor: pointer;
|
||||
box-shadow: .4em .4em 0 #111;
|
||||
}
|
||||
#u2conf.ww #u2btn {
|
||||
font-size: 1.3em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
#op_up2k.srch #u2btn {
|
||||
background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
|
||||
text-shadow: 1px 1px 1px #fc6;
|
||||
|
|
@ -1671,7 +1700,6 @@ html.light #u2err.err {
|
|||
#u2notbtn {
|
||||
display: none;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
padding-top: 1em;
|
||||
}
|
||||
#u2notbtn * {
|
||||
|
|
@ -1704,7 +1732,7 @@ html.light #u2err.err {
|
|||
width: auto;
|
||||
}
|
||||
#u2tab tbody tr:hover td {
|
||||
background: #222;
|
||||
background: #333;
|
||||
}
|
||||
#u2etas {
|
||||
background: #1c1c1c;
|
||||
|
|
@ -1748,11 +1776,17 @@ html.light #u2err.err {
|
|||
width: 44em;
|
||||
text-align: left;
|
||||
}
|
||||
#u2cards.ww {
|
||||
display: inline-block;
|
||||
}
|
||||
#u2etaw.w {
|
||||
width: 52em;
|
||||
text-align: right;
|
||||
margin: 3em auto -2.7em auto;
|
||||
}
|
||||
#u2etaw.ww {
|
||||
margin: 0 2em 1em 2em;
|
||||
}
|
||||
#u2cards a {
|
||||
padding: .2em 1em;
|
||||
border: 1px solid #777;
|
||||
|
|
@ -1783,10 +1817,17 @@ html.light #u2err.err {
|
|||
margin: 1em auto;
|
||||
width: 30em;
|
||||
}
|
||||
#u2conf.has_btn {
|
||||
#u2conf.w {
|
||||
width: 48em;
|
||||
}
|
||||
#u2conf * {
|
||||
#u2conf.ww {
|
||||
width: 74em;
|
||||
}
|
||||
#u2conf.ww #u2c3w {
|
||||
width: 29em;
|
||||
}
|
||||
#u2conf .c,
|
||||
#u2conf .c * {
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
|
|
@ -1806,7 +1847,7 @@ html.light #u2err.err {
|
|||
#u2conf .txtbox.err {
|
||||
background: #922;
|
||||
}
|
||||
#u2conf a {
|
||||
#u2conf a.b {
|
||||
color: #fff;
|
||||
background: #c38;
|
||||
text-decoration: none;
|
||||
|
|
@ -1820,10 +1861,10 @@ html.light #u2err.err {
|
|||
position: relative;
|
||||
bottom: -0.08em;
|
||||
}
|
||||
#u2conf input+a {
|
||||
#u2conf input+a.b {
|
||||
background: #d80;
|
||||
}
|
||||
#u2conf label {
|
||||
#u2conf .c label {
|
||||
font-size: 1.6em;
|
||||
width: 2em;
|
||||
height: 1em;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div id="u2err"></div>
|
||||
<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
|
||||
<input type="hidden" name="act" value="bput" />
|
||||
<input type="file" name="f" multiple><br />
|
||||
<input type="file" name="f" multiple /><br />
|
||||
<input type="submit" value="start upload">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<div id="op_mkdir" class="opview opbox act">
|
||||
<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
|
||||
<input type="hidden" name="act" value="mkdir" />
|
||||
📂<input type="text" name="name" size="30">
|
||||
📂<input type="text" name="name" class="i">
|
||||
<input type="submit" value="make directory">
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -47,15 +47,15 @@
|
|||
<div id="op_new_md" class="opview opbox">
|
||||
<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="{{ url_suf }}">
|
||||
<input type="hidden" name="act" value="new_md" />
|
||||
📝<input type="text" name="name" size="30">
|
||||
📝<input type="text" name="name" class="i">
|
||||
<input type="submit" value="new markdown doc">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="op_msg" class="opview opbox act">
|
||||
<form method="post" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" action="{{ url_suf }}">
|
||||
📟<input type="text" name="msg" size="30">
|
||||
<input type="submit" value="send msg to server log">
|
||||
📟<input type="text" name="msg" class="i">
|
||||
<input type="submit" value="send msg to srv log">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,28 +61,29 @@ ebi('op_up2k').innerHTML = (
|
|||
|
||||
'<table id="u2conf">\n' +
|
||||
' <tr>\n' +
|
||||
' <td><br />parallel uploads:</td>\n' +
|
||||
' <td rowspan="2">\n' +
|
||||
' <td class="c"><br />parallel uploads:</td>\n' +
|
||||
' <td class="c" rowspan="2">\n' +
|
||||
' <input type="checkbox" id="multitask" />\n' +
|
||||
' <label for="multitask" tt="continue hashing other files while uploading">🏃</label>\n' +
|
||||
' </td>\n' +
|
||||
' <td rowspan="2">\n' +
|
||||
' <td class="c" rowspan="2">\n' +
|
||||
' <input type="checkbox" id="ask_up" />\n' +
|
||||
' <label for="ask_up" tt="ask for confirmation before upload starts">💭</label>\n' +
|
||||
' </td>\n' +
|
||||
(have_up2k_idx ? (
|
||||
' <td data-perm="read" rowspan="2">\n' +
|
||||
' <td class="c" data-perm="read" rowspan="2">\n' +
|
||||
' <input type="checkbox" id="fsearch" />\n' +
|
||||
' <label for="fsearch" tt="don\'t actually upload, instead check if the files already $N exist on the server (will scan all folders you can read)">🔎</label>\n' +
|
||||
' </td>\n'
|
||||
) : '') +
|
||||
' <td data-perm="read" rowspan="2" id="u2btn_cw"></td>\n' +
|
||||
' <td data-perm="read" rowspan="2" id="u2c3w"></td>\n' +
|
||||
' </tr>\n' +
|
||||
' <tr>\n' +
|
||||
' <td>\n' +
|
||||
' <a href="#" id="nthread_sub">–</a><input\n' +
|
||||
' <td class="c">\n' +
|
||||
' <a href="#" class="b" id="nthread_sub">–</a><input\n' +
|
||||
' class="txtbox" id="nthread" value="2" tt="pause uploads by setting it to 0"/><a\n' +
|
||||
' href="#" id="nthread_add">+</a><br /> \n' +
|
||||
' href="#" class="b" id="nthread_add">+</a><br /> \n' +
|
||||
' </td>\n' +
|
||||
' </tr>\n' +
|
||||
'</table>\n' +
|
||||
|
|
@ -98,6 +99,8 @@ ebi('op_up2k').innerHTML = (
|
|||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
|
||||
'<div id="u2c3t">\n' +
|
||||
|
||||
'<div id="u2etaw"><div id="u2etas"><div class="o">\n' +
|
||||
' hash: <span id="u2etah" tt="average <em>hashing</em> speed, and estimated time until finish">(no uploads are queued yet)</span><br />\n' +
|
||||
' send: <span id="u2etau" tt="average <em>upload</em> speed and estimated time until finish">(no uploads are queued yet)</span><br />\n' +
|
||||
|
|
@ -112,6 +115,8 @@ ebi('op_up2k').innerHTML = (
|
|||
' href="#" act="q" tt="idle, pending">que <span>0</span></a>\n' +
|
||||
'</div>\n' +
|
||||
|
||||
'</div>\n' +
|
||||
|
||||
'<table id="u2tab">\n' +
|
||||
' <thead>\n' +
|
||||
' <tr>\n' +
|
||||
|
|
|
|||
|
|
@ -1827,16 +1827,27 @@ function up2k_init(subtle) {
|
|||
wpx = window.innerWidth,
|
||||
fpx = parseInt(getComputedStyle(bar)['font-size']),
|
||||
wem = wpx * 1.0 / fpx,
|
||||
wide = wem > 54,
|
||||
wide = wem > 54 ? 'w' : '',
|
||||
parent = ebi(wide && has(perms, 'write') ? 'u2btn_cw' : 'u2btn_ct'),
|
||||
btn = ebi('u2btn');
|
||||
|
||||
//console.log([wpx, fpx, wem]);
|
||||
if (btn.parentNode !== parent) {
|
||||
parent.appendChild(btn);
|
||||
ebi('u2conf').setAttribute('class', wide ? 'has_btn' : '');
|
||||
ebi('u2cards').setAttribute('class', wide ? 'w' : '');
|
||||
ebi('u2etaw').setAttribute('class', wide ? 'w' : '');
|
||||
ebi('u2conf').setAttribute('class', wide);
|
||||
ebi('u2cards').setAttribute('class', wide);
|
||||
ebi('u2etaw').setAttribute('class', wide);
|
||||
}
|
||||
|
||||
wide = wem > 78 ? 'ww' : wide;
|
||||
parent = ebi(wide == 'ww' ? 'u2c3w' : 'u2c3t');
|
||||
var its = [ebi('u2etaw'), ebi('u2cards')];
|
||||
if (its[0].parentNode !== parent) {
|
||||
ebi('u2conf').setAttribute('class', wide);
|
||||
for (var a = 0; a < 2; a++) {
|
||||
parent.appendChild(its[a]);
|
||||
its[a].setAttribute('class', wide);
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener('resize', onresize);
|
||||
|
|
@ -1849,8 +1860,9 @@ function up2k_init(subtle) {
|
|||
setTimeout(onresize, 500);
|
||||
}
|
||||
|
||||
var o = QSA('#u2conf *[tt]');
|
||||
var o = QSA('#u2conf .c *[tt]');
|
||||
for (var a = o.length - 1; a >= 0; a--) {
|
||||
console.log(o[a]);
|
||||
o[a].parentNode.getElementsByTagName('input')[0].setAttribute('tt', o[a].getAttribute('tt'));
|
||||
}
|
||||
tt.att(QS('#u2conf'));
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
html {
|
||||
background: #333 url('/wp/wallhaven-mdjrqy.jpg') center / cover no-repeat fixed;
|
||||
background: #222 url('/wp/wallhaven-mdjrqy.jpg') center / cover no-repeat fixed;
|
||||
}
|
||||
#files th {
|
||||
background: rgba(32, 32, 32, 0.9) !important;
|
||||
}
|
||||
#ops,
|
||||
#treeul,
|
||||
#tree,
|
||||
#files td {
|
||||
background: rgba(32, 32, 32, 0.3) !important;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ html.light #files th {
|
|||
}
|
||||
html.light .logue,
|
||||
html.light #ops,
|
||||
html.light #treeul,
|
||||
html.light #tree,
|
||||
html.light #files td {
|
||||
background: rgba(248, 248, 248, 0.8) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
#u2conf #u2btn, #u2btn {padding:1.5em 0}
|
||||
|
||||
/* adjust the button area a bit */
|
||||
#u2conf.has_btn {width: 35em !important; margin: 5em auto}
|
||||
#u2conf.w, #u2conf.ww {width: 35em !important; margin: 5em auto}
|
||||
|
||||
/* a */
|
||||
#op_up2k {min-height: 0}
|
||||
|
|
|
|||
Loading…
Reference in a new issue