up2k modal wip

contrib/plugins/minimal-up2k.html

@@ -36,7 +36,7 @@
     #u2conf #u2btn, #u2btn {padding:1.5em 0}
 
     /* adjust the button area a bit */
-    #u2conf.w, #u2conf.ww {width: 35em !important; margin: 5em auto}
+    #u2conf.w {width: 35em !important; margin: 5em auto}
 
     /* a */
     #op_up2k {min-height: 0}

contrib/plugins/minimal-up2k.js

@@ -39,7 +39,6 @@ var u2min = `
   display: none !important;
 }
 #u2conf {margin:5em auto 0 auto !important}
-#u2conf.ww {width:70em}
 #u2conf.w {width:50em}
 #u2conf.w .c,
 #u2conf.w #u2btn_cw {text-align:left}
@@ -51,8 +50,6 @@ var u2min = `
 }
 #u2etaw.w #u2etas {margin-right:-37em}
 #u2etaw.w #u2etas.o {margin-top:-2.2em}
-#u2etaw.ww {margin:-1em auto}
-#u2etaw.ww #u2etas {padding-left:4em}
 #u2etas {
   background: none !important;
   border: none !important;

copyparty/web/browser.css

@@ -1138,6 +1138,8 @@ html.dz #flogout {
 	bottom: 0;
 	z-index: 1;
 	touch-action: none;
+	box-shadow: 0 0 .5em var(--mp-sh);
+	clip-path: inset(-10em 0 0 0);
 }
 #widget.anim {
 	transition: margin-left 0; /* can't set this above 0 due to onwidgetresize */
@@ -1182,6 +1184,7 @@ html.y #widget.open {
 	position: relative;
 	font-size: .9em;
 	top: -.04em;
+	margin-right: .3em;
 }
 #wtgrid, #wtgrid2 {
 	font-size: .75em;
@@ -2507,10 +2510,10 @@ html.y #bbox-overlay figcaption a {
 
 
 
-/* settings css */
+/* modals */
-#s_content{
+.modalcontent{
 	display: grid;
-  	grid-template-rows: auto auto;
+  	grid-template-rows: max-content auto;
 	margin: 5vh 5vw;
 	border-radius: .5em;
 	border: var(--a) solid 1px;
@@ -2518,15 +2521,35 @@ html.y #bbox-overlay figcaption a {
 	max-width: 66.6em;
 	position: relative;
 }
-#s_header{
+.modalheader {
-	margin: 0;
+	display: flex;
-	padding: .5em;
+	align-items: center;
+	margin: 0 2.5em 0 0;
+	padding: .7em;
 	background: var(--ttlbar);
 	font-size: large;
 	font-weight: bold;
 	color: var(--fg);
 }
-#s_hor{
+.close{
+	position: absolute;
+	right: 0;
+	margin: .5em;
+	color: var(--fg);
+}
+.closepane {
+	position: absolute;
+	inset: 0;
+}
+
+/* up2k */
+#up_inner {
+	width: 100%;
+	overflow-y: auto;
+}
+
+/* settings */
+#s_hor {
 	display: grid;
   	grid-template-columns: auto auto auto;
 	min-height: 0;
@@ -2572,17 +2595,6 @@ html.y #bbox-overlay figcaption a {
 	padding: .5em;
 	margin: 0 0 1.3em 0;
 }
-#cs_btn{
-	position: absolute;
-	right: 0;
-	margin: .5em;
-	color: var(--fg);
-}
-#s_outside {
-	position: absolute;
-	inset: 0;
-}
-
 
 
 
@@ -2591,12 +2603,12 @@ html.y #bbox-overlay figcaption a {
 #op_up2k {
 	padding: 0 1em 1em 1em;
 }
-.overlaybg {
+.modal {
 	display: none;
 	z-index: 3;
 	background: rgba(48, 48, 48, 0.7);
 }
-.overlaybg.vis,
+.modal.vis,
 .dropzone {
 	display: flex;
   	justify-content: center;
@@ -2740,11 +2752,6 @@ html.y #bbox-overlay figcaption a {
 #op_up2k.srch #u2btn {
 	border-color: var(--u2-sbtn-b1);
 }
-#u2conf.ww #u2btn {
-	line-height: 1em;
-	padding: .5em 0;
-	margin: -2em 1em -3em 0;
-}
 #u2conf #u2btn {
 	padding: .4em 0;
 	margin: -2em 0;
@@ -2861,30 +2868,24 @@ html.y #bbox-overlay figcaption a {
 	width: 21em;
 }
 #u2cards {
-	padding: 1em 1em .42em 1em;
+	padding: 1em 1em 0 0;
 	margin: 0 auto;
 	white-space: nowrap;
 	text-align: center;
 	overflow: hidden;
 	min-width: 24em;
 }
-#u2cards.w {
-	width: 48em;
-	text-align: left;
-}
-#u2cards.ww {
-	display: inline-block;
-}
 #u2etaw.w {
 	width: 55em;
 	text-align: right;
-	margin: 2em auto -2.7em auto;
+	margin: 2em auto -2em auto;
-}
+	z-index: 1;
-#u2etaw.ww {
+	position: relative;
-	margin: -1em 2em 1em 1em;
+	pointer-events: none;
 }
 #u2cards a {
 	padding: .2em 1em;
+	padding-bottom: 5px;
 	background: var(--u2-tab-bg);
 	border: 1px solid #999;
 	border-color: var(--u2-tab-b1);
@@ -2918,21 +2919,12 @@ html.y #bbox-overlay figcaption a {
 	min-width: 1.3em;
 }
 #u2conf {
-	margin: 1em auto;
+	margin: 1em 1em;
 	width: 30em;
 }
 #u2conf.w {
 	width: 51em;
 }
-#u2conf.ww {
-	width: 82em;
-}
-#u2conf.ww #u2c3w {
-	width: 29em;
-}
-#u2conf.ww #u2c3w.s {
-	width: 39em;
-}
 #u2conf .c,
 #u2conf .c * {
 	text-align: center;
@@ -3205,11 +3197,6 @@ html.ay #u2btn {
 html.dz #u2btn {
 	letter-spacing: -.033em;
 }
-html.c #u2conf.ww #u2btn,
-html.a #u2conf.ww #u2btn {
-	margin: -2em .5em -3em 0;
-	padding: .9em 0;
-}
 html.c #op_up2k.srch #u2btn,
 html.a #op_up2k.srch #u2btn {
 	background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);

copyparty/web/browser.html

@@ -171,16 +171,25 @@
 	<div id="rcm" tabindex="0"></div>
 
 
-	<div id="cfg" class="overlaybg">
+	<div id="cfg" class="modal">
-		<div id="s_outside" tt=""></div>
+		<div id="s_outside" class="closepane" tt=""></div>
-		<div id="s_content">
+		<div id="s_content" class="modalcontent">
-			<a id="s_header" href="#s_nav"></a>
+			<a id="s_header" class="modalheader" href="#s_nav"></a>
 			<div id="s_hor">
 				<div id="s_nav"></div>
 				<div id="s_divider"></div>
 				<div id="s_list" class="opview"></div>
 			</div>
-			<a id="cs_btn" href="#" class="btn">✕</a>
+			<a id="cs_btn" href="#" class="close btn">✕</a>
+		</div>
+	</div>
+
+	<div id="up2k" class="modal">
+		<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="up_inner"></div>
+			<a id="c_up_btn" href="#" class="close btn">✕</a>
 		</div>
 	</div>
 

copyparty/web/browser.js

@@ -889,7 +889,7 @@ ebi('widget').innerHTML = (
 
 
 // up2k ui
-ebi('op_up2k').innerHTML = (
+ebi('up_inner').innerHTML = (
 	'<form id="u2form" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>\n' +
 
 	'<table id="u2conf">\n' +
@@ -949,7 +949,8 @@ ebi('op_up2k').innerHTML = (
 	'	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>\n' +
+	'	href="#" act="q" tt="' + L.uct_q + '">que <span>0</span></a><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' +
@@ -970,6 +971,10 @@ ebi('op_up2k').innerHTML = (
 	'<div id="u2foot"></div>'
 );
 
+ebi('up_outside').onclick = ebi('c_up_btn').onclick = function(){
+	modaltoggle('up2k');
+}
+
 
 ebi('wrap').insertBefore(mknod('div', 'lazy'), ebi('epi'));
 
@@ -981,7 +986,7 @@ x.parentNode.insertBefore(mknod('div', null,
 (function () {
 	var o = mknod('div');
 	o.innerHTML = (
-		'<div id="drops" class="overlaybg">\n' +
+		'<div id="drops" class="modal">\n' +
 		'	<div class="dropdesc" id="up_zd"><div>🚀 ' + L.udt_up + '<br /><span></span><div>🚀<b>' + L.udt_up + '</b></div><div><b>' + L.udt_up + '</b>🚀</div></div></div>\n' +
 		'	<div class="dropdesc" id="srch_zd"><div>🔎 ' + L.udt_srch + '<br /><span></span><div>🔎<b>' + L.udt_srch + '</b></div><div><b>' + L.udt_srch + '</b>🔎</div></div></div>\n' +
 		'	<div class="dropzone" id="up_dz" v="up_zd"></div>\n' +
@@ -1173,7 +1178,7 @@ ebi('op_cfg').innerHTML = (
 	}
 
 	ebi('s_outside').onclick = ebi('cs_btn').onclick = function(){
-		modalopen('cfg');
+		modaltoggle('cfg');
 	}
 })();
 
@@ -1242,7 +1247,7 @@ ebi('rcm').innerHTML = (
 
 	// settings
 	ebi('acc_settings').onclick = ebi('opa_cfg').onclick = function(e){
-		modalopen('cfg')
+		modaltoggle('cfg')
 		e.stopPropagation();
 	};
 
@@ -1258,7 +1263,7 @@ ebi('rcm').innerHTML = (
 
 })();
 
-function modalopen(dest){
+function modaltoggle(dest){
 	if (QS('#' + dest + '.vis'))
 		dest = '';
 
@@ -1301,16 +1306,21 @@ function goto(dest) {
 	for (var a = obj.length - 1; a >= 0; a--)
 		clmod(obj[a], 'act');
 
-	obj = QSA('.overlaybg');
+	obj = QSA('.modal');
 	for (var a = obj.length - 1; a >= 0; a--)
 		clmod(obj[a], 'vis');
 
 	if (dest) {
-		var rewritten = ['cfg', 'mkdir', 'new_md'];
+		var rewritten = ['cfg', 'mkdir', 'new_md', 'up2k'];
 		if(rewritten.includes(dest)){
-			if(dest == 'cfg')
+			switch(dest){
-				clmod(ebi('cfg'), 'vis', true);
+				case 'cfg':
-
+				case 'up2k':
+					clmod(ebi(dest), 'vis', true);
+					break;
+				default:
+					break;
+			}
 			return;
 		}
 
@@ -2239,7 +2249,6 @@ function auto_grad(can, color, color2 = '#000') {
 
 	for (var a = 0; a < p.length; a++){
 		var c = `color-mix(in xyz, ${color} ${mix[a]}%, ${color2} ${100 - mix[a]}%)`;
-		console.log(c)
 		g.addColorStop(p[a], c);
 	}
 

copyparty/web/up2k.js

@@ -3051,8 +3051,7 @@ function up2k_init(subtle) {
             ebi('u2conf').className = ebi('u2cards').className = ebi('u2etaw').className = wide;
         }
 
-        wide = wem > 86 ? 'ww' : wide;
+        parent = ebi('u2c3t');
-        parent = ebi(wide == 'ww' ? 'u2c3w' : 'u2c3t');
         var its = [ebi('u2etaw'), ebi('u2cards')];
         if (its[0].parentNode !== parent) {
             ebi('u2conf').className = wide;