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

static: hack tree view prototype into file browser

Browse source
This commit is contained in:
coon 2024-01-30 12:34:33 +01:00
parent df17949dfd
commit 61647a1f57
2 changed files with 150 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
static/index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Sanic</title> <title>Sanic</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="treeview.css">
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" /> <link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
</head> </head>
<body> <body>
@ -99,7 +100,55 @@
</div><!--/#tabs--> </div><!--/#tabs-->
<div id="file-browser"> <div id="file-browser">
<div> <div>
file browser <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>XenGi</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> </div>
<div> <div>
actions actions

100
static/treeview.css Normal file
View file

@ -0,0 +1,100 @@
/* 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::before {
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) - 8px);
left : 6px;
width : calc(var(--spacing) + 2px);
border : solid #ddd;
border-width : 0 0 2px 2px;
}
.tree ul li::before {
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;
}
.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 : '\1F4C1';
display : block;
position : absolute;
top : calc(var(--spacing) / 1.5 - var(--radius));
left : calc(var(--spacing) - var(--radius) - 1px);
width : calc(2 * var(--radius));
height : calc(2 * var(--radius));
}u
/* Expand and collapse buttons */
.tree summary::before {
z-index: 1;
content: '\1F4C1';
}
.tree details[open] > summary::before {
content: '\1F4C2';
}