style: единый отступ fixed FAB и плавающего меню (--edge-pad)
This commit is contained in:
1 parent
8f40fcb5ed
commit
73fb0a1636
2 files changed
+19
-3
No files matched your search
+4
-2
@@ -38,6 +38,8 @@ html {
|
||||
--radius-card: 14px;
|
||||
--radius-btn: 14px;
|
||||
--space: clamp(1rem, 4vw, 2.75rem);
|
||||
/* Единый отступ fixed-элементов (FAB, плавающее меню) от краёв вьюпорта */
|
||||
--edge-pad: max(var(--space), env(safe-area-inset-right, 0px), env(safe-area-inset-bottom, 0px), env(safe-area-inset-left, 0px), env(safe-area-inset-top, 0px));
|
||||
/* Контент на всю ширину экрана, поля только от --space и safe area */
|
||||
--max: none;
|
||||
--font: "Alice", system-ui, -apple-system, serif;
|
||||
@@ -811,8 +813,8 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover {
|
||||
|
||||
.fab-stack {
|
||||
position: fixed;
|
||||
right: max(var(--space), env(safe-area-inset-right, 0px));
|
||||
bottom: max(1rem, env(safe-area-inset-bottom, 0px));
|
||||
right: var(--edge-pad);
|
||||
bottom: var(--edge-pad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
@@ -10,7 +10,20 @@ export function initNavOverflow() {
|
||||
|
||||
const links = Array.from(nav.querySelectorAll("a"));
|
||||
const MENU_GAP = 6;
|
||||
const VIEWPORT_PAD = 8;
|
||||
function getEdgePad() {
|
||||
const raw = getComputedStyle(document.documentElement).getPropertyValue("--edge-pad").trim();
|
||||
if (!raw) return 8;
|
||||
// resolve через временный элемент, т.к. значение — max(...clamp...)
|
||||
const probe = document.createElement("span");
|
||||
probe.style.all = "unset";
|
||||
probe.style.position = "fixed";
|
||||
probe.style.left = raw;
|
||||
document.body.appendChild(probe);
|
||||
const px = probe.getBoundingClientRect().left;
|
||||
probe.remove();
|
||||
return Math.max(0, Math.round(px));
|
||||
}
|
||||
let VIEWPORT_PAD = getEdgePad();
|
||||
let openInFloatingMode = null;
|
||||
let resizeRaf = 0;
|
||||
|
||||
@@ -139,6 +152,7 @@ export function initNavOverflow() {
|
||||
const onResize = () => {
|
||||
if (resizeRaf) cancelAnimationFrame(resizeRaf);
|
||||
resizeRaf = requestAnimationFrame(() => {
|
||||
VIEWPORT_PAD = getEdgePad();
|
||||
layoutLinks();
|
||||
placeMoreMenu();
|
||||
resizeRaf = 0;
|
||||
|
||||
Reference in new issue
Block a user