mirror of
https://github.com/9001/copyparty.git
synced 2026-06-19 04:32:26 -06:00
changed the entire layout, folder search now overlays ops, expands more options via separate button
This commit is contained in:
Til Schmitter
parent
8bb1ae0734
commit
ad900e34bd
|
|
@ -38,12 +38,13 @@
|
|||
--sel-fg: var(--bg-d1);
|
||||
--sel-bg: var(--fg);
|
||||
|
||||
--a-hil: hsl(from color-mix(var(--a) 80%, var(--fg-max) 20%) h 105% l);
|
||||
--a-dark: hsl(from color-mix(var(--a) 70%, var(--bg-max) 30%) h 110% l); /* warning text etc */
|
||||
--a-hil: hsl(from color-mix(var(--a) 80%, var(--fg-max) 20%) h calc(s * 1.2) l);
|
||||
--a-dark: hsl(from color-mix(var(--a) 60%, var(--bg-max) 40%) h calc(s * 1.3) l); /* warning text etc */
|
||||
--a-gray: hsl(from var(--a) h 0 l);
|
||||
|
||||
--btn-fg: var(--a);
|
||||
--btn-bg: rgba(128,128,128,0.15);
|
||||
--btn-bg: color-mix(var(--bg-max) 85%, var(--fg-max) 20%);
|
||||
--btn-h-fg: var(--a-hil);
|
||||
--btn-h-bg: hsl(from color-mix(var(--a-gray) 65%, var(--bg-max) 35%) h 0 l);
|
||||
--btn-1-fg: var(--bg);
|
||||
|
|
@ -206,10 +207,11 @@ html.y {
|
|||
html.a {
|
||||
--op-aa-sh: 0 0 .2em var(--bg-d3) inset;
|
||||
|
||||
--btn-bs: 0 0 .2em var(--bg-d3);
|
||||
--btn-bs: .1em .2em .1em var(--bg-half);
|
||||
--btn-bb: 1px solid var(--bg-u3);
|
||||
}
|
||||
html.az {
|
||||
--btn-1-bs: 0 0 .1em var(--fg) inset;
|
||||
--btn-1-bs: .05em .1em .2em var(--a-dark) inset;
|
||||
}
|
||||
html.ay {
|
||||
--op-aa-sh: 0 .1em .2em #ccc;
|
||||
|
|
@ -575,26 +577,52 @@ html .ayjump:focus-visible {
|
|||
}
|
||||
#pathBar {
|
||||
display: flex;
|
||||
margin: 0 0 1em 0;
|
||||
margin: 0 0 .5em 0;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: .6em;
|
||||
z-index: 4;
|
||||
}
|
||||
#wfp.shifted {
|
||||
margin-left: 2em;
|
||||
}
|
||||
#path {
|
||||
color: var(--fg);
|
||||
text-shadow: 1px 1px 0 var(--bg-max);
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin: 0 .4em 0 0;
|
||||
/* min-width: 10em; */
|
||||
align-content: center;
|
||||
padding: .2em;
|
||||
font-size: 1.4em;
|
||||
font-size: 1.2em;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#folder_search {
|
||||
max-width: 12em;
|
||||
margin-top: .3em;
|
||||
height: 1.8em;
|
||||
margin-bottom: 0 !important;
|
||||
#pathBar #folder_search {
|
||||
margin: 0;
|
||||
height: calc(100% - .5em);
|
||||
width: calc(100% - .6em);
|
||||
right: 0;
|
||||
}
|
||||
#qs_btns {
|
||||
position: absolute;
|
||||
right: .2em;
|
||||
top: .1em;
|
||||
font-size: 1.3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
#qs_btns a {
|
||||
background: color-mix(var(--txt-bg), transparent);
|
||||
width: 1em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: .3em;
|
||||
}
|
||||
#qs_btns a:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
html.y #path {
|
||||
text-shadow: none;
|
||||
|
|
@ -627,7 +655,7 @@ html.y #path {
|
|||
color: var(--tab-alt);
|
||||
}
|
||||
a, #blogout, #files tbody div a:last-child {
|
||||
color: var(--a);
|
||||
color: var(--fg);
|
||||
padding: .2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -636,8 +664,8 @@ a, #blogout, #files tbody div a:last-child {
|
|||
margin: -.2em;
|
||||
text-shadow: 1px 1px 0px var(--bg-max);
|
||||
}
|
||||
#ops input[type=submit]:hover,
|
||||
#goh:hover,
|
||||
#blogout:hover,
|
||||
a:hover {
|
||||
color: var(--a-hil);
|
||||
background: var(--a-h-bg);
|
||||
|
|
@ -772,14 +800,12 @@ html.y #files span.fsz_P { font-weight: bold }
|
|||
margin-right: 1em\9;
|
||||
}
|
||||
#path i {
|
||||
width: 1.05em;
|
||||
height: 1.05em;
|
||||
margin: -.5em .15em -.15em -.7em;
|
||||
width: 2em;
|
||||
height: 2.5em;
|
||||
margin: -1em .3em -1em -1.7em;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(255,224,192,0.3);
|
||||
border-width: .05em .05em 0 0;
|
||||
transform: rotate(45deg);
|
||||
background: linear-gradient(45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35));
|
||||
transform: skew(-25deg);
|
||||
background: linear-gradient(70deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35));
|
||||
}
|
||||
html.y #path i {
|
||||
background: none;
|
||||
|
|
@ -1195,8 +1221,9 @@ html.dz #flogout {
|
|||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: .1em;
|
||||
margin: .1em;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
vertical-align: center;
|
||||
}
|
||||
.btn.svgIcon.gb1 {
|
||||
width: 1.7em;
|
||||
|
|
@ -1229,10 +1256,12 @@ html.dz #flogout {
|
|||
padding: 0 0 0 .1em;
|
||||
color: var(--fg-max);
|
||||
}
|
||||
#up_quick,
|
||||
#wtoggle,
|
||||
#widgeti {
|
||||
background: #ccc;
|
||||
background: var(--bg-u2);
|
||||
border: 1px solid var(--bg-u3);
|
||||
}
|
||||
#up_quick {
|
||||
position: absolute;
|
||||
|
|
@ -1245,9 +1274,6 @@ html.dz #flogout {
|
|||
transition: all .15s;
|
||||
border-radius: .35em;
|
||||
text-align: right;
|
||||
background: #ccc;
|
||||
background: var(--bg-u2);
|
||||
border: var(--btn-bg) solid 1px;
|
||||
}
|
||||
#up_quick_more {
|
||||
display: none;
|
||||
|
|
@ -1275,26 +1301,27 @@ html.dz #flogout {
|
|||
margin-top: -1.5em;
|
||||
}
|
||||
#up_quick .btn{
|
||||
box-shadow: none;
|
||||
transition: all .25s;
|
||||
margin: -1px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: max-content;
|
||||
}
|
||||
html.a #up_quick .btn {
|
||||
transform: rotate(90deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
html.a #up_quick .btn.on {
|
||||
transform: rotate(0);
|
||||
transform: rotate(-90deg);
|
||||
box-shadow: -.05em .02em .3em color-mix(var(--a-dark) 70%, transparent 30%);
|
||||
}
|
||||
#up_quick .btn .rotatable {
|
||||
transition: all .20s;
|
||||
transform: translateY(-.04em) rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
|
||||
background: none;
|
||||
}
|
||||
#up_quick .btn.on .rotatable {
|
||||
transform: translateY(-.04em);
|
||||
transform: none;
|
||||
}
|
||||
#wfs, #wfm, #wzip, #wnp, #wm3u {
|
||||
display: none;
|
||||
|
|
@ -1461,13 +1488,18 @@ html.a #up_quick .btn.on {
|
|||
display: grid;
|
||||
grid-template-columns: max-content max-content max-content 20% auto max-content max-content max-content;
|
||||
align-items: center;
|
||||
margin-right: .5em;
|
||||
padding: .3em 0;
|
||||
margin-right: .4em;
|
||||
margin-left: .1em;
|
||||
padding: .1em;
|
||||
}
|
||||
#pctl .icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
#pctl .icon.btn {
|
||||
padding: .2em;
|
||||
margin: .1em;
|
||||
}
|
||||
#pctl svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
|
@ -1523,10 +1555,18 @@ html.a #up_quick .btn.on {
|
|||
}
|
||||
.opview {
|
||||
display: none;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.opview.act {
|
||||
display: block;
|
||||
}
|
||||
#op_search.opview.act {
|
||||
display: none;
|
||||
}
|
||||
#op_search.opview.act.vis {
|
||||
display: block;
|
||||
}
|
||||
#ops input[type=submit],
|
||||
#ops a {
|
||||
/* fallback if emojis don't render */
|
||||
border: #777 solid 1px;
|
||||
|
|
@ -1535,7 +1575,7 @@ html.a #up_quick .btn.on {
|
|||
border: var(--transparent) solid 1px;
|
||||
color: var(--a);
|
||||
font-size: 1.5em;
|
||||
padding: .25em .4em;
|
||||
padding: 0 .4em;
|
||||
margin: 0;
|
||||
}
|
||||
#ops a.act {
|
||||
|
|
@ -1547,7 +1587,7 @@ html.a #up_quick .btn.on {
|
|||
border-bottom: .3em solid var(--a);
|
||||
box-shadow: var(--op-aa-sh);
|
||||
margin: -.2em 0 -.6em 0;
|
||||
padding-top: .4em;
|
||||
padding-top: .2em;
|
||||
}
|
||||
#ops a svg {
|
||||
width: 1.75em;
|
||||
|
|
@ -1557,33 +1597,30 @@ html.a #up_quick .btn.on {
|
|||
html.y #ops svg circle {
|
||||
stroke: black;
|
||||
}
|
||||
#topBar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#headerArea{
|
||||
display: flex;
|
||||
margin: .7em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#srv_name{
|
||||
margin-left: .3em;
|
||||
padding-top: .5em;
|
||||
margin-left: 2.2em;
|
||||
font-size: x-large;
|
||||
vertical-align: bottom;
|
||||
text-wrap-mode: nowrap;
|
||||
display: block;
|
||||
}
|
||||
#treeToggleBtn{
|
||||
margin: 0;
|
||||
z-index: 6;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: .5em;
|
||||
padding: 0;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
#ops {
|
||||
padding: .3em .6em;
|
||||
padding: .25em .5em;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
max-height: 2.5em;
|
||||
border-radius: 0 0 0 .3em;
|
||||
height: 2em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
#noie {
|
||||
color: #b60;
|
||||
|
|
@ -1596,7 +1633,8 @@ html.y #ops svg circle {
|
|||
background: #ccc;
|
||||
color: #000;
|
||||
|
||||
background: var(--a);
|
||||
background: var(--btn-1-bg);
|
||||
box-shadow: var(--btn-1-bs);
|
||||
color: var(--bg);
|
||||
|
||||
border: var(--btn-bg) solid 1px;
|
||||
|
|
@ -1613,8 +1651,6 @@ html.y #ops svg circle {
|
|||
border-radius: .3em;
|
||||
border-width: 1px;
|
||||
max-width: 41em;
|
||||
margin: .5em;
|
||||
margin-left: auto;
|
||||
}
|
||||
.opbox input {
|
||||
position: relative;
|
||||
|
|
@ -1644,6 +1680,9 @@ html.y #ops svg circle {
|
|||
min-width: 3em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
input[type=color] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.opview select {
|
||||
padding: .3em;
|
||||
margin: .2em 0 ;
|
||||
|
|
@ -1752,7 +1791,7 @@ input.ssconf_v {
|
|||
white-space: pre;
|
||||
color: var(--a);
|
||||
min-height: 1em;
|
||||
margin: .2em 0 -1em 1.6em;
|
||||
margin-top: .2em;
|
||||
}
|
||||
#srch_q.err {
|
||||
color: var(--srv-3);
|
||||
|
|
@ -1773,6 +1812,7 @@ input.ssconf_v {
|
|||
|
||||
#wfp{
|
||||
margin: 0 .3em 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#wfp a {
|
||||
display: inline-block;
|
||||
|
|
@ -1803,13 +1843,14 @@ input.ssconf_v {
|
|||
}
|
||||
|
||||
#wrap {
|
||||
margin: .5em 1em 0 .7em;
|
||||
margin: .6em 1em 0 .7em;
|
||||
min-height: 70vh;
|
||||
padding-bottom: 7em;
|
||||
}
|
||||
#tree {
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -1819,28 +1860,28 @@ input.ssconf_v {
|
|||
box-shadow: 0 0 1em var(--bg-d2), 0 -1px 0 rgba(128,128,128,0.3);
|
||||
border: 1px solid var(--bg-u3);
|
||||
transition: width 0.15s;
|
||||
z-index: 4;
|
||||
z-index: 5;
|
||||
padding-bottom: 3em;
|
||||
}
|
||||
#tree,
|
||||
html {
|
||||
scrollbar-color: var(--a) var(--bg-u3);
|
||||
}
|
||||
#treeh {
|
||||
#treesuperh {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--tree-bg);
|
||||
}
|
||||
#treeh {
|
||||
height: 2.2em;
|
||||
line-height: 2.2em;
|
||||
background: var(--tree-bg);
|
||||
border-bottom: 1px solid var(--bg-d3);
|
||||
overflow: auto;
|
||||
display: block;
|
||||
padding: .3em 0;
|
||||
}
|
||||
#treepar {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
background: var(--tree-bg);
|
||||
left: -.96em;
|
||||
|
|
@ -1871,8 +1912,9 @@ html {
|
|||
.btn {
|
||||
color: var(--btn-fg);
|
||||
background: #eee;
|
||||
background: var(--btn-bg);
|
||||
background: linear-gradient(-5deg, var(--btn-bg), color-mix(var(--a-gray) 20%, transparent 80%));
|
||||
box-shadow: var(--btn-bs);
|
||||
border: 1px solid var(--bg-u3);
|
||||
border-bottom: var(--btn-bb);
|
||||
border-radius: .3em;
|
||||
padding: .2em .4em;
|
||||
|
|
@ -1883,13 +1925,15 @@ html {
|
|||
white-space-collapse: preserve;
|
||||
position: relative;
|
||||
}
|
||||
#wfp .btn {
|
||||
font-size: 1em;
|
||||
padding: .15em;
|
||||
margin: 0 .1em 0 0;
|
||||
}
|
||||
html.c .btn,
|
||||
html.a .btn {
|
||||
border-radius: .2em;
|
||||
}
|
||||
html.dz .btn {
|
||||
font-size: 1em;
|
||||
}
|
||||
.btn:hover {
|
||||
color: var(--btn-h-fg);
|
||||
background: var(--btn-h-bg);
|
||||
|
|
@ -1946,11 +1990,15 @@ html.dz .btn {
|
|||
color: #fff;
|
||||
color: var(--fg-max);
|
||||
}
|
||||
#tree .ntree a + a.hl:hover {
|
||||
background: var(--btn-1h-bg);
|
||||
}
|
||||
#tree ul a.hl {
|
||||
color: #fff;
|
||||
color: var(--btn-1-fg);
|
||||
background: #000;
|
||||
background: var(--btn-1-bg);
|
||||
box-shadow: var(--btn-1-bs);
|
||||
text-shadow: none;
|
||||
}
|
||||
#tree ul a.ld::before {
|
||||
|
|
@ -1990,9 +2038,12 @@ html.y #tree.nowrap .ntree a+a:hover {
|
|||
color: var(--fg-max);
|
||||
}
|
||||
#docul a:hover,
|
||||
#tree .ntree a+a:hover {
|
||||
#tree .ntree a + a:hover {
|
||||
background: var(--btn-h-bg);
|
||||
color: var(--fg-max);
|
||||
color: var(--btn-h-fg);
|
||||
}
|
||||
#tree .ntree a + a.hl:hover {
|
||||
color: var(--btn-1-fg);
|
||||
}
|
||||
.ntree a:first-child {
|
||||
font-family: 'scp', monospace, monospace;
|
||||
|
|
@ -2062,7 +2113,6 @@ html.y #tree.nowrap .ntree a+a:hover {
|
|||
#op_unpost,
|
||||
#srch_form {
|
||||
max-width: none;
|
||||
margin: .5em;
|
||||
}
|
||||
.opwide>div {
|
||||
display: inline-block;
|
||||
|
|
@ -2103,14 +2153,14 @@ html.y #tree.nowrap .ntree a+a:hover {
|
|||
background: #fff;
|
||||
background: var(--bg-u2);
|
||||
border-radius: .3em;
|
||||
padding: .2em .2em .1em .2em;
|
||||
padding: 0 .2em;
|
||||
line-height: 2.3em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
#hdoc,
|
||||
#ghead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: 3.7em;
|
||||
z-index: 3;
|
||||
}
|
||||
.ghead .btn {
|
||||
|
|
@ -2644,6 +2694,7 @@ html.y #bbox-overlay figcaption a {
|
|||
max-width: 66.6em;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
box-shadow: .1em .2em 1em var(--bg-d2);
|
||||
}
|
||||
html.c .modalcontent {
|
||||
background: var(--bg-u2);
|
||||
|
|
@ -2706,6 +2757,10 @@ html.c .modalcontent {
|
|||
#s_nav .btn{
|
||||
padding-right: 2em;
|
||||
border: 1px solid var(--bg-u3);
|
||||
color: var(--fg);
|
||||
}
|
||||
#s_nav .btn:hover{
|
||||
color: var(--a-hil);
|
||||
}
|
||||
.setting{
|
||||
padding: .5em;
|
||||
|
|
@ -2715,7 +2770,7 @@ html.c .modalcontent {
|
|||
overflow-x: auto;
|
||||
}
|
||||
.setting:hover{
|
||||
background: var(--bg-u3);
|
||||
background: var(--bg-u1);
|
||||
}
|
||||
.s_desc{
|
||||
margin: 0 0 0 0;
|
||||
|
|
@ -3260,11 +3315,23 @@ summary {
|
|||
summary:hover {
|
||||
background: var(--bg-u3);
|
||||
}
|
||||
#opa_acc,
|
||||
#srchfolder_div {
|
||||
#actionsArea {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: max-content;
|
||||
margin-left: auto;
|
||||
}
|
||||
#opa_acc {
|
||||
position: relative;
|
||||
margin-left: .3em;
|
||||
}
|
||||
#srchfolder_div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 3.8em;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: .2em;
|
||||
margin-left: .3em;
|
||||
}
|
||||
|
||||
|
|
@ -3290,11 +3357,8 @@ html.b #pctl {
|
|||
html.dz .opview input.i {
|
||||
width: calc(100% - 18em);
|
||||
}
|
||||
html.c #tree,
|
||||
html.c #treeh,
|
||||
html.a #tree,
|
||||
html.a #treeh {
|
||||
border-radius: 0 .3em 0 0;
|
||||
#tree,
|
||||
#treesuperh {
|
||||
background: #fff;
|
||||
background: var(--bg-u2);
|
||||
}
|
||||
|
|
@ -3388,7 +3452,7 @@ html.ay #path {
|
|||
background: #f7f7f7;
|
||||
box-shadow: 0 0 .3em #bbb;
|
||||
}
|
||||
html.ay #treeh,
|
||||
html.ay #treesuperh,
|
||||
html.ay #treepar {
|
||||
background: #f7f7f7;
|
||||
border-color: #ddd;
|
||||
|
|
@ -3542,22 +3606,45 @@ html.d #treepar {
|
|||
|
||||
|
||||
/* basically a mobile / phone layout */
|
||||
#pathBar.thin {
|
||||
display: block;
|
||||
|
||||
#path {
|
||||
height: 1.8em;
|
||||
margin: .5em 0 0 0;
|
||||
}
|
||||
#wfp.shifted {
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
#actionsArea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
html.e #pathBar.thin #path {
|
||||
margin: 0;
|
||||
}
|
||||
html:not(.e) #wrap.thin {
|
||||
#ghead {
|
||||
top: 7em;
|
||||
}
|
||||
}
|
||||
html.e #wrap.thin {
|
||||
#ghead {
|
||||
top: 5.1em;
|
||||
}
|
||||
}
|
||||
@media (max-width: 50em){
|
||||
html:not(.e) body {
|
||||
margin: 1em;
|
||||
}
|
||||
html:not(.e) #topBar {
|
||||
display: block;
|
||||
html:not(.e) #treeToggleBtn {
|
||||
margin: .8em 0 0 1.2em;
|
||||
}
|
||||
#headerArea {
|
||||
margin: .5em;
|
||||
}
|
||||
html:not(.e) #ops {
|
||||
margin: .5em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
#tree {
|
||||
z-index: 4;
|
||||
html:not(.e) #srv_name {
|
||||
padding-top: .8em;
|
||||
margin-left: 2.9em;
|
||||
}
|
||||
#widget, #wrap {
|
||||
margin-left: 0 !important;
|
||||
|
|
@ -3622,38 +3709,24 @@ html.d #treepar {
|
|||
#up_quick_more a {
|
||||
padding: .6em;
|
||||
}
|
||||
html:not(.e) #opa_acc {
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
right: .3em;
|
||||
font-size: xx-large !important;
|
||||
}
|
||||
#s_nav .btn {
|
||||
padding: .5em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 70em) {
|
||||
html.d #barpos,
|
||||
html.b #barpos,
|
||||
html.d #barbuf,
|
||||
html.b #barbuf {
|
||||
width: calc(100% - 19em);
|
||||
left: 8em;
|
||||
#pathBar{
|
||||
margin: .5em;
|
||||
top: 1em;
|
||||
}
|
||||
html.d #ops,
|
||||
html.b #ops {
|
||||
padding-left: 1.7em;
|
||||
#pathBar.thin #wfp.shifted {
|
||||
margin-left: 2.1em;
|
||||
}
|
||||
html.d .opview,
|
||||
html.b .opview {
|
||||
margin: 1em;
|
||||
}
|
||||
html.d #path,
|
||||
html.b #path {
|
||||
padding-left: 1.3em;
|
||||
#wrap.thin {
|
||||
#ghead {
|
||||
top: 7.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 35em) {
|
||||
#ops>a[data-dest="msg"],
|
||||
#ops>a[data-dest="new_md"],
|
||||
|
|
@ -3665,17 +3738,10 @@ html.d #treepar {
|
|||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#pathBar {
|
||||
display: block;
|
||||
}
|
||||
#path {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 54em) {
|
||||
html.b #ops {
|
||||
margin-top: 1.7em;
|
||||
#opa_msg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@supports (display: grid) and (gap: 1em) {
|
||||
|
|
@ -3932,6 +3998,10 @@ html.e {
|
|||
html.e * {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
html.e #acc_pfp {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
}
|
||||
html.e details[open] summary:hover,
|
||||
html.e #files,
|
||||
html.e #u2conf input[type="checkbox"]:hover + label,
|
||||
|
|
@ -4122,17 +4192,9 @@ html.e .opbox {
|
|||
padding-top: 1em;
|
||||
max-width: 100vw;
|
||||
}
|
||||
html.e #topBar {
|
||||
margin-bottom: -.9em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
html.e #headerArea {
|
||||
z-index: 1;
|
||||
top: -.8em;
|
||||
position: relative;
|
||||
}
|
||||
html.e #srv_name {
|
||||
color: var(--bg-max);
|
||||
padding-top: .2em;
|
||||
margin-left: 1.4em;
|
||||
}
|
||||
html.e #ghead,
|
||||
html.e #ops a {
|
||||
|
|
@ -4158,8 +4220,7 @@ html.e #blogout:hover {
|
|||
|
||||
html.e #ops a.act {
|
||||
border-bottom: 0;
|
||||
height: 1.7em;
|
||||
margin-top: -.3em;
|
||||
margin-top: -.6em;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
box-shadow: var(--shadow-inset-left), var(--shadow-inset-top),
|
||||
|
|
@ -4272,13 +4333,16 @@ html.e #ghead {
|
|||
gap: 0.4em;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
top: 0px;
|
||||
top: 2.5em;
|
||||
border-radius: 0px;
|
||||
}
|
||||
html.e #ghead a {
|
||||
margin: 0;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
html.e #treeToggleBtn {
|
||||
margin: 0;
|
||||
}
|
||||
html.e ::-webkit-scrollbar,
|
||||
html.e::-webkit-scrollbar {
|
||||
width: 16px !important;
|
||||
|
|
@ -4422,6 +4486,8 @@ html.e #treepar {
|
|||
border-bottom: var(--border-dashed-black);
|
||||
margin-left: calc(2.1em - (1em - var(--negative-space))) !important;
|
||||
}
|
||||
html.e #ghead,
|
||||
html.e #op_acc,
|
||||
html.e #path,
|
||||
html.e #widgeti,
|
||||
html.e #wtoggle,
|
||||
|
|
@ -4447,22 +4513,31 @@ html.e #wrap {
|
|||
padding-right: var(--negative-space);
|
||||
position: relative;
|
||||
margin-right: calc((var(--negative-space) * 2) - .1em);
|
||||
margin-left: 1.2em;
|
||||
margin-left: 4px;
|
||||
margin-top: 0;
|
||||
/*overflow-x: auto; fix for OOB table when screen space is limited (mobile), but removes sticky header*/
|
||||
}
|
||||
html.e #pathBar {
|
||||
top: 0;
|
||||
background: var(--ttlbar);
|
||||
}
|
||||
html.e input[type="radio"] {
|
||||
accent-color: #232323;
|
||||
}
|
||||
html.e #pathBar {
|
||||
margin: 0;
|
||||
}
|
||||
html.e #path {
|
||||
background: var(--bg-u2);
|
||||
margin-right: 0;
|
||||
}
|
||||
html.e #path i {
|
||||
border: 1px solid var(--w);
|
||||
border-color: var(--w);
|
||||
margin: 0;
|
||||
border-width: 0.1em 0.1em 0 0;
|
||||
height: 0.5em;
|
||||
width: 0.5em;
|
||||
border-width: 0 0.1em 0 0;
|
||||
transform: none;
|
||||
width: 1.8em;
|
||||
box-shadow: inset -1px 0 var(--shadow-color-1), inset -2px 0 var(--grey);
|
||||
}/*
|
||||
html.e #hovertree:after {
|
||||
color: red;
|
||||
|
|
@ -4613,7 +4688,7 @@ html.e #detree {
|
|||
background: var(--bg-u5);
|
||||
}
|
||||
#spaceUsed_bar{
|
||||
background: var(--btn-1-bg);
|
||||
background: linear-gradient(to right, transparent, var(--a-dark), var(--a));
|
||||
}
|
||||
#spaceTotal_bar {
|
||||
margin-bottom: .5em;
|
||||
|
|
@ -4649,8 +4724,10 @@ html.e #detree {
|
|||
margin-top: .3em;
|
||||
text-align: right;
|
||||
}
|
||||
#ops input[type=submit],
|
||||
#ops #goh {
|
||||
font-size: medium;
|
||||
padding-bottom: .2em;
|
||||
}
|
||||
|
||||
.popup.act,
|
||||
|
|
|
|||
|
|
@ -16,14 +16,69 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="topBar">
|
||||
<div id="headerArea">
|
||||
<a href="#" id="treeToggleBtn" class="tgl btn"></a>
|
||||
<a href="#" id="treeToggleBtn" class="tgl btn"></a>
|
||||
|
||||
<div id="tree" class="sbar">
|
||||
<div id="treesuperh">
|
||||
<a href="/" id="srv_name"><span id="favico_onpage"></span>{{ srv_name }}</a>
|
||||
<div id="treeh"></div>
|
||||
<ul class="ntree" id="treepar"></ul>
|
||||
</div>
|
||||
<ul id="docul"></ul>
|
||||
<ul class="ntree" id="treeul"></ul>
|
||||
<div id="thx_ff"> </div>
|
||||
|
||||
<div id="tree_footer">
|
||||
<div id="rtt_latency"></div>
|
||||
|
||||
<div id="spaceFree">{{ space_free }} free of {{ space_total }}</div>
|
||||
|
||||
<div id="spaceTotal_bar">
|
||||
<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
|
||||
</div>
|
||||
|
||||
<span id="op_acc" class="opview popup under">
|
||||
<div id="acc_button" class="tgl btn on">
|
||||
<p id="acc_name"></p>
|
||||
</div>
|
||||
<div id="acessType" style="display: block;"></div>
|
||||
<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
|
||||
<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="act" value="logout" />
|
||||
<input id="blogout" type="submit" />
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
<div id="ops"></div>
|
||||
</div>
|
||||
|
||||
<div id="wrap">
|
||||
|
||||
<div id="pathBar">
|
||||
<h2 id="wfp" class="shifted"></h2>
|
||||
<h1 id="path">
|
||||
{%- for n in vpnodes %}
|
||||
<a href="{{ r }}/{{ n[0] }}">{{ n[1] }}</a>
|
||||
{%- endfor %}
|
||||
</h1>
|
||||
|
||||
<div id="actionsArea">
|
||||
<div id="ops"></div>
|
||||
|
||||
<div id="srchfolder_div">
|
||||
<input id="folder_search" type="text"/>
|
||||
<span id="srch_quickopts" class="popup under">
|
||||
<input type="checkbox" id="srch_recursivec" checked="true">
|
||||
<label for="srch_recursivec" id="srch_recursivelbl" tabindex="0"></label>
|
||||
</span>
|
||||
<div id="qs_btns">
|
||||
<a id="moresearch">▾</a>
|
||||
<a id="closesearch">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="op_search" class="opview">
|
||||
{%- if have_tags_idx %}
|
||||
<div id="srch_form" class="tags opbox"></div>
|
||||
|
|
@ -72,27 +127,6 @@
|
|||
|
||||
<div id="op_cfg" class="opview opbox opwide"></div>
|
||||
|
||||
<div id="tree"></div>
|
||||
|
||||
<div id="wrap">
|
||||
|
||||
<div id="pathBar">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h2 id="wfp"></h2>
|
||||
<h1 id="path">
|
||||
{%- for n in vpnodes %}
|
||||
<a href="{{ r }}/{{ n[0] }}">{{ n[1] }}</a>
|
||||
{%- endfor %}
|
||||
</h1>
|
||||
</div>
|
||||
<div id="srchfolder_div">
|
||||
<input id="folder_search" type="text"/>
|
||||
<span id="srch_quickopts" class="popup under">
|
||||
<input type="checkbox" id="srch_recursivec" checked="true">
|
||||
<label for="srch_recursivec" id="srch_recursivelbl" tabindex="0"></label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%- if doc %}
|
||||
<div id="bdoc"><pre>{{ doc|e }}</pre></div>
|
||||
|
|
@ -138,30 +172,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tree_footer">
|
||||
<div id="rtt_latency"></div>
|
||||
|
||||
<div id="spaceFree">{{ space_free }} free of {{ space_total }}</div>
|
||||
|
||||
<div id="spaceTotal_bar">
|
||||
<div id="spaceUsed_bar" style="width: {{ space_used_percent }}%;"></div>
|
||||
</div>
|
||||
|
||||
<span id="op_acc" class="opview popup under">
|
||||
<div id="acc_button" class="tgl btn on">
|
||||
<p id="acc_name"></p>
|
||||
</div>
|
||||
<div id="acessType" style="display: block;"></div>
|
||||
<a href="{{ r }}/?h" id="goh" style="display: block;">control-panel</a>
|
||||
<form id="flogout" style="display: block;" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="act" value="logout" />
|
||||
<input id="blogout" type="submit" />
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="srv_info" style="display: none;"><span>{{ srv_info }}</span></div>
|
||||
|
||||
<div id="widget"></div>
|
||||
|
|
@ -178,7 +188,7 @@
|
|||
<div class="divider"></div>
|
||||
<div id="s_list" class="opview splitsub"></div>
|
||||
</div>
|
||||
<a id="cs_btn" href="#" class="close btn">✕</a>
|
||||
<a id="cs_btn" class="close btn">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -191,7 +201,7 @@
|
|||
<div class="divider"></div>
|
||||
<div id="up_info" class="splitsub"></div>
|
||||
</div>
|
||||
<a id="c_up_btn" href="#" class="close btn">✕</a>
|
||||
<a id="c_up_btn" class="close btn">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -507,7 +507,7 @@ if (1)
|
|||
"gt_c2": "truncate filenames less (show more)",
|
||||
|
||||
"sm_w8": "searching...",
|
||||
"sm_prev": "search results below are from a previous query:\n ",
|
||||
"sm_prev": "search results below are from a previous query: ",
|
||||
"sl_close": "close search results",
|
||||
"sl_hits": "showing {0} hits",
|
||||
"sl_moar": "load more",
|
||||
|
|
@ -807,14 +807,11 @@ modal.load();
|
|||
|
||||
// toolbar
|
||||
ebi('ops').innerHTML = (
|
||||
//'<a href="#" id="opa_x" data-dest="" tt="' + L.ot_close + '">--</a>' +
|
||||
(IE ? '<span id="noie">' + L.ot_noie + '</span>' : '') +
|
||||
'<a href="#" id="opa_srch" data-perm="read" data-dep="idx" data-dest="search" tt="' + L.ot_search + '">🔎</a>' +
|
||||
(have_del ? '<a href="#" id="opa_del" data-perm="write" data-dest="unpost" tt="' + L.ot_unpost + '">🧯</a>' : '') +
|
||||
'<a href="#" id="opa_up" data-dest="up2k">🚀</a>' +
|
||||
'<a href="#" id="opa_bup" data-perm="write" data-dest="bup" tt="' + L.ot_bup + '">🎈</a>' +
|
||||
'<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir" tt="' + L.ot_mkdir + '"><p class="overlay_plus">+</p>📂</a>' +
|
||||
'<a href="#" id="opa_md" data-perm="read write" data-dest="new_md" tt="' + L.ot_md + '"><div><p class="overlay_plus">+</p>📝</div></a>' +
|
||||
'<a href="#" id="opa_msg" data-dest="msg" tt="' + L.ot_msg + '">📟</a>' +
|
||||
'<a href="#" id="opa_cfg" data-dest="cfg" tt="' + L.ot_cfg + '">⚙️</a>' +
|
||||
'<a href="#" id="opa_acc" data-dest="acc" tt=""><div id="acc_pfp">👤</div></a>' +
|
||||
|
|
@ -927,9 +924,9 @@ ebi('widget').innerHTML = (
|
|||
'<div id="widgeti">' +
|
||||
' <div id="pbarthinpos"></div>' +
|
||||
' <div id="pctl">' +
|
||||
' <a href="#" id="bprev" class="icon" tt="' + L.wt_prev + '">' + svg_prev + '</a>' +
|
||||
' <a href="#" id="bplay" class="icon" tt="' + L.wt_play + '">' + svg_play + '</a>' +
|
||||
' <a href="#" id="bnext" class="icon" tt="' + L.wt_next + '">' + svg_next + '</a>' +
|
||||
' <a href="#" id="bprev" class="icon btn on" tt="' + L.wt_prev + '">' + svg_prev + '</a>' +
|
||||
' <a href="#" id="bplay" class="icon btn on" tt="' + L.wt_play + '">' + svg_play + '</a>' +
|
||||
' <a href="#" id="bnext" class="icon btn on" tt="' + L.wt_next + '">' + svg_next + '</a>' +
|
||||
' <span id="trackname"></span>' +
|
||||
' <div id="progbar" style="position: relative; height: 80%;">' +
|
||||
' <canvas id="barbuf"></canvas>' +
|
||||
|
|
@ -1351,7 +1348,7 @@ function setColor (color) {
|
|||
|
||||
accent = color;
|
||||
swrite('accent', accent);
|
||||
var a = accent || '#fc0';
|
||||
var a = accent || '#fc5';
|
||||
console.log('accent color set to: ' + a);
|
||||
document.documentElement.style.setProperty('--a', a);
|
||||
}
|
||||
|
|
@ -1376,25 +1373,16 @@ if(accent){
|
|||
}
|
||||
|
||||
// navpane
|
||||
ebi('tree').innerHTML = (
|
||||
'<div id="treeh">\n' +
|
||||
' <a href="#" class="btn" step="-2" id="twig" tt="Hotkey: A">–</a>\n' +
|
||||
' <a href="#" class="btn" step="2" id="twobytwo" tt="Hotkey: D">+</a>\n' +
|
||||
' <a href="#" class="btn" id="visdir" tt="' + L.tt_visdir + '">🎯</a>\n' +
|
||||
' <a href="#" class="tgl btn" id="filetree" tt="' + L.tt_ftree + '">📃</a>\n' +
|
||||
' <a href="#" class="tgl btn" id="parpane" tt="' + L.tt_pdock + '">📌</a>\n' +
|
||||
' <a href="#" class="tgl btn" id="dyntree" tt="' + L.tt_dynt + '">a</a>\n' +
|
||||
' <a href="#" class="tgl btn" id="wraptree" tt="' + L.tt_wrap + '">↵</a>\n' +
|
||||
' <a href="#" class="tgl btn" id="hovertree" tt="' + L.tt_hover + '">👀</a>\n' +
|
||||
'</div>\n' +
|
||||
'<ul id="docul"></ul>\n' +
|
||||
'<ul class="ntree" id="treepar"></ul>\n' +
|
||||
'<ul class="ntree" id="treeul"></ul>\n' +
|
||||
'<div id="thx_ff"> </div>'
|
||||
ebi('treeh').innerHTML += (
|
||||
'<a href="#" class="btn" step="-2" id="twig" tt="Hotkey: A">–</a>\n' +
|
||||
'<a href="#" class="btn" step="2" id="twobytwo" tt="Hotkey: D">+</a>\n' +
|
||||
'<a href="#" class="btn" id="visdir" tt="' + L.tt_visdir + '">🎯</a>\n' +
|
||||
'<a href="#" class="tgl btn" id="filetree" tt="' + L.tt_ftree + '">📃</a>\n' +
|
||||
'<a href="#" class="tgl btn" id="parpane" tt="' + L.tt_pdock + '">📌</a>\n' +
|
||||
'<a href="#" class="tgl btn" id="dyntree" tt="' + L.tt_dynt + '">a</a>\n' +
|
||||
'<a href="#" class="tgl btn" id="wraptree" tt="' + L.tt_wrap + '">↵</a>\n' +
|
||||
'<a href="#" class="tgl btn" id="hovertree" tt="' + L.tt_hover + '">👀</a>\n'
|
||||
);
|
||||
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;
|
||||
QS('#op_new_md input[type="submit"]').value = L.ab_mkdoc;
|
||||
QS('#op_msg input[type="submit"]').value = L.ab_msg;
|
||||
|
|
@ -1438,16 +1426,6 @@ ebi('rcm').innerHTML = (
|
|||
ops[a].href = '#v=' + v;
|
||||
}
|
||||
|
||||
// new file
|
||||
ebi('opa_md').onclick = function(){
|
||||
mktemp();
|
||||
}
|
||||
|
||||
// new folder
|
||||
ebi('opa_mkd').onclick = function(){
|
||||
mktemp(true);
|
||||
}
|
||||
|
||||
ebi('opa_acc').appendChild(ebi('op_acc'));
|
||||
ebi('op_acc').onclick = function (e){
|
||||
e.stopPropagation();
|
||||
|
|
@ -1484,6 +1462,8 @@ function opclick(e) {
|
|||
goto(dest);
|
||||
|
||||
var input = QS('.opview.act input:not([type="hidden"])')
|
||||
if(dest == 'search')
|
||||
input = ebi('folder_search');
|
||||
if (input && !TOUCH) {
|
||||
tt.skip = true;
|
||||
input.focus();
|
||||
|
|
@ -1543,6 +1523,8 @@ function goto(dest) {
|
|||
fn();
|
||||
}
|
||||
|
||||
ebi('srchfolder_div').style.display = dest == 'search' ? 'block' : 'none';
|
||||
|
||||
clmod(document.documentElement, 'op_open', dest);
|
||||
clmod(document.documentElement, 'noscroll', QS('.modal.vis'));
|
||||
|
||||
|
|
@ -4020,7 +4002,6 @@ function eval_hash() {
|
|||
d.setAttribute('href', '#');
|
||||
d.setAttribute('class', 'ayjump');
|
||||
d.innerHTML = a ? L.ay_path : L.ay_files;
|
||||
document.body.insertBefore(d, ebi('topBar'));
|
||||
d.onclick = function (e) {
|
||||
ev(e);
|
||||
if (a)
|
||||
|
|
@ -4039,9 +4020,9 @@ function eval_hash() {
|
|||
var svg_up = svg_box + '<path d="M12 19V5M18 11L12 5L6 11" ' + svg_options +'/>';
|
||||
|
||||
ebi('wfp').innerHTML = (
|
||||
'<a href="#" id="gop" tt="' + L.gop + '">' + svg_left + '</a>' +
|
||||
'<a href="#" id="gon" tt="' + L.gon + '">' + svg_right + '</a>' +
|
||||
'<a href="#" id="gou" tt="' + L.gou + '">' + svg_up + '</a>');
|
||||
'<a href="#" id="gop" class="btn" tt="' + L.gop + '">' + svg_left + '</a>' +
|
||||
'<a href="#" id="gon" class="btn" tt="' + L.gon + '">' + svg_right + '</a>' +
|
||||
'<a href="#" id="gou" class="btn" tt="' + L.gou + '">' + svg_up + '</a>');
|
||||
ebi('gop').onclick = function () { tree_neigh(-1); }
|
||||
ebi('gon').onclick = function () { tree_neigh(1); }
|
||||
ebi('gou').onclick = function () { tree_up(true); }
|
||||
|
|
@ -6929,7 +6910,7 @@ var search_ui = (function () {
|
|||
}
|
||||
|
||||
var folderSearch = ebi('folder_search');
|
||||
folderSearch.placeholder = '🔎 ' + L.s_dir;
|
||||
folderSearch.placeholder = L.s_dir;
|
||||
folderSearch.onfocus = function(){
|
||||
ebi('srch_pathc').checked = true;
|
||||
var path = decodeURI(get_evpath());
|
||||
|
|
@ -6949,6 +6930,32 @@ var search_ui = (function () {
|
|||
}
|
||||
folderSearch.onkeydown = ev_search_keydown;
|
||||
|
||||
var expand = sread('s_ex');
|
||||
function exp_search () {
|
||||
clmod(ebi('op_search'), 'vis', expand);
|
||||
var ms = ebi('moresearch');
|
||||
if(expand){
|
||||
location.hash = '#';
|
||||
ms.innerHTML = '▴'
|
||||
}
|
||||
else{
|
||||
ms.innerHTML = '▾'
|
||||
}
|
||||
}
|
||||
ebi('moresearch').onclick = function () {
|
||||
expand = !expand;
|
||||
swrite('s_ex', expand);
|
||||
exp_search();
|
||||
}
|
||||
exp_search();
|
||||
|
||||
ebi('closesearch').onclick = function (e) {
|
||||
ebi('opa_srch').click();
|
||||
folderSearch.value = '';
|
||||
if(ebi('unsearch'))
|
||||
ebi('unsearch').click();
|
||||
}
|
||||
|
||||
var recur_c = ebi('srch_recursivec');
|
||||
recur_c.oninput = ev_search_input;
|
||||
ebi('srch_recursivelbl').innerHTML = L.s_rec;
|
||||
|
|
@ -7397,6 +7404,7 @@ function onwidgetresize(){
|
|||
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{
|
||||
//wide
|
||||
ebi('trackname').after(ebi('progbar'));
|
||||
ebi('trackname').after(ebi('altprogbar'));
|
||||
bar.style.paddingTop = '.3em';
|
||||
|
|
@ -7409,6 +7417,7 @@ function onwidgetresize(){
|
|||
}
|
||||
gtc = 'max-content max-content max-content ' + (thin ? '' : '20%') + ' auto max-content max-content max-content';
|
||||
if(thin && bar.children.length > gtc.split(' ').length){
|
||||
//thin
|
||||
pbarthinpos.appendChild(ebi('progbar'));
|
||||
pbarthinpos.appendChild(ebi('altprogbar'));
|
||||
bar.style.paddingTop = '0';
|
||||
|
|
@ -7417,8 +7426,13 @@ function onwidgetresize(){
|
|||
bar.style.gridTemplateColumns = gtc;
|
||||
|
||||
clmod(widget, 'thin', thin);
|
||||
clmod(ebi('pathBar'), 'thin', thin);
|
||||
clmod(ebi('wrap'), 'thin', thin);
|
||||
|
||||
pbar.onresize();
|
||||
|
||||
// keep path scrolled right
|
||||
ebi('path').onresize = keep_right(ebi('path'));
|
||||
}
|
||||
window.addEventListener('resize', onwidgetresize);
|
||||
onwidgetresize();
|
||||
|
|
@ -7514,10 +7528,14 @@ var treectl = (function () {
|
|||
}
|
||||
|
||||
ebi('tree').style.display = 'block';
|
||||
ebi('tree').style.width = 0;
|
||||
clmod(ebi('wfp'), 'shifted', false);
|
||||
window.addEventListener('scroll', onscroll);
|
||||
window.addEventListener('resize', onresize);
|
||||
onresize();
|
||||
aligngriditems();
|
||||
setTimeout(function () {
|
||||
onresize();
|
||||
aligngriditems();
|
||||
}, 150);
|
||||
};
|
||||
|
||||
r.detree = function (e, nw) {
|
||||
|
|
@ -7545,9 +7563,13 @@ var treectl = (function () {
|
|||
r.hide = function () {
|
||||
r.hidden = true;
|
||||
ebi('tree').style.width = ebi('tree_footer').style.width = '0';
|
||||
setTimeout(function () {
|
||||
ebi('tree').style.display = 'none'
|
||||
}, 150);
|
||||
ebi('tree_footer').style.display = 'none';
|
||||
ebi('widget').style.marginLeft = '0';
|
||||
ebi('wrap').style.marginLeft = '';
|
||||
clmod(ebi('wfp'), 'shifted', true);
|
||||
window.removeEventListener('resize', onresize);
|
||||
window.removeEventListener('scroll', onscroll);
|
||||
aligngriditems();
|
||||
|
|
@ -7634,6 +7656,7 @@ var treectl = (function () {
|
|||
parp.style.top = y;
|
||||
}
|
||||
|
||||
return; // always fixed
|
||||
if (wraptop === null)
|
||||
return;
|
||||
|
||||
|
|
@ -10165,6 +10188,19 @@ ebi('path').onclick = function (e) {
|
|||
return ev(e);
|
||||
};
|
||||
|
||||
function scroll_v_to_h (e) {
|
||||
e.preventDefault();
|
||||
var delta = e.deltaY;
|
||||
var maxScrollLeft = ebi('path').scrollWidth - ebi('path').clientWidth;
|
||||
|
||||
ebi('path').scrollLeft = Math.max(0, Math.min(maxScrollLeft, ebi('path').scrollLeft + delta));
|
||||
}
|
||||
function keep_right (o) {
|
||||
o.scrollLeft = o.scrollWidth - o.clientWidth;
|
||||
}
|
||||
|
||||
ebi('path').addEventListener('wheel', scroll_v_to_h);
|
||||
|
||||
|
||||
var scroll_y = -1;
|
||||
var scroll_vp = '\n';
|
||||
|
|
@ -10560,6 +10596,10 @@ function reload_browser() {
|
|||
drag.mktarget(o);
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
ebi('path').scrollLeft = ebi('path').scrollWidth - ebi('path').clientWidth;
|
||||
}, 100);
|
||||
|
||||
reload_mp();
|
||||
try { showsort(ftab); } catch (ex) { }
|
||||
makeSortable(ftab, function () {
|
||||
|
|
|
|||
Loading…
Reference in a new issue