more ux

.gitignore

@@ -9,6 +9,7 @@ buildenv/
 build/
 dist/
 sfx/
+py2/
 .venv/
 
 # ide

copyparty/web/browser.css

@@ -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;

copyparty/web/browser.html

@@ -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="text" name="msg" class="i">
-			<input type="submit" value="send msg to server log">
+			<input type="submit" value="send msg to srv log">
 		</form>
 	</div>
 

copyparty/web/browser.js

@@ -61,28 +61,29 @@ ebi('op_up2k').innerHTML = (
 
 	'<table id="u2conf">\n' +
 	'	<tr>\n' +
-	'		<td><br />parallel uploads:</td>\n' +
+	'		<td class="c"><br />parallel uploads:</td>\n' +
-	'		<td rowspan="2">\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' +
+	'		<td class="c">\n' +
-	'			<a href="#" id="nthread_sub">&ndash;</a><input\n' +
+	'			<a href="#" class="b" id="nthread_sub">&ndash;</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 />&nbsp;\n' +
+	'				href="#" class="b" id="nthread_add">+</a><br />&nbsp;\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 &lt;em&gt;hashing&lt;/em&gt; speed, and estimated time until finish">(no uploads are queued yet)</span><br />\n' +
 	'	send: <span id="u2etau" tt="average &lt;em&gt;upload&lt;/em&gt; 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' +

copyparty/web/up2k.js

@@ -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('u2conf').setAttribute('class', wide);
-            ebi('u2cards').setAttribute('class', wide ? 'w' : '');
+            ebi('u2cards').setAttribute('class', wide);
-            ebi('u2etaw').setAttribute('class', wide ? 'w' : '');
+            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'));

docs/browser.css

@@ -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;
 }

docs/minimal-up2k.html

@@ -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}