treehouse on flexbox
This commit is contained in:
parent
8c91bb3d34
commit
5b37493800
|
|
@ -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("<span class=\"branch-summary\">")
|
||||
}
|
||||
s.push_str("<th-bc>");
|
||||
markdown::push_html(s, treehouse, config, markdown_parser);
|
||||
if has_children {
|
||||
s.push_str("</span>")
|
||||
}
|
||||
s.push_str("</th-bc>");
|
||||
|
||||
if let Content::Link(link) = &branch.attributes.content {
|
||||
write!(
|
||||
|
|
|
|||
|
|
@ -44,9 +44,7 @@
|
|||
content: '';
|
||||
display: inline-block;
|
||||
|
||||
background-image:
|
||||
/* breadcrumb */
|
||||
var(--icon-breadcrumb);
|
||||
background-image: 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-icon-position: 8px 50%;
|
||||
--tree-icon-space: 28px;
|
||||
.tree details {
|
||||
|
||||
/* I have no clue why this works, deal with it */
|
||||
--tree-hover-expansion: 6px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree details>summary {
|
||||
/* Disable the rightwards chevron in <details> elements */
|
||||
&>summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Can webkit not be a dick for once? */
|
||||
.tree details>summary::-webkit-details-marker {
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Child branches */
|
||||
.tree li {
|
||||
/* <li> elements should not have any bullet points or whatever */
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree li>*:first-child {
|
||||
/* Stretch branch content to the full width of the page */
|
||||
&>div,
|
||||
&>details {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tree li>div:first-child {
|
||||
/* Add an underline for leaf branches */
|
||||
&>div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tree li>div:first-child,
|
||||
.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 {
|
||||
&: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);
|
||||
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);
|
||||
/* Slightly round for elegance */
|
||||
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);
|
||||
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);
|
||||
background-position: 50% 50%;
|
||||
|
||||
/* Prevent shrinkage when viewport is too low */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tree th-bb {
|
||||
height: 24px;
|
||||
/* bb - button bar */
|
||||
th-bb {
|
||||
height: 100%;
|
||||
margin: 4px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/* Should be displayed on the top of the branch rather than in the middle. */
|
||||
align-self: start;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
/* Keep the button bar invisible by default. */
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
|
||||
.tree li>details>summary:hover>th-bb,
|
||||
.tree li>div:hover>th-bb {
|
||||
/* When the parent is hovered over, display the button bar. */
|
||||
.tree *: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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tree .icon-permalink {
|
||||
& .icon-permalink {
|
||||
background-image: var(--icon-permalink);
|
||||
}
|
||||
}
|
||||
|
||||
.tree .icon-go {
|
||||
& .icon-go {
|
||||
background-image: var(--icon-go);
|
||||
}
|
||||
}
|
||||
|
||||
.tree a.navigate {
|
||||
|
|
|
|||
Loading…
Reference in a new issue