upload file list dropdowns wip

copyparty/web/browser.css

@@ -2560,27 +2560,20 @@ html.y #bbox-overlay figcaption a {
 	inset: 0;
 }
 
-/* up2k */
-#op_up2k {
-	display: block;
-	width: 100%;
-	overflow-y: auto;
-}
-
 /* settings */
-#s_hor {
+.modalsplit {
 	display: grid;
   	grid-template-columns: auto auto auto;
 	min-height: 0;
 }
-#s_nav, #s_list{
+.splitsub {
 	display: flex;
 	flex-direction: column;
 	overflow-y: auto;
 	padding: .5em;
 	padding-top: 0;
 }
-#s_divider{
+.divider{
 	background: var(--a);
 	width: 1px;
 	margin: 1em 0;
@@ -2763,7 +2756,6 @@ html.y #bbox-overlay figcaption a {
 	font-size: 1.5em;
 	margin: .5em auto;
 	padding: .8em 0;
-	width: 16em;
 	cursor: pointer;
 }
 #op_up2k.srch #u2btn {
@@ -2802,7 +2794,6 @@ html.y #bbox-overlay figcaption a {
 #u2tabw {
 	min-height: 0;
 	transition: min-height .2s;
-	margin: 2em 0;
 }
 #u2tabw.na>table {
 	display: none;
@@ -2885,24 +2876,15 @@ html.y #bbox-overlay figcaption a {
 	width: 21em;
 }
 #u2cards {
-	padding: 1em 1em 0 0;
+	padding: 1em 1em .4em .3em;
-	margin: 0 auto;
 	white-space: nowrap;
 	text-align: center;
-	overflow: hidden;
+	overflow-y: hidden;
-	min-width: 24em;
+	overflow-x: auto;
-}
-#u2etaw.w {
-	width: 55em;
-	text-align: right;
-	margin: 2em auto -2em auto;
-	z-index: 1;
-	position: relative;
-	pointer-events: none;
 }
 #u2cards a {
 	padding: .2em 1em;
-	padding-bottom: 5px;
+	padding-bottom: .3em;
 	background: var(--u2-tab-bg);
 	border: 1px solid #999;
 	border-color: var(--u2-tab-b1);
@@ -2939,9 +2921,6 @@ html.y #bbox-overlay figcaption a {
 	margin: 1em 1em;
 	width: 30em;
 }
-#u2conf.w {
-	width: 51em;
-}
 #u2conf .c,
 #u2conf .c * {
 	text-align: center;
@@ -3123,6 +3102,27 @@ html.b #u2conf a.b:hover {
 	font-size: 1.1em;
 	line-height: 0;
 }
+#up_list {
+	padding-bottom: 2em;
+}
+#up_list details {
+	border: var(--bg-u3) solid 1px;
+	border-radius: .3em;
+	margin: .3em;
+}
+#up_list summary {
+	cursor: pointer;
+	background: var(--bg-u1);
+	color: var(--a);
+	padding: .3em;
+	border-radius: .3em;
+}
+#up_list summary:hover {
+	background: var(--bg-u3);
+}
+#up_list .sub {
+	margin: .3em;
+}
 
 
 
@@ -3233,10 +3233,6 @@ html.a #u2etas {
 	border-radius: .5em;
 	border-width: .25em 0;
 }
-html.c #u2cards,
-html.a #u2cards {
-	margin: 0 auto -1em auto;
-}
 html.c #u2foot:empty,
 html.a #u2foot:empty {
 	margin-bottom: -1em;
@@ -3457,11 +3453,14 @@ html.d #treepar {
 	#ghead {
 		margin: .5em;
 	}
-	#s_hor {
+	.modalsplit {
 		display: block;
 		overflow-y: auto;
 	}
-	#s_divider {
+	.splitsub {
+		overflow-y: hidden;
+	}
+	.divider {
 		display: none;
 	}
 	#pctl {

copyparty/web/browser.html

@@ -179,10 +179,10 @@
 		<div id="s_outside" class="closepane" tt=""></div>
 		<div id="s_content" class="modalcontent">
 			<a id="s_header" class="modalheader" href="#s_nav"></a>
-			<div id="s_hor">
+			<div id="s_hor" class="modalsplit">
-				<div id="s_nav"></div>
+				<div id="s_nav" class="splitsub"></div>
-				<div id="s_divider"></div>
+				<div class="divider"></div>
-				<div id="s_list" class="opview"></div>
+				<div id="s_list" class="opview splitsub"></div>
 			</div>
 			<a id="cs_btn" href="#" class="close btn">✕</a>
 		</div>
@@ -192,7 +192,11 @@
 		<div id="up_outside" class="closepane" tt=""></div>
 		<div id="up_content" class="modalcontent">
 			<a id="up_header" class="modalheader" href="#">🚀 Upload</a>
-			<div id="op_up2k" class="opview"></div>
+			<div id="up_hor" class="modalsplit">
+				<div id="op_up2k" class="opview splitsub"></div>
+				<div class="divider"></div>
+				<div id="up_info" class="splitsub"></div>
+			</div>
 			<a id="c_up_btn" href="#" class="close btn">✕</a>
 		</div>
 	</div>

copyparty/web/browser.js

@@ -944,18 +944,20 @@ ebi('op_up2k').innerHTML = (
 	L.ul_send + ': <span id="u2etau" tt="' + L.ut_etau + '">(' + L.ul_idle1 + ')</span><br />\n' +
 	'	</div><span class="o">' +
 	L.ul_done + ': </span><span id="u2etat" tt="' + L.ut_etat + '">(' + L.ul_idle1 + ')</span>\n' +
-	'</div></div>\n' +
+	'</div>');
 
-	'<div id="u2cards">\n' +
+
+ebi('up_info').innerHTML = (
+	'<h3>Status</h3>' +
+
+	'</div>\n<div id="u2cards">\n' +
 	'	<a href="#" act="ok" tt="' + L.uct_ok + '">ok <span>0</span></a><a\n' +
 	'	href="#" act="ng" tt="' + L.uct_ng + '">ng <span>0</span></a><a\n' +
 	'	href="#" act="done" tt="' + L.uct_done + '">done <span>0</span></a><a\n' +
 	'	href="#" act="bz" tt="' + L.uct_bz + '" class="act">busy <span>0</span></a><a\n' +
-	'	href="#" act="q" tt="' + L.uct_q + '">que <span>0</span></a><a\n' +
+	'	href="#" act="q" tt="' + L.uct_q + '">que <span>0</span></a>\n' +
-	'	href="#" style="pointer-events: none; width: 90%; display: inline-block; font-size: 1.1em;"><span style="opacity: 0">_</span></a>\n' +
+	//'	href="#" style="pointer-events: none; width: 90%; display: inline-block; font-size: 1.1em;"><span style="opacity: 0">_</span></a>\n' +
-	'</div>\n' +
+	'</div>\n</div>\n' +
-
-	'</div>\n' +
 
 	'<div id="u2tabw" class="na"><table id="u2tab">\n' +
 	'	<thead>\n' +
@@ -968,6 +970,13 @@ ebi('op_up2k').innerHTML = (
 	'	<tbody></tbody>\n' +
 	'</table><div id="u2mu"></div></div>\n' +
 
+	'<div id="up_list">' +
+	'	<div id="up_status"></div>' +
+	'	<details open><summary>Uploading</summary><table id="up_loading" class="sub"></table></details>' +
+	'	<details open><summary>Failed</summary><table id="up_failed" class="sub"></table></details>' +
+	'	<details open><summary>Done</summary><table id="up_done" class="sub"></table></details>' +
+	'</div>' +
+
 	'<p id="u2flagblock"><b>' + L.ul_flagblk + '</p>\n' +
 	'<div id="u2life"></div>' +
 	'<div id="u2foot"></div>'

copyparty/web/up2k.js

@@ -597,6 +597,7 @@ function U2pvis(act, btns, uc, st) {
     r.addrow = function (nfile) {
         var tr = r.genrow(nfile);
         ebi('u2tab').tBodies[0].appendChild(tr);
+        ebi('up_loading').appendChild(tr)
     };
 
     btns = QSA(btns + '>a[act]');
@@ -3036,40 +3037,6 @@ function up2k_init(subtle) {
     ///   config ui
     //
 
-    function onresize(e) {
-        // 10x faster than matchMedia('(min-width
-        var bar = ebi('ops'),
-            wpx = window.innerWidth,
-            fpx = parseInt(getComputedStyle(bar)['font-size']),
-            wem = wpx * 1.0 / fpx,
-            wide = wem > 57 ? 'w' : '',
-            parent = ebi(wide ? 'u2btn_cw' : 'u2btn_ct'),
-            btn = ebi('u2btn');
-
-        if (btn.parentNode !== parent) {
-            parent.appendChild(btn);
-            ebi('u2conf').className = ebi('u2cards').className = ebi('u2etaw').className = wide;
-        }
-
-        parent = ebi('u2c3t');
-        var its = [ebi('u2etaw'), ebi('u2cards')];
-        if (its[0].parentNode !== parent) {
-            ebi('u2conf').className = wide;
-            for (var a = 0; a < 2; a++) {
-                parent.appendChild(its[a]);
-                its[a].className = wide;
-            }
-        }
-    }
-    onresize100.add(onresize, true);
-
-    if (MOBILE) {
-        // android-chrome wobbles for a bit; firefox / iOS-safari are OK
-        setTimeout(onresize, 20);
-        setTimeout(onresize, 100);
-        setTimeout(onresize, 500);
-    }
-
     var o = QSA('#u2conf .c *[tt]');
     for (var a = o.length - 1; a >= 0; a--) {
         o[a].parentNode.getElementsByTagName('input')[0].setAttribute('tt', o[a].getAttribute('tt'));
@@ -3324,7 +3291,6 @@ function up2k_init(subtle) {
 
         draw_turbo();
         draw_life();
-        onresize();
     }
 
     function apply_flag_cfg() {