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

static: add basic file tree view

Browse source
This commit is contained in:
coon 2023-11-29 13:30:24 +01:00
parent 3b3e95bd7a
commit e50e54e8d8
3 changed files with 147 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
static/flexbox/index.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Sanic - Flexbox layout</title>
<link rel="stylesheet" href="treeview.css">
<link rel="stylesheet" href="sanic.css">
<script src="sanic.js"></script>
</head>
@ -140,7 +141,54 @@
</div>
<div id="controls_bottom">
<div id="playlist_controls">
playlist controls
<ul class="tree">
<li>
<details open>
<summary>/</summary>
<ul>
<li>
<details>
<summary>00_music</summary>
<ul>
<li>autosort</li>
<li>reimport</li>
<li>unsortable</li>
<li>youtube</li>
</ul>
</details>
</li>
<li>
<details>
<summary>01_incoming</summary>
<ul>
<li>coon</li>
<li>cascha</li>
<li>Xen</li>
</ul>
</details>
</li>
<li>
<details>
<summary>02_megablast</summary>
<ul>
<li>dnb</li>
<li>mix</li>
</ul>
</details>
</li>
<li>
<details>
<summary>03_mfs</summary>
<ul>
<li>ambient</li>
<li>electronic</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
</ul>
</div>
<div id="playlist_tracklist">
<table>

91
static/flexbox/treeview.css Normal file
View file

@ -0,0 +1,91 @@
/* https://iamkate.com/code/tree-views/ */
/* Custom properties */
.tree {
--spacing : 1.0rem;
--radius : 10px;
}
/* Padding */
.tree li {
display : block;
position : relative;
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
}
.tree ul {
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 li::before {
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / -2);
left : -2px;
width : calc(var(--spacing) + 2px);
height : calc(var(--spacing) + 1px);
border : solid #ddd;
border-width : 0 0 2px 2px;
}
/* Summaries */
.tree summary {
display : block;
cursor : pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
display : none;
}
.tree summary:focus {
outline : none;
}
.tree summary:focus-visible {
outline : 1px dotted #000;
}
/* Markers */
.tree li::after,
.tree summary::before {
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / 2 - var(--radius));
left : calc(var(--spacing) - var(--radius) - 1px);
width : calc(2 * var(--radius));
height : calc(2 * var(--radius));
border-radius : 50%;
background : #ddd;
}
/* Expand and collapse buttons */
.tree summary::before {
z-index : 1;
background : #696 url('../img/expand-collapse.svg') 0 0;
}
.tree details[open] > summary::before {
background-position : calc(-2 * var(--radius)) 0;
}

7
static/img/expand-collapse.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20">
<g fill="#fff">
<path d="m5 9h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/>
<path d="m25 9h10v2h-10z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 199 B