From 61647a1f579aeec87118190e5a16a60f4bcdaa20 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 30 Jan 2024 12:34:33 +0100 Subject: [PATCH] static: hack tree view prototype into file browser --- static/index.html | 51 +++++++++++++++++++++- static/treeview.css | 100 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 static/treeview.css diff --git a/static/index.html b/static/index.html index 4f4bfc5..b50ef80 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,7 @@ Sanic + @@ -99,7 +100,55 @@
- file browser +
    +
  • +
    + / +
      +
    • +
      + 00_music +
        +
      • autosort
        • +
      • reimport
        • +
      • unsortable
        • +
      • youtube
        • +
      +
      +
      • +
    • +
      + 01_incoming +
        +
      • coon
        • +
      • cascha
        • +
      • XenGi
        • +
      +
      +
      • +
    • +
      + 02_megablast +
        +
      • dnb
        • +
      • mix
        • +
      +
      +
      • +
    • +
      + 03_mfs +
        +
      • ambient
        • +
      • electronic
        • +
      +
      +
      • +
    +
    +
    • +
+
actions diff --git a/static/treeview.css b/static/treeview.css new file mode 100644 index 0000000..30a7c54 --- /dev/null +++ b/static/treeview.css @@ -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'; +}