mirror of
https://github.com/9001/copyparty.git
synced 2026-06-18 20:22:27 -06:00
up2k modal wip
This commit is contained in:
Til Schmitter
parent
58fe73fcb9
commit
1360641819
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
#s_content{
|
||||
/* modals */
|
||||
.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{
|
||||
margin: 0;
|
||||
padding: .5em;
|
||||
.modalheader {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
#u2etaw.ww {
|
||||
margin: -1em 2em 1em 1em;
|
||||
margin: 2em auto -2em auto;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
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%);
|
||||
|
|
|
|||
|
|
@ -171,16 +171,25 @@
|
|||
<div id="rcm" tabindex="0"></div>
|
||||
|
||||
|
||||
<div id="cfg" class="overlaybg">
|
||||
<div id="s_outside" tt=""></div>
|
||||
<div id="s_content">
|
||||
<a id="s_header" href="#s_nav"></a>
|
||||
<div id="cfg" class="modal">
|
||||
<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_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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
clmod(ebi('cfg'), 'vis', true);
|
||||
|
||||
switch(dest){
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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(wide == 'ww' ? 'u2c3w' : 'u2c3t');
|
||||
parent = ebi('u2c3t');
|
||||
var its = [ebi('u2etaw'), ebi('u2cards')];
|
||||
if (its[0].parentNode !== parent) {
|
||||
ebi('u2conf').className = wide;
|
||||
|
|
|
|||
Loading…
Reference in a new issue