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-card: 14px;
|
||||||
--radius-btn: 14px;
|
--radius-btn: 14px;
|
||||||
--space: clamp(1rem, 4vw, 2.75rem);
|
--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 */
|
/* Контент на всю ширину экрана, поля только от --space и safe area */
|
||||||
--max: none;
|
--max: none;
|
||||||
--font: "Alice", system-ui, -apple-system, serif;
|
--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 {
|
.fab-stack {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: max(var(--space), env(safe-area-inset-right, 0px));
|
right: var(--edge-pad);
|
||||||
bottom: max(1rem, env(safe-area-inset-bottom, 0px));
|
bottom: var(--edge-pad);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|||||||
@@ -10,7 +10,20 @@ export function initNavOverflow() {
|
|||||||
|
|
||||||
const links = Array.from(nav.querySelectorAll("a"));
|
const links = Array.from(nav.querySelectorAll("a"));
|
||||||
const MENU_GAP = 6;
|
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 openInFloatingMode = null;
|
||||||
let resizeRaf = 0;
|
let resizeRaf = 0;
|
||||||
|
|
||||||
@@ -139,6 +152,7 @@ export function initNavOverflow() {
|
|||||||
const onResize = () => {
|
const onResize = () => {
|
||||||
if (resizeRaf) cancelAnimationFrame(resizeRaf);
|
if (resizeRaf) cancelAnimationFrame(resizeRaf);
|
||||||
resizeRaf = requestAnimationFrame(() => {
|
resizeRaf = requestAnimationFrame(() => {
|
||||||
|
VIEWPORT_PAD = getEdgePad();
|
||||||
layoutLinks();
|
layoutLinks();
|
||||||
placeMoreMenu();
|
placeMoreMenu();
|
||||||
resizeRaf = 0;
|
resizeRaf = 0;
|
||||||
|
|||||||
Reference in new issue
Block a user