From 20c4dda1607b8f49f036d44c9de906d331884ac7 Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 15 Feb 2024 02:16:27 +0100 Subject: [PATCH] static: improve tree view --- static/index.html | 123 ++++++++++++++--------- static/treeview.css | 234 +++++++++++++++++++++++++++----------------- 2 files changed, 219 insertions(+), 138 deletions(-) diff --git a/static/index.html b/static/index.html index b50ef80..482b1f4 100644 --- a/static/index.html +++ b/static/index.html @@ -100,56 +100,87 @@
-
    +
    • -
      - / -
        -
      • -
        - 00_music -
          -
        • autosort
          • -
        • reimport
          • -
        • unsortable
          • -
        • youtube
          • -
        -
        -
        • -
      • -
        - 01_incoming -
          -
        • coon
          • -
        • cascha
          • -
        • XenGi
          • -
        -
        -
        • -
      • -
        - 02_megablast -
          -
        • dnb
          • -
        • mix
          • -
        -
        -
        • -
      • -
        - 03_mfs -
          -
        • ambient
          • -
        • electronic
          • -
        -
        -
        • -
      -
      + + 00_music +
        +
      • + + autosort +
        • +
      • + + reimport +
        • +
      • + + unsortable +
        • +
      • + + youtube +
        • +
      +
      • +
    • + + 01_incoming +
        +
      • + + coon +
          +
        • + + Rick Astley - Never Gonna Give You Up +
          • +
        • + + Nyan Cat +
          • +
        +
        • +
      • + + cascha +
        • +
      • + + XenGi +
        • +
      +
      • +
    • + + 02_megablast +
        +
      • + + dnb +
        • +
      • + + mix +
        • +
      +
      • +
    • + + 03_mfs +
        +
      • + + ambient +
        • +
      • + + electronic +
        • +
-
actions
diff --git a/static/treeview.css b/static/treeview.css index 30a7c54..fa4b4c5 100644 --- a/static/treeview.css +++ b/static/treeview.css @@ -1,100 +1,150 @@ -/* https://iamkate.com/code/tree-views/ */ +/* https://codepen.io/defims/pen/DBaVXM */ -/* Custom properties */ - -.tree { - --spacing : 1.0rem; - --radius : 10px; +ul { + float: left; + clear: left; + margin-left: .25em; + padding: 0; } -/* 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 { +ul:before { + content:""; + position: absolute; z-index: 1; - content: '\1F4C1'; + top:.25em; + right:auto; + bottom:0; + left: 1.75em; + margin: auto; + /* border-right: dotted white .1em; */ + width: 0; + height: auto; } -.tree details[open] > summary::before { +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; + position: relative; + float: left; + clear: both; + right:auto; + padding-left: 1em; + width:auto; + text-align: center; + color:white; +} + +ul > li > input[type=checkbox] { + display:block; + position: absolute; + float: left; + z-index: 4; + margin: 0 0 0 -1em; + padding: 0; + width:1em; + height: 2em; + font-size: 1em; + opacity: 0; + cursor: pointer; +} + +ul > li > input[type=checkbox]:not(:checked)~ul:before { + display: none; +} + +ul > li > input[type=checkbox]:not(:checked)~ul:after { + content: "+" +} + +ul > li > input[type=checkbox]:not(:checked)~ul * { + display: none; +} + +ul > li > span { + display: block; + position: relative; + float: left; + z-index: 3; + margin-left: .25em; + padding-left: .25em; +} + +ul > li > span:after { + content: ""; + display: block; + position: absolute; + left:-1em; + top:0; + bottom:0; + margin: auto .25em auto .25em; + /* border-top: dotted white .1em; */ + width: .75em; + height: 0; +} + +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'; }