diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 6e775d8c..f36b9a85 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1,5 +1,6 @@ :root { color-scheme: dark; + --transparent: transparent; --grid-sz: 10em; --grid-ln: 3; @@ -538,6 +539,9 @@ html, body { margin: 0; padding: 0; } +.noscroll { + overflow: hidden; +} pre, code, tt, #doc, #doc>code { font-family: 'scp', monospace, monospace; font-family: var(--font-mono), 'scp', monospace, monospace; @@ -1140,7 +1144,6 @@ html.dz #flogout { } #widget.open #widgeti{ /* box-shadow: 0 0 1em rgba(0,48,64,0.2); */ - height: 100%; display: block; } @@ -1154,29 +1157,49 @@ html.dz #flogout { #widget.thin #pbarthinpos{ display: block; } +#widget.thin #trackname { + margin-right: auto; +} #widgeti { position: relative; - width: 100%; display: none; } #np_inf { height: 0; } #fshr, -#wtgrid, #wtgrid2, +#wtgrid, #wtico { position: relative; font-size: .9em; top: -.04em; margin-right: .3em; } -#wtgrid, #wtgrid2 { - font-size: .75em; - padding: 0; - top: -.7em; - display: inline-flex; +#wtc { + margin-top: -.5em; + font-size: 1.2em; } +#wtgrid { + display: inline-block; + position: relative; + top: 0; + padding: 0; + margin: .2em; +} +.btn.svgIcon { + width: 1.5em; + height: 1.5em; + padding: .1em; + display: inline-block; + vertical-align: bottom; +} +.btn.svgIcon.gb1 { + width: 1.7em; + height: 1.7em; + padding: 0; +} + #wtico { cursor: pointer; } @@ -1204,11 +1227,12 @@ html.dz #flogout { } #wtoggle, #widgeti { - background: #fff; + background: #ccc; background: var(--bg-u2); } #up_quick { position: absolute; + bottom: 100%; bottom: calc(100% + .4em); right: .4em; font-size: xx-large; @@ -1217,6 +1241,7 @@ html.dz #flogout { transition: all .15s; border-radius: .35em; text-align: right; + background: #ccc; background: var(--bg-u2); border: var(--btn-bg) solid 1px; } @@ -1227,6 +1252,7 @@ html.dz #flogout { margin-bottom: .2em; } #up_quick_more.vis { + display: block; display: grid; } #up_quick_more a:hover { @@ -1427,19 +1453,20 @@ html.a #up_quick .btn.on { box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset; } #pctl { + display: flex; display: grid; grid-template-columns: max-content max-content max-content 20% auto max-content max-content max-content; - align-content: center; align-items: center; - height: 100%; margin-right: .5em; padding: .3em 0; } #pctl .icon { - font-size: 1em; width: 1.5em; height: 1.5em; - text-align: center; +} +#pctl svg { + width: 1.5em; + height: 1.5em; } #pctl .btn { font-size: 1em; @@ -1461,10 +1488,10 @@ html.a #up_quick .btn.on { transition: opacity .15s; } #pvolbg { - height: 100%; + height: 1.3em; + min-width: 1em; padding: .3em; cursor: pointer; - align-content: center; align-items: center; display: flex; } @@ -1497,6 +1524,11 @@ html.a #up_quick .btn.on { display: block; } #ops a { + /* fallback if emojis don't render */ + border: #777 solid 1px; + border-radius: .3em; + + border: var(--transparent) solid 1px; color: var(--a); font-size: 1.5em; padding: .25em .4em; @@ -1527,26 +1559,20 @@ html.y #ops svg circle { } #headerArea{ display: flex; - margin: .5em .5em 0 .5em; -} -.hamburger_line{ - height: .2em; - width: 1.4em; - margin: .3em; - background: var(--a); - border-radius: .1em; + margin: 1em; + margin-bottom: 0; } #srv_name{ + margin-left: .3em; font-size: x-large; - margin-top: .3em; - align-self: baseline; + vertical-align: bottom; } #treeToggleBtn{ - padding: .2em; - margin-top: .3em; - cursor: pointer; - display: block; - align-self: center; + margin: 0; + padding: 0; + width: 2em; + height: 2em; + vertical-align: bottom; } #ops { padding: .3em .6em; @@ -1562,8 +1588,13 @@ html.y #ops svg circle { #acc_pfp { aspect-ratio: 1 / 1; width: 1.25em; + + background: #ccc; + color: #000; + background: var(--a); color: var(--bg); + border: var(--btn-bg) solid 1px; border-radius: .3em; justify-content: center; @@ -1586,7 +1617,8 @@ html.y #ops svg circle { margin: .2em; } #op_bup { - margin-bottom: 1em; + margin: 0; + border-radius: 0 0 .3em .3em; } #op_cfg { display: none; @@ -1625,7 +1657,7 @@ input[type="checkbox"]+label { } input[type="radio"]:checked+label, input[type="checkbox"]:checked+label { - color: #0e0; + color: rgb(9, 185, 9); color: var(--btn-1-bg); } input[type="checkbox"]:checked+label { @@ -1783,6 +1815,7 @@ input.ssconf_v { border: 1px solid var(--bg-u3); transition: width 0.15s; z-index: 4; + padding-bottom: 3em; } #tree, html { @@ -2065,7 +2098,7 @@ html.y #tree.nowrap .ntree a+a:hover { background: #fff; background: var(--bg-u2); border-radius: .3em; - padding: .2em .5em 0 .5em; + padding: .2em .2em .1em .2em; line-height: 2.3em; margin-bottom: 1.5em; } @@ -2601,9 +2634,11 @@ html.y #bbox-overlay figcaption a { margin: 5vh 5vw; border-radius: .5em; border: var(--a) solid 1px; + background: #fff; background: var(--bg); max-width: 66.6em; position: relative; + overflow: auto; } html.c .modalcontent { background: var(--bg-u2); @@ -2623,6 +2658,7 @@ html.c .modalcontent { } .close{ position: absolute; + top: 0; right: 0; margin: .5em; color: var(--fg); @@ -2631,7 +2667,10 @@ html.c .modalcontent { } .closepane { position: absolute; - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; } /* settings */ @@ -2641,6 +2680,9 @@ html.c .modalcontent { min-height: 0; } .splitsub { + /* fallback */ + display: block; + display: flex; flex-direction: column; overflow-y: auto; @@ -2693,6 +2735,10 @@ html.c .modalcontent { } .modal.vis, .dropzone { + /* fallback */ + display: block; + overflow-y: auto; + display: flex; justify-content: center; position: fixed; @@ -3194,8 +3240,12 @@ details { border-radius: .3em; margin: .3em 0; } +details:not(.open) .setting { + display: none; +} summary { cursor: pointer; + background: #ccc; background: var(--bg-u1); color: var(--a); padding: .3em; @@ -3240,6 +3290,7 @@ html.c #treeh, html.a #tree, html.a #treeh { border-radius: 0 .3em 0 0; + background: #fff; background: var(--bg-u2); } html.c #treepar, @@ -3271,6 +3322,7 @@ html.a .opbox, html.a #path, html.a #srch_form, html.a .ghead { + background: #ccc; background: var(--bg-u2); border: 1px solid var(--bg-u3); box-shadow: 0 0 .3em var(--bg-d3); @@ -3532,7 +3584,6 @@ html.d #treepar { padding-bottom: 5em; } .splitsub { - overflow-y: hidden; padding-bottom: .5em; } .divider { @@ -3552,7 +3603,7 @@ html.d #treepar { border: .7em solid var(--bg-u3); transform: rotate(-90deg); position: fixed; - bottom: 4.3em; + bottom: 4em; right: -.7em; opacity: 0; pointer-events: none; @@ -3574,6 +3625,7 @@ html.d #treepar { } #s_nav .btn { padding: .5em; + padding-right: 2em; } } @media (min-width: 70em) { @@ -3736,7 +3788,6 @@ html.ey { --white: #fff; --grey: grey; --silver: silver; - --transparent: transparent; --shadow-color-1: #0a0a0a; --shadow-color-2: #808080; --border-dashed-black: 1px dashed var(--black); @@ -4386,12 +4437,14 @@ html.e #docul { border-left: 0 !important; margin-left: 0 !important; } +html.e #tree_footer { + margin-left: 0.5em; +} html.e #wrap { transform: translateX(calc((var(--negative-space) * 2) - .2em)); padding-right: var(--negative-space); position: relative; margin-right: calc((var(--negative-space) * 2) - .1em); - margin-top: var(--negative-space); margin-left: 1.2em; /*overflow-x: auto; fix for OOB table when screen space is limited (mobile), but removes sticky header*/ } @@ -4426,7 +4479,7 @@ html.e #wtico, html.e #zip1 { box-shadow: 0 0 !important; } -html.e #wtgrid2 { +html.e #wtc { top: 0.2em; } html.e #wfs, @@ -4607,6 +4660,7 @@ html.e #detree { .popup { visibility: hidden; width: fit-content; + background: #000; background: var(--bg-u2); border: 1px solid var(--bg-u3); box-shadow: 0 .5em 1em var(--txt-sh); @@ -4619,7 +4673,10 @@ html.e #detree { bottom: 2.5em; } .under { - inset: calc(100% + .2em) 0 auto 0; + top: calc(100% + .2em); + left: 0; + bottom: auto; + right: 0; text-align: left; width: auto; } @@ -4630,7 +4687,7 @@ html.e #detree { font-size: small; } -#srchfolder_div:focus-within .popup{ +#srchfolder_div:focus-within .popup { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; @@ -4642,49 +4699,3 @@ html.e #detree { color: var(--fg); text-shadow: -1px 1px 1px var(--bg-max); } - -.gridViewIcon, -.listViewIcon{ - width: 1.7em; - height: 1.7em; - padding: .2em; - top: 0; -} -.gridViewIcon{ - display: grid; - grid-template-columns: auto auto; - grid-template-rows: auto auto; -} -.listViewIcon{ - display: grid; - grid-template-rows: auto auto ; -} -.gridSquare{ - margin: .1em; - background: var(--a); - border-radius: .1em; -} -.listRow{ - margin: .3em .1em; - margin-left: .8em; - background: var(--a); - border-radius: .1em; - max-height: .15em; -} -.on div{ - background: var(--btn-1h-fg); -} - -.listRow::before{ - position: absolute; - content: ''; - margin-left: -.7em; - margin-top: -.2em; - width: .3em; - height: .3em; - border: var(--a) solid .15em; - border-radius: .1em; -} -.on ::before{ - border-color: var(--btn-1h-fg); -} diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 0a4e9a6a..7ab353ff 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -18,7 +18,7 @@
-
+ {{ srv_name }}
@@ -38,7 +38,7 @@
-
+

switch to basic browser @@ -102,6 +102,7 @@
{{ "" if sb_lg else logues[0] }}
+
@@ -161,9 +162,6 @@ -
-
-
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index aec315ee..0b72145f 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -754,6 +754,7 @@ modal.load(); // toolbar ebi('ops').innerHTML = ( //'--' + + (IE ? '' + L.ot_noie + '' : '') + '🔎' + (have_del ? '🧯' : '') + '🚀' + @@ -763,7 +764,6 @@ ebi('ops').innerHTML = ( '📟' + '⚙️' + '
👤
' + - (IE ? '' + L.ot_noie + '' : '') + '
' ); @@ -809,7 +809,12 @@ function mktemp(is_dir) { sendit(input.value); // Chrome blurs elements when calling remove for some reason input.onblur = null; - row.remove(); + try{ + row.remove(); + } + catch(e){ + console.log(e); + } }; input.onkeydown = function(e) { if (e.key == "Enter") @@ -924,7 +929,7 @@ ebi('op_up2k').innerHTML = ( '\n' + '
' + - '
' + L.options + '' + + '
' + (IE ? '>> ' : '') + L.options + (IE ? ' <<' : '') + '' + '
' + '
\n' + @@ -1012,7 +1017,7 @@ ebi('op_up2k').innerHTML = ( ' ' + '' + - '
' + L.bup +'
' + '
' + (IE ? '>> ' : '') + L.bup + (IE ? ' <<' : '') + '
' ); @@ -1048,6 +1053,9 @@ ebi('up_outside').onclick = ebi('c_up_btn').onclick = function(){ modaltoggle('up2k'); } +ebi('sum_u2conf').onclick = function(){ + clmod(this.parentElement, 'open', 't'); +} ebi('wrap').insertBefore(mknod('div', 'lazy'), ebi('epi')); @@ -1056,14 +1064,14 @@ x.parentNode.insertBefore(mknod('div', null, ''), x); var bup = ebi('op_bup'); -ebi('bup_tgl').after(bup); -ebi('bup_tgl').onclick = function() { +ebi('bup_tgl').appendChild(bup); +ebi('sum_bup').onclick = function() { var open = !clgot(bup, 'act'); if(open) modaltoggle('bup', true); else modaltoggle('up2k', true); - this.open = !open; + ebi('bup_tgl').open = !open; }; ebi('up_moreopts').onclick = function(){ @@ -1252,21 +1260,21 @@ ebi('op_cfg').innerHTML = ( h.id = '' var subSettings = sections[i].children[1]; - var section = `

${sName}

`; + var section = '

' + sName + '

'; for (var ii = 0; ii < subSettings.children.length; ii++){ var s = subSettings.children[ii]; var info = tt.parse(s.getAttribute('tt')); s.removeAttribute('tt'); //s.href = '#' + sId; - section += `
` + + section += '
' + s.outerHTML + - (info?.length > 0 ? `

${info}

` : '') + + ((info != null && info.length > 0) ? '

' + info + '

' : '') + '
'; } section += '
' ebi('s_list').innerHTML += section; subSettings.innerHTML = ''; - ebi('s_nav').innerHTML += `${sName}\n`; + ebi('s_nav').innerHTML += '' + sName + '\n'; } ebi('s_outside').onclick = ebi('cs_btn').onclick = function(){ @@ -1276,7 +1284,7 @@ ebi('op_cfg').innerHTML = ( // accent color function parseColor (strColor) { - const s = new Option().style; + var s = new Option().style; s.color = strColor; return s.color !== '' ? s.color : ''; } @@ -1314,7 +1322,7 @@ ebi('tree').innerHTML = ( '
    \n' + '
     
    ' ); -ebi('thx_ff').before(ebi('tree_footer')); +ebi('tree').appendChild(ebi('tree_footer')); clmod(ebi('tree'), 'sbar', 1); ebi('goh').textContent = L.goh; QS('#op_mkdir input[type="submit"]').value = L.ab_mkdir; @@ -1370,13 +1378,15 @@ ebi('rcm').innerHTML = ( mktemp(true); } - ebi('acc_pfp').before(ebi('op_acc')); + ebi('opa_acc').appendChild(ebi('op_acc')); ebi('op_acc').onclick = function (e){ e.stopPropagation(); }; })(); -function modaltoggle(dest, show = 't'){ +function modaltoggle(dest, show){ + if(show == null) + show = 't'; if (show == false || show == 't' && QS('#' + dest + '.vis')) dest = ''; @@ -1425,8 +1435,7 @@ function goto(dest) { clmod(obj[a], 'vis'); if (dest) { - var rewritten = ['mkdir', 'new_md']; - if(rewritten.includes(dest)) + if(dest == 'mkdir' || dest == 'new_md') return; var lnk = QS('#ops>a[data-dest=' + dest + ']'), @@ -1443,11 +1452,14 @@ function goto(dest) { return; var modal = ebi(dest); - if(modal != null) + if(modal != null){ clmod(modal, 'vis', true); + } - var page = ebi('op_' + dest) ?? QS('#' + dest + ' .opview') - clmod(page, 'act', 1); + var opd = ebi('op_' + dest); + var page = opd != null ? opd : QS('#' + dest + ' .opview') + if(page != null) + clmod(page, 'act', 1); clmod(lnk, 'act', 1); if(dest == 'bup'){ @@ -1462,6 +1474,7 @@ function goto(dest) { } clmod(document.documentElement, 'op_open', dest); + clmod(document.documentElement, 'noscroll', QS('.modal.vis')); if (treectl) treectl.onscroll(); @@ -2347,25 +2360,18 @@ function canvas_cfg(can) { return r; } - -function glossy_grad(can, h, s, l) { - var g = can.ctx.createLinearGradient(0, 0, 0, can.h), - p = [0, 0.49, 0.50, 1]; - - for (var a = 0; a < p.length; a++) - g.addColorStop(p[a], 'hsl(' + h + ',' + (Array.isArray(s) ? s[a] : s) + '%,' + (Array.isArray(l) ? l[a] : l) + '%)'); - - return g; -} - -function auto_grad(can, color, color2 = '#000') { +function auto_grad(can, color, color2) { + if(color2 == null) + color2 = '#000'; var g = can.ctx.createLinearGradient(0, 0, 0, can.h), p = [0, 0.49, 0.50, 1], mix = [70, 100, 90, 70]; for (var a = 0; a < p.length; a++){ - var c = `color-mix(in xyz, ${color} ${mix[a]}%, ${color2} ${100 - mix[a]}%)`; - g.addColorStop(p[a], c); + var c = 'color-mix(in xyz, ' + color + ' ' + mix[a] + '%, ' + color2 + ' ' + (100 - mix[a]) + '%)'; + var pc = parseColor(c); + if(pc) + g.addColorStop(p[a], parseColor(c)); } return g; @@ -2630,7 +2636,7 @@ var vbar = (function () { if (gradh != gh) { gradh = gh; style1 = auto_grad(r.can, accent, accent); - style2 = light ? `color-mix(${bg} 85%, #000 15%` : `color-mix(${bg} 85%, #fff 15%`; + style2 = light ? 'color-mix(' + bg + ' 85%, #000 15%' : 'color-mix(' + bg + ' 85%, #fff 15%'; } ctx.fillStyle = style2; ctx.fillRect(0, 0, w, h); ctx.fillStyle = style1; ctx.fillRect(0, 0, w * mp.vol, h); @@ -5846,16 +5852,17 @@ var thegrid = (function () { gfiles.style.display = 'none'; gfiles.innerHTML = ( '
    ' + - '' + + '' + + '' + '' + L.gt_zoom + ': ' + '– ' + - '+ ' + L.gt_chop + ': ' + + '+ ' + L.gt_chop + ': ' + '– ' + - '+ ' + L.gt_sort + ': ' + + '+ ' + L.gt_sort + ': ' + '' + L.gt_name + ' ' + '' + L.gt_sz + ' ' + '' + L.gt_ts + ' ' + @@ -5866,16 +5873,15 @@ var thegrid = (function () { lfiles.parentNode.insertBefore(gfiles, lfiles); var ggrid = ebi('ggrid'); - ebi('wtgrid').appendChild(ebi('gridicon_template')); - ebi('wtgrid').appendChild(ebi('listicon_template')); + var svg_grid = svg_box + '' + var svg_list = svg_box + '' + ebi('gridicon_template').innerHTML = svg_grid; + ebi('listicon_template').innerHTML = svg_list; - var clone = ebi('wtgrid').cloneNode(true); - clone.id = 'wtgrid2'; - clone.childNodes.forEach((el)=>{ - clmod(el, 'on', 't'); - }); - - ebi('files').before(clone); + var g_tgl = mknod('a', 'wtgrid', ebi('gridicon_template').outerHTML + ebi('listicon_template').outerHTML); + for(var i = 0; i < g_tgl.childNodes.length; i++) + clmod(g_tgl.childNodes[i], 'on', 't'); + ebi('wtc').appendChild(g_tgl); var r = { 'sz': clamp(fcfg_get('gridsz', 10), 4, 80), @@ -5888,7 +5894,13 @@ var thegrid = (function () { ev(e); var s = this.getAttribute('s'), z = this.getAttribute('z'), - l = this.getAttribute('l'); + l = this.getAttribute('l'), + grdbtn = clgot(this, 'grdbtn'); + + if(grdbtn) { + ebi('griden').click(); + return; + } if (z) return setsz(z > 0 ? r.sz * z : r.sz / (-z)); @@ -5906,7 +5918,7 @@ var thegrid = (function () { r.setdirty(); }; - var links = QSA('#ghead a'); + var links = QSA('#ghead a.btn'); for (var a = 0; a < links.length; a++) links[a].onclick = btnclick; @@ -5926,7 +5938,7 @@ var thegrid = (function () { var vis = has(perms, "read"); gfiles.style.display = vis && r.en ? '' : 'none'; lfiles.style.display = vis && !r.en ? '' : 'none'; - ebi('wtgrid2').style.display = lfiles.style.display; + ebi('wtc').style.display = lfiles.style.display; clmod(ggrid, 'crop', r.crop); clmod(ggrid, 'nocrop', !r.crop); ebi('pro').style.display = ebi('epi').style.display = ebi('lazy').style.display = ebi('treeul').style.display = ebi('treepar').style.display = ''; @@ -6063,8 +6075,11 @@ var thegrid = (function () { var ths = QSA('#ggrid>a'); for (var a = 0, aa = ths.length; a < aa; a++) { - var tr = ebi(ths[a].getAttribute('ref'))?.closest('tr'), - cl = tr?.className || ''; + var _ref = ebi(ths[a].getAttribute('ref')); + if(_ref == null) + continue; + var tr = _ref.closest('tr'), + cl = tr.className || ''; if (noq_href(ths[a]).endsWith('/')) cl += ' dir'; @@ -6339,9 +6354,11 @@ var thegrid = (function () { pbar.onresize(); vbar.onresize(); }); - ebi('wtgrid').onclick = ebi('griden').onclick; - ebi('wtgrid2').onclick = ebi('griden').onclick; - ebi('listicon_template').onclick = ebi('griden').onclick; + + ebi('wtgrid').onclick = + ebi('gridicon_template').onclick = + ebi('listicon_template').onclick = + ebi('griden').onclick; return r; })(); @@ -6824,6 +6841,10 @@ var search_ui = (function () { var path = decodeURI(get_evpath()); ebi('srch_pathv').value = path.slice(1); } + if(IE) + folderSearch.onclick = function() { + clmod(ebi('srch_quickopts'), 'act', 't'); + } folderSearch.oninput = function(){ var v = unsmart(this.value) var nsearch = ebi('srch_namev'); @@ -6895,6 +6916,10 @@ var search_ui = (function () { srch_msg(false, (q == vq) ? '' : L.sm_prev + (vq ? vq : '(*)')); } + function onlyUnique(value, index, array) { + return array.indexOf(value) == index && value.length > 0; + } + function encode_query() { var recursive = ebi('srch_recursivec').checked; var q = ''; @@ -6905,19 +6930,19 @@ var search_ui = (function () { vs = unsmart(ebi('srch_' + k + 'v').value), tvs = []; - if(k == 'path' && vs?.endsWith('/') && !vs?.includes('"')){ + if(k == 'path' && vs.endsWith('/') && !vs.match('"')){ vs = vs.slice(0, -1); - vs = `"${vs}${(recursive ? '*' : '')}"`; + vs = '"' + vs + (recursive ? '*' : '') + '"'; } - function onlyUnique(value, index, array) { - return array.indexOf(value) === index && value?.length > 0; - } - var immune = vs.match(/\B("(?:[^"]|\\")*[^\\]")\B/g)?.filter(onlyUnique) - for(var i = 0; i < immune?.length; i++){ - if(immune[i].length > 0){ - tvs.push(immune[i]); - vs = vs.replace(immune[i], '') + var match = vs.match(/\B("(?:[^"]|\\")*[^\\]")\B/g); + if(match != null){ + var immune = match.filter(onlyUnique) + for(var i = 0; i < immune.length; i++){ + if(immune[i].length > 0){ + tvs.push(immune[i]); + vs = vs.replace(immune[i], '') + } } } @@ -6976,18 +7001,18 @@ var search_ui = (function () { if (tv.slice(0, 1) == '^') { tv = tv.slice(1); } - else if (!(tv.includes(' ') || tv.startsWith('"'))){ + else if (!(tv.match(' ') || tv.startsWith('"'))){ tv = '*' + tv; } if (tv.slice(-1) == '$') { tv = tv.slice(0, -1); } - else if(!(tv.includes(' ') || tv.endsWith('"'))){ + else if(!(tv.match(' ') || tv.endsWith('"'))){ tv += '*'; } - if (tv.includes(' ') && !tv.includes('"')) { + if (tv.match(' ') && !tv.match('"')) { tv = '"' + tv + '"'; } @@ -7268,18 +7293,27 @@ function onwidgetresize(){ var pbarthinpos = ebi('pbarthinpos'); var width = widget.offsetWidth; - var thin = width < 800; //px - var gtc = `max-content max-content max-content ${thin ? '' : '20%'} auto max-content max-content max-content`; + var thin = IE || width < 800; //px + + var gtc = 'max-content max-content max-content ' + (thin ? '' : '20%') + ' auto max-content max-content max-content'; + if(!thin && bar.children.length < gtc.split(' ').length){ + try{ + ebi('trackname').after(ebi('progbar')); + ebi('trackname').after(ebi('altprogbar')); + bar.style.paddingTop = '.3em'; + } + catch (e) { + // unnacounted old browser fallback + console.log(e); + thin = true; + } + } + gtc = 'max-content max-content max-content ' + (thin ? '' : '20%') + ' auto max-content max-content max-content'; if(thin && bar.children.length > gtc.split(' ').length){ pbarthinpos.appendChild(ebi('progbar')); pbarthinpos.appendChild(ebi('altprogbar')); bar.style.paddingTop = '0'; } - else if(!thin && bar.children.length < gtc.split(' ').length){ - ebi('trackname').after(ebi('progbar')); - ebi('trackname').after(ebi('altprogbar')); - bar.style.paddingTop = '.3em'; - } ebi('altprogbar').maxWidth = thin ? '' : '40vw' bar.style.gridTemplateColumns = gtc; @@ -8314,6 +8348,8 @@ var treectl = (function () { onresize(); } + var svg_hamburger = svg_box + '' + ebi('treeToggleBtn').innerHTML = svg_hamburger; ebi('treeToggleBtn').setAttribute('tt', L.tt_entree); ebi('treeToggleBtn').onclick = r.toggleTree; @@ -8628,7 +8664,7 @@ var filecols = (function () { r.uivis = function () { var hcols = ebi('hcols'); var hcolDiv = hcols.parentElement.parentElement; - QS(`a[href='#${hcolDiv.id}']`).style.display = hcolDiv.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none'; + QS("a[href='#" + hcolDiv.id + "']").style.display = hcolDiv.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none'; }; r.set_style = function (unhide) { @@ -9553,7 +9589,7 @@ function show_md(md, name, div, url, depth) { if (depth) { clmod(div, 'raw', 1); div.textContent = "--[ " + name + " ]---------\r\n" + md; - return toast.warn(10, errmsg + (WebAssembly ? 'failed to load marked.js' : 'your browser is too old')); + return toast.warn(3, errmsg + (WebAssembly ? 'failed to load marked.js' : 'your browser is too old')); } wfp_debounce.n--; @@ -10234,24 +10270,24 @@ var rcm = (function () { var vw = document.documentElement.clientWidth; var maxh = Math.min(y, vh / 2); - menu.style.maxHeight = `calc(100vh - ${maxh}px - 2em)`; + menu.style.maxHeight = 'calc(100vh - ' + maxh + 'px - 2em)'; if(y > vh / 2){ // low click => menu upwards menu.style.top = ''; - menu.style.bottom = `${vh - y}px`; + menu.style.bottom = (vh - y) + 'px'; } else{ - menu.style.top = `${y}px`; + menu.style.top = y + 'px'; menu.style.bottom = ''; } if(x > vw / 2){ // far right click => menu leftwards menu.style.left = ''; - menu.style.right = `${vw - x}px`; + menu.style.right = (vw - x) + 'px'; } else{ - menu.style.left = `${x}px`; + menu.style.left = x + 'px'; menu.style.right = ''; } menu.style.display = 'block'; diff --git a/copyparty/web/splash.css b/copyparty/web/splash.css index c2003a80..72ccfc34 100644 --- a/copyparty/web/splash.css +++ b/copyparty/web/splash.css @@ -26,7 +26,10 @@ html { } #outer { - inset: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; position: absolute; display: flex; flex-direction: column; diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index efa71300..3205980e 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -50,8 +50,21 @@ catch (ex) { up2k = up2k_init(false); } catch (ex) { + ebi('u2conf').style.display = + ebi('u2btn_ct').style.display = + ebi('u2c3t').style.display = + ebi('up_info').style.display = + ebi('opa_up').style.display = + 'none' + + ebi('uq_up').onclick = function(){ + modaltoggle('bup', true); + ebi('bup_btn').click(); + } + console.log('up2k init failed:', ex); - toast.err(10, 'could not initialize up2k\n\n' + basenames(ex)); + toast.err(3, 'could not initialize up2k\n\n' + basenames(ex)); + } } treectl.onscroll(); @@ -1055,7 +1068,7 @@ function up2k_init(subtle) { return onovercmn(this, e, true); } function checkDropMode(){ - if(ebi('fsearch')?.checked){ + if(ebi('fsearch').checked){ ebi('srch_zd').style.display = ''; ebi('up_zd').style.display = 'none'; ebi('srch_dz').style.display = ''; diff --git a/copyparty/web/util.js b/copyparty/web/util.js index c23dec1a..521ac1a2 100644 --- a/copyparty/web/util.js +++ b/copyparty/web/util.js @@ -1552,7 +1552,7 @@ var tt = (function () { }; r.parse = function(msg){ - if(!(msg?.length > 0)) + if(msg == null || msg.length == 0) return msg; if (msg.startsWith('`')) { var x = false;