diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index ba5de5b9..62c7c715 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1213,7 +1213,7 @@ html.y #widget.open { white-space: nowrap; top: -1em; right: 0; - height: 2em; + bottom: 0; font-size: 2em; line-height: 1em; text-align: center; @@ -1228,6 +1228,52 @@ html.y #widget.open { background: #fff; background: var(--bg-u2); } +#up_quick { + position: absolute; + bottom: calc(100% + .4em); + right: .4em; + font-size: xx-large; + font-weight: bold; + box-shadow: 0 0 .3em var(--bg-d3); + transition: all .15s; + z-index: 1; + border-radius: .3em; + text-align: right; + background: var(--bg-u2); +} +#up_quick_more { + display: none; + min-width: 4em; + font-weight: normal; +} +#up_quick_more.vis { + display: grid; +} +#up_quick_more a:hover { + background: var(--btn-h-bg); +} +#up_quick_more a { + position: static; + font-size: large; + display: ruby; + padding: .5em; + cursor: pointer; + border-radius: .5em; +} +#up_quick .overlay_plus { + right: .3em; + margin-top: -1.5em; +} +#up_quick .btn{ + box-shadow: none; + transition: all .15s; + margin: 0; + width: max-content; + transform: rotate(90deg); +} +#up_quick .btn.on { + transform: rotate(0); +} #wfs, #wfm, #wzip, #wnp, #wm3u { display: none; } @@ -2837,13 +2883,6 @@ html.y #bbox-overlay figcaption a { font-size: .9em; } } -@media (max-width: 50em) { - #u2tab.up.ok td:nth-child(3), - #u2tab.up.bz td:nth-child(3), - #u2tab.up.q td:nth-child(3) { - width: 16em; - } -} #op_up2k.srch td.prog { font-family: sans-serif; font-family: var(--font-main), sans-serif; @@ -3461,9 +3500,11 @@ html.d #treepar { .modalsplit { display: block; overflow-y: auto; + padding-bottom: 5em; } .splitsub { overflow-y: hidden; + padding-bottom: .5em; } .divider { display: none; @@ -3493,6 +3534,9 @@ html.d #treepar { opacity: 1; pointer-events: all; } + #up_quick_more a { + padding: .6em; + } } @media (min-width: 70em) { html.d #barpos, diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 295d883f..598a0f0f 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -831,6 +831,16 @@ var svg_vol = svg_box + '' + + + '
' + + '
' + + ' new folder

+

📂
\n' + + ' new file

+

📝
\n' + + ' upload 🚀\n' + + '
' + + ' +' + + '
' + + '' + '📨share' ); +var more = ebi('up_quick_more'); +ebi('up_quick').onclick = function(){ + var btn = ebi('up_quick_btn'); + clmod(btn, 'on', 't'); + var isOff = clgot(btn, 'on'); // button has inverted display logic + clmod(more, 'vis', !isOff) +} +ebi('uq_nd').onclick = function(){ + mktemp(true); +}; +ebi('uq_nf').onclick = function(){ + mktemp(); +}; + // up2k ui ebi('op_up2k').innerHTML = ( diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index 3c048c52..efa71300 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -1015,7 +1015,7 @@ function up2k_init(subtle) { modal.confirm(L.u_nav_m, uf, ud, null, L.u_nav_b); } - ebi('u2btn').onclick = nav; + ebi('uq_up').onclick = ebi('u2btn').onclick = nav; var nenters = 0; function ondrag(e) {