cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

static: improve tree view

Browse source
This commit is contained in:
coon 2024-02-15 02:16:27 +01:00
parent 61647a1f57
commit 20c4dda160
2 changed files with 219 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
static/index.html
View file

@ -100,55 +100,86 @@
</div><!--/#tabs--> </div><!--/#tabs-->
<div id="file-browser"> <div id="file-browser">
<div> <div>
<ul class="tree"> <ul id="tree">
<li> <li>
<details open> <input type="checkbox"/>
<summary>/</summary> <span>00_music</span>
<ul> <ul>
<li> <li>
<details> <input checked type="checkbox"/>
<summary>00_music</summary> <span>autosort</span>
<ul>
<li>autosort</li>
<li>reimport</li>
<li>unsortable</li>
<li>youtube</li>
</ul>
</details>
</li> </li>
<li> <li>
<details> <input checked type="checkbox"/>
<summary>01_incoming</summary> <span>reimport</span>
<ul>
<li>coon</li>
<li>cascha</li>
<li>XenGi</li>
</ul>
</details>
</li> </li>
<li> <li>
<details> <input checked type="checkbox"/>
<summary>02_megablast</summary> <span>unsortable</span>
<ul>
<li>dnb</li>
<li>mix</li>
</ul>
</details>
</li> </li>
<li> <li>
<details> <input checked type="checkbox"/>
<summary>03_mfs</summary> <span>youtube</span>
</li>
</ul>
</li>
<li>
<input checked type="checkbox"/>
<span>01_incoming</span>
<ul> <ul>
<li>ambient</li> <li>
<li>electronic</li> <input checked type="checkbox"/>
</ul> <span>coon</span>
</details> <ul>
<li>
<input type="checkbox"/>
<span>Rick Astley - Never Gonna Give You Up</span>
</li>
<li>
<input type="checkbox"/>
<span>Nyan Cat</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>cascha</span>
</li>
<li>
<input type="checkbox"/>
<span>XenGi</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>02_megablast</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>dnb</span>
</li>
<li>
<input checked type="checkbox"/>
<span>mix</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>03_mfs</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>ambient</span>
</li>
<li>
<input checked type="checkbox"/>
<span>electronic</span>
</li> </li>
</ul> </ul>
</details>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div> <div>
actions actions

196
static/treeview.css
View file

@ -1,100 +1,150 @@
/* https://iamkate.com/code/tree-views/ */ /* https://codepen.io/defims/pen/DBaVXM */
/* Custom properties */ ul {
float: left;
.tree { clear: left;
--spacing : 1.0rem; margin-left: .25em;
--radius : 10px; padding: 0;
} }
/* Padding */ ul:before {
content:"";
position: absolute;
z-index: 1;
top:.25em;
right:auto;
bottom:0;
left: 1.75em;
margin: auto;
/* border-right: dotted white .1em; */
width: 0;
height: auto;
}
.tree li { ul:after {
content: "-";
position: absolute;
z-index: 3;
top: 0;
left: -.5em;
margin-left: .65em;
margin-top: .15em;
padding: 0;
width: .8em;
height: .8em;
text-align: center;
line-height: .7em;
font-size: 1em;
}
ul > li {
display: block; display: block;
position: relative; position: relative;
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px); float: left;
clear: both;
right:auto;
padding-left: 1em;
width:auto;
text-align: center;
color:white;
} }
.tree ul { ul > li > input[type=checkbox] {
margin-left : calc(var(--radius) - var(--spacing));
padding-left : 0;
}
/* Vertical lines */
.tree ul li {
border-left : 2px solid #ddd;
}
.tree ul li:last-child {
border-color : transparent;
}
/* Horizontal lines */
.tree ul::before {
content : '';
display:block; display:block;
position: absolute; position: absolute;
top : calc(var(--spacing) - 8px); float: left;
left : 6px; z-index: 4;
width : calc(var(--spacing) + 2px); margin: 0 0 0 -1em;
border : solid #ddd; padding: 0;
border-width : 0 0 2px 2px; width:1em;
} height: 2em;
font-size: 1em;
.tree ul li::before { opacity: 0;
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) - 22px);
left : -2px;
width : calc(var(--spacing) + 2px);
height : calc(var(--spacing) - 2px);
border : solid #ddd;
border-width : 0 0 2px 2px;
}
/* Summaries */
.tree summary {
display : block;
cursor: pointer; cursor: pointer;
} }
.tree summary::marker, ul > li > input[type=checkbox]:not(:checked)~ul:before {
.tree summary::-webkit-details-marker {
display: none; display: none;
} }
.tree summary:focus { ul > li > input[type=checkbox]:not(:checked)~ul:after {
outline : none; content: "+"
} }
.tree summary:focus-visible { ul > li > input[type=checkbox]:not(:checked)~ul * {
outline : 1px dotted #000; display: none;
} }
/* Markers */ ul > li > span {
display: block;
position: relative;
float: left;
z-index: 3;
margin-left: .25em;
padding-left: .25em;
}
.tree li::after, ul > li > span:after {
.tree summary::before { content: "";
content : '\1F4C1';
display: block; display: block;
position: absolute; position: absolute;
top : calc(var(--spacing) / 1.5 - var(--radius)); left:-1em;
left : calc(var(--spacing) - var(--radius) - 1px); top:0;
width : calc(2 * var(--radius)); bottom:0;
height : calc(2 * var(--radius)); margin: auto .25em auto .25em;
}u /* border-top: dotted white .1em; */
width: .75em;
/* Expand and collapse buttons */ height: 0;
.tree summary::before {
z-index: 1;
content: '\1F4C1';
} }
.tree details[open] > summary::before { ul > li:last-child:before {
content: ""; display: block; position: absolute; z-index: 2;
top:1em; left:0; bottom:-.25em;
width:.75em; height:auto;
}
#tree {
position: relative; font-family: "Georgia";
}
#tree:before {
left:.5em;
}
#tree:after {
display: none;
}
/* decoration */
ul, ul > li:last-child:before {
background: transparent;
}
ul > li {
background: transparent;
}
ul:after {
background: linear-gradient(135deg, rgba(255,255,255,1), rgba(195,186,170,1));
color: black;
border:solid gray 1px;
border-radius: .1em;
}
ul > li > span {
border-radius: .25em;
color: white;
}
ul > li > input[type=checkbox]~span:before {
content:""; display: inline-block;
margin: 0 .25em 0 0;
width:1em; height: 1em; ;line-height: 1em;
content: '\1F4C1';
background-repeat:no-repeat;
background-size:contain;
}
ul > li > input[type=checkbox]:checked~span:before {
content: '\1F4C2'; content: '\1F4C2';
} }