fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve responsive design sizing for website

Browse Source
This commit is contained in:
Keavon Chambers
2023-08-12 12:48:45 -07:00
parent c9d3453e46
commit 2412a3def6
25 changed files with 766 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
website/static/js/book.js
View File

@@ -1,4 +1,5 @@
addEventListener("DOMContentLoaded", trackScrollHeadingInTOC);
addEventListener("DOMContentLoaded", listenForClickToOpenTOC);
// Listen for scroll events and update the active section in the table of contents to match the visible content's heading
function trackScrollHeadingInTOC() {
@@ -50,3 +51,13 @@ function trackScrollHeadingInTOC() {
addEventListener("scroll", updateVisibleHeading);
updateVisibleHeading();
}
function listenForClickToOpenTOC() {
document.querySelector("[data-hamburger-menu-button-open]")?.addEventListener("click", () => {
document.querySelector("[data-chapters]")?.classList.add("open");
});
document.querySelector("[data-hamburger-menu-button-close]")?.addEventListener("click", () => {
document.querySelector("[data-chapters]")?.classList.remove("open");
});
}

7
website/static/js/navbar.js
View File

@@ -1,6 +1,6 @@
const NAV_BUTTON_INITIAL_FONT_SIZE = 32;
const NAV_BUTTON_INITIAL_FONT_SIZE = 28; // Keep up to date with `--nav-font-size` in base.scss
const RIPPLE_ANIMATION_MILLISECONDS = 100;
const RIPPLE_WIDTH = 120;
const RIPPLE_WIDTH = 100;
const HANDLE_STRETCH = 0.4;
let ripplesInitialized;
@@ -84,10 +84,11 @@ function animate(forceRefresh) {
}
function setRipples() {
const rippleStrokeWidth = Number.parseInt(window.getComputedStyle(ripplePath).getPropertyValue("--border-thickness"), 10);
const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize, 10) || NAV_BUTTON_INITIAL_FONT_SIZE;
const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
const rippleHeight = Math.round(fullRippleHeight * mediaQueryScaleFactor) + (rippleStrokeWidth === 2 ? 0 : 0.5);
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;
const rippleSvgWidth = rippleSvgRect.width;

28
website/static/js/text-justification.js Normal file
View File

@@ -0,0 +1,28 @@
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("section p").forEach((paragraph) => {
// Recursively traverse the DOM tree and modify the text nodes
const recursivelyAddWbr = (node) => {
if (node.nodeType === Node.TEXT_NODE) {
const newNodes = node.textContent.split("/");
for (let i = 0; i < newNodes.length - 1; i++) {
newNodes[i] += "/";
}
const tempSpan = document.createElement("span");
tempSpan.innerHTML = newNodes.join("<wbr>");
const replacementNodes = tempSpan.childNodes;
mutationQueue.push([node, replacementNodes]);
} else {
node.childNodes.forEach(recursivelyAddWbr);
}
};
// Perform the recursive traversal and replace the text nodes
const mutationQueue = [];
recursivelyAddWbr(paragraph);
mutationQueue.forEach(([node, newNodes]) => {
node.replaceWith(...newNodes);
});
});
});