From e50e54e8d8bdd6eed81f93f7b1f484f872a5709e Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 13:30:24 +0100 Subject: [PATCH] static: add basic file tree view --- static/flexbox/index.html | 50 ++++++++++++++++++- static/flexbox/treeview.css | 91 ++++++++++++++++++++++++++++++++++ static/img/expand-collapse.svg | 7 +++ 3 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 static/flexbox/treeview.css create mode 100644 static/img/expand-collapse.svg diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 277dce8..8887e7d 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -3,6 +3,7 @@ Sanic - Flexbox layout + @@ -140,7 +141,54 @@
- playlist controls +
    +
  • +
    + / +
      +
    • +
      + 00_music +
        +
      • autosort
        • +
      • reimport
        • +
      • unsortable
        • +
      • youtube
        • +
      +
      +
      • +
    • +
      + 01_incoming +
        +
      • coon
        • +
      • cascha
        • +
      • Xen
        • +
      +
      +
      • +
    • +
      + 02_megablast +
        +
      • dnb
        • +
      • mix
        • +
      +
      +
      • +
    • +
      + 03_mfs +
        +
      • ambient
        • +
      • electronic
        • +
      +
      +
      • +
    +
    +
    • +
diff --git a/static/flexbox/treeview.css b/static/flexbox/treeview.css new file mode 100644 index 0000000..6f052b6 --- /dev/null +++ b/static/flexbox/treeview.css @@ -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; +} diff --git a/static/img/expand-collapse.svg b/static/img/expand-collapse.svg new file mode 100644 index 0000000..f34809c --- /dev/null +++ b/static/img/expand-collapse.svg @@ -0,0 +1,7 @@ + + + + + + +