fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 21:28:11 +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-14 03:29:40 -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
website/static/js/navbar.js
+4 -3
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;