treehouse on flexbox

crates/treehouse/src/html/tree.rs

@@ -61,6 +61,8 @@ pub fn branch_to_html(
             s.push_str("<div>");
         }
 
+        s.push_str("<th-bp></th-bp>");
+
         let raw_block_content = &source.input()[branch.content.clone()];
         let mut unindented_block_content = String::with_capacity(raw_block_content.len());
         for line in raw_block_content.lines() {
@@ -115,13 +117,9 @@ pub fn branch_to_html(
             },
             Some(broken_link_callback),
         );
-        if has_children {
+        s.push_str("<th-bc>");
-            s.push_str("<span class=\"branch-summary\">")
-        }
         markdown::push_html(s, treehouse, config, markdown_parser);
-        if has_children {
+        s.push_str("</th-bc>");
-            s.push_str("</span>")
-        }
 
         if let Content::Link(link) = &branch.attributes.content {
             write!(

static/css/tree.css

@@ -44,9 +44,7 @@
     content: '';
     display: inline-block;
 
-    background-image:
+    background-image: var(--icon-breadcrumb);
-        /* breadcrumb */
-        var(--icon-breadcrumb);
     background-repeat: no-repeat;
     background-position: 50% 50%;
     opacity: 70%;
@@ -71,98 +69,128 @@
 
 /*** Tree ***/
 
+/* Compute an indent level appropriate for the viewport. */
 .tree ul {
     padding-left: clamp(12px, 2vw, 24px);
 }
 
+/* Top level should not have an indent. */
 .tree>ul {
     padding-left: 0;
 }
 
-.tree {
+.tree details {
-    --tree-icon-position: 8px 50%;
-    --tree-icon-space: 28px;
 
-    /* I have no clue why this works, deal with it */
+    /* Disable the rightwards chevron in <details> elements */
-    --tree-hover-expansion: 6px;
+    &>summary {
-
-    position: relative;
-}
-
-.tree details>summary {
         list-style: none;
         cursor: pointer;
-}
 
-/* Can webkit not be a dick for once? */
+        &::-webkit-details-marker {
-.tree details>summary::-webkit-details-marker {
             display: none;
+        }
+    }
 }
 
+/* Child branches */
 .tree li {
+    /* <li> elements should not have any bullet points or whatever */
     list-style: none;
 
-    display: flex;
+    /* Stretch branch content to the full width of the page */
-    flex-direction: row;
+    &>div,
-
+    &>details {
-    position: relative;
-}
-
-.tree li>*:first-child {
         width: 100%;
-}
+    }
 
-.tree li>div:first-child {
+    /* Add an underline for leaf branches */
+    &>div {
         box-sizing: border-box;
-}
 
-.tree li>div:first-child,
+        &:hover {
-.tree li>details>summary:first-child {
-    padding-right: 32px;
-}
-
-.tree li[is="th-linked-branch"]>details>summary:first-child {
-    padding-right: 56px;
-}
-
-.tree li>div:first-child:hover {
             border-bottom: 1px solid var(--border-1);
             margin-bottom: -1px;
+        }
+    }
+
+    &>div,
+    &>details>summary {
+        /* Child elements are laid out horizontally in a flexbox. */
+        display: flex;
+        align-items: center;
+    }
+
 }
 
+/* <summary> is used for the visual content of branches with children. It's the large horizontal bar
+    and notably *excludes* children. */
 .tree details>summary {
-    background-image: var(--icon-expand);
+    /* Slightly round for elegance */
-    background-repeat: no-repeat;
-    background-position: var(--tree-icon-position);
-    padding-left: var(--tree-icon-space);
-    margin-left: calc(- var(--tree-icon-space));
-
-    padding-top: var(--tree-hover-expansion);
-    padding-bottom: var(--tree-hover-expansion);
     border-radius: 8px;
 
+    /* Give it a shaded background on hover */
     background-color: transparent;
-}
 
-.tree details>summary:hover {
+    &:hover {
         background-color: var(--shaded-background);
+    }
 }
 
-.tree li>div {
+/* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
+@media (hover: none) {
+
+    .tree li>div:first-child,
+    .tree li>details>summary:first-child {
+        border-bottom: 1px solid var(--border-1);
+    }
+
+    .tree details>summary {
+        /* In that case summaries shall not be rounded. */
+        border-radius: 0px;
+    }
+}
+
+/* The following three elements - bp, bc, and bb - are there in all branches, regardless of their parent. */
+
+/* bp - bullet point */
+th-bp {
+    display: block;
+    width: 28px;
+    height: 24px;
+
     background-image: var(--icon-leaf);
     background-repeat: no-repeat;
-    background-position: var(--tree-icon-position);
+    background-position: 50% 50%;
-    padding-left: var(--tree-icon-space);
+
-    margin-left: calc(- var(--tree-icon-space));
+    /* Prevent shrinkage when viewport is too low */
-    padding-top: var(--tree-hover-expansion);
+    flex-shrink: 0;
-    padding-bottom: var(--tree-hover-expansion);
 }
 
-.tree details[open]>summary {
+/* Change image of th-bp if it has children and/or is collapsible */
+.tree details[open]>summary>th-bp {
     background-image: var(--icon-collapse);
 }
 
-.tree details:not([open])>summary>.branch-summary>:last-child::after {
+.tree details:not([open])>summary>th-bp {
+    background-image: var(--icon-expand);
+}
+
+/* bc - branch content */
+th-bc {
+    display: block;
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    /* Grow to fill the entire available space. This pushes out th-bb to the far right. */
+    flex-grow: 1;
+}
+
+/* Display a chevron hinting that the collapsed branch has more content in its children. */
+.tree details:not([open])>summary>th-bc>:last-child {
+    /* Add some padding such that text wraps together with this element. */
+    padding-right: 32px;
+
+    &::after {
         content: '\00A0';
         display: inline-block;
 
@@ -177,67 +205,54 @@
         margin-left: 0.5em;
 
         margin-right: -32px;
-}
-
-.tree details:not([open])>summary>.branch-summary>:last-child {
-    padding-right: 32px;
-}
-
-@media (hover: none) {
-
-    .tree li>div:first-child,
-    .tree li>details>summary:first-child {
-        border-bottom: 1px solid var(--border-1);
-    }
-
-    .tree details>summary {
-        border-radius: 0px;
     }
 }
 
-
+/* bb - button bar */
-.tree th-bb {
+th-bb {
-    height: 24px;
+    height: 100%;
     margin: 4px;
 
-    position: absolute;
+    /* Should be displayed on the top of the branch rather than in the middle. */
-    top: 0;
+    align-self: start;
-    right: 0;
 
     display: flex;
     flex-direction: row;
 
+    /* Keep the button bar invisible by default. */
     opacity: 0%;
 }
 
-
+/* When the parent is hovered over, display the button bar. */
-.tree li>details>summary:hover>th-bb,
+.tree *:hover>th-bb {
-.tree li>div:hover>th-bb {
     opacity: 100%;
 }
 
+/* For media without hover functionality, th-bb should always be visible */
 @media (hover: none) {
     .tree th-bb {
         opacity: 100%;
     }
 }
 
-.tree .icon {
+/* Icons (used in the button bar) */
+.tree {
+    & .icon {
         background-repeat: no-repeat;
         background-position: 50% 50%;
         opacity: 35%;
 
         width: 24px;
         height: 24px;
-}
+    }
 
-
+    & .icon-permalink {
-.tree .icon-permalink {
         background-image: var(--icon-permalink);
-}
+    }
 
-.tree .icon-go {
+    & .icon-go {
         background-image: var(--icon-go);
+    }
 }
 
 .tree a.navigate {