fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

Add border above some nav elements 

Borders were added in api-nav v0.1.0.

Also simplify some CSS selectors, since they contained a lot of redundancy which made them harder to read.
This commit is contained in:
Florine W. Dekker 2022-11-23 11:09:37 +01:00
parent df1198b361
commit 4d0f1dc5b4
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "3.3.2",
"version": "3.3.3",
"description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker",
"license": "MIT",

16
src/main/css/snippets/nav.css
View File

@ -28,7 +28,7 @@ nav.fwd-nav li > :first-child {
margin: 0;
}
nav.fwd-nav ul li ul {
nav.fwd-nav ul ul {
display: none;
position: absolute;
@ -38,13 +38,13 @@ nav.fwd-nav ul li ul {
margin: 0;
}
nav.fwd-nav ul li:where(:active, :focus-within, :hover) > ul {
nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {
display: flex;
flex-direction: column;
align-items: start;
}
nav.fwd-nav ul li ul li ul {
nav.fwd-nav ul ul ul {
left: 100%;
top: 0;
}
@ -58,17 +58,21 @@ nav.fwd-nav > ul > li > ul {
z-index: 10;
}
/* Colors */
/* Colors and optional styling */
nav.fwd-nav,
nav.fwd-nav ul {
background-color: var(--primary);
}
nav.fwd-nav ul li:where(:active, :focus-within, :hover) {
nav.fwd-nav li.border-above {
border-top: 1px solid #ccc;
}
nav.fwd-nav li:where(:active, :focus-within, :hover) {
background-color: var(--primary-focus-dark);
}
nav.fwd-nav ul li.current-page:not(:where(:active, :focus-within, :hover)) {
nav.fwd-nav li.current-page:not(:where(:active, :focus-within, :hover)) {
background-color: var(--primary-focus-opaque);
}

18
src/main/js/Template.ts
View File

@ -112,21 +112,27 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
* @returns the navigation list entry as HTML, described by its children
*/
function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
const shouldHighlight = highlightPath?.startsWith(`${path + entry.name}/`) ?? false;
const isExternalLink = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#";
const classList = [];
if (highlightPath?.startsWith(`${path + entry.name}/`) ?? false) classList.push("current-page");
if (entry.border) classList.push("border-above");
const classString = classList.length !== 0 ? `class="${classList.join(" ")}"` : "";
const externalLinkString = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#"
? `target="_blank"`
: "";
if (entry.entries.length === 0)
return "" +
`<li ${shouldHighlight ? "class=\"current-page\"" : ""}>` +
`<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
`<li ${classString}>` +
`<a href="${entry.link}" ${externalLinkString}>${entry.name}</a>` +
`</li>`;
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
const arrow = depth === 0 ? "&#9662;" : "&#9656;";
return "" +
`<li class="${shouldHighlight ? "current-page" : ""}">` +
`<a href="${entry.link}">${entry.name} ${arrow}</a>` +
`<li ${classString}>` +
`<a href="${entry.link}" ${externalLinkString}>${entry.name} ${arrow}</a>` +
`<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
`</li>`;
}