liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 39 Activity

add dates, tweak css a bit

Browse source
This commit is contained in:
liquidex 2024-02-07 13:09:44 +01:00
parent 61cce04357
commit ec21c4ce95
2 changed files with 48 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
static/css/tree.css
View file

@ -71,7 +71,7 @@
/* Compute an indent level appropriate for the viewport. */
.tree ul {
padding-left: clamp(12px, 2vw, 24px);
padding-left: clamp(8px, 2vw, 24px);
}
/* Top level should not have an indent. */
@ -187,9 +187,6 @@ th-bc {
/* 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;
@ -218,6 +215,7 @@ th-bb {
display: flex;
flex-direction: row;
align-items: center;
/* Keep the button bar invisible by default. */
opacity: 0%;
@ -228,13 +226,26 @@ th-bb {
opacity: 100%;
}
/* For media without hover functionality, th-bb should always be visible */
/* For media without hover functionality, th-bb should always be visible. */
@media (hover: none) {
.tree th-bb {
opacity: 100%;
}
}
/* Style branch dates to be smaller and less noticable. */
th-bb .branch-date {
opacity: 50%;
font-size: 0.8em;
}
/* Hide branch dates on very small displays. No clue how to fix this just yet. */
@media (max-width: 600px) {
th-bb .branch-date {
display: none;
}
}
/* Icons (used in the button bar) */
.tree {
& .icon {
@ -255,11 +266,15 @@ th-bb {
}
}
/* Style the loading text to not be too attention grabbing. */
.tree .link-loading {
padding-left: 24px;
opacity: 50%;
}
/* Highlight branch selected by # or ? in URL.
The latter is not supported by CSS so we use some auxiliary JavaScript to add a .target class
to the element highlighted by ?. */
.tree :target,
.tree .target {
@ -270,4 +285,4 @@ th-bb {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}

31
static/js/tree.js
View file

@ -1,6 +1,7 @@
// This is definitely not a three.js ripoff.
import { navigationMap } from "/navmap.js";
import * as ulid from './ulid.js';
/* Branch persistence */
@ -22,19 +23,41 @@ class Branch extends HTMLLIElement {
constructor() {
super();
this.isLeaf = this.classList.contains("leaf");
this.details = this.childNodes[0];
this.innerUL = this.details.childNodes[1];
if (this.isLeaf) {
this.contentContainer = this.childNodes[0];
} else {
this.contentContainer = this.details.childNodes[0];
}
this.bulletPoint = this.contentContainer.childNodes[0];
this.branchContent = this.contentContainer.childNodes[1];
this.buttonBar = this.contentContainer.childNodes[2];
let doPersist = !this.hasAttribute("data-th-do-not-persist");
let isOpen = branchIsOpen(this.id);
if (doPersist && isOpen !== undefined) {
this.details.open = isOpen;
}
this.details.addEventListener("toggle", _ => {
saveBranchIsOpen(this.id, this.details.open);
});
if (!this.isLeaf) {
this.details.addEventListener("toggle", _ => {
saveBranchIsOpen(this.id, this.details.open);
});
}
Branch.branchesByNamedID.set(this.id.split(':')[1], this);
let namedID = this.id.split(':')[1];
Branch.branchesByNamedID.set(namedID, this);
if (ulid.isCanonicalUlid(namedID)) {
let timestamp = ulid.getTimestamp(namedID);
let date = document.createElement("span");
date.classList.add("branch-date");
date.innerText = timestamp.toLocaleDateString();
this.buttonBar.insertBefore(date, this.buttonBar.firstChild);
}
}
}