release nouri 0.5.1 mobile nav and header fixes
This commit is contained in:
+95
-30
@@ -152,8 +152,7 @@ button.secondary:hover,
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
position: static;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
@@ -969,6 +968,16 @@ legend {
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.menu-card-button {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.menu-card-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.roomy-row {
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
@@ -1191,6 +1200,10 @@ legend {
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.mobile-nav-stack {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-more-sheet {
|
||||
position: fixed;
|
||||
left: 0.75rem;
|
||||
@@ -1223,6 +1236,10 @@ legend {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.mobile-menu-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mobile-sheet-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1241,9 +1258,19 @@ legend {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
body.has-mobile-nav {
|
||||
padding-top: 5.3rem;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: static;
|
||||
grid-template-columns: 1fr;
|
||||
position: fixed;
|
||||
top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
z-index: 30;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
@@ -1273,13 +1300,12 @@ legend {
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0.7rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.6rem;
|
||||
padding: 0.75rem 0.9rem;
|
||||
margin-bottom: 0.85rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 22px;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.desktop-nav,
|
||||
@@ -1377,54 +1403,95 @@ legend {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav {
|
||||
.mobile-nav-stack {
|
||||
position: fixed;
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
bottom: 0.75rem;
|
||||
z-index: 20;
|
||||
z-index: 24;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 22px;
|
||||
background: var(--bg-elevated);
|
||||
background: color-mix(in srgb, var(--bg) 96%, #f6decb 4%);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(26px) saturate(1.15);
|
||||
}
|
||||
|
||||
.mobile-bottom-nav a {
|
||||
.mobile-nav-extension {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-nav-stack.is-open .mobile-nav-extension {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.28rem;
|
||||
padding: 0.55rem 0.35rem;
|
||||
border-radius: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.mobile-nav-extension,
|
||||
.mobile-sheet-links.mobile-menu-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-extra-link,
|
||||
.mobile-extra-button,
|
||||
.mobile-bottom-nav a,
|
||||
.mobile-nav-button {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
display: grid;
|
||||
min-height: 3.95rem;
|
||||
padding: 0.55rem 0.2rem 0.5rem;
|
||||
text-align: center;
|
||||
gap: 0.28rem;
|
||||
padding: 0.55rem 0.35rem;
|
||||
border-radius: 16px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav a.active,
|
||||
.mobile-nav-button.is-open {
|
||||
background: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.mobile-extra-link .ui-icon,
|
||||
.mobile-extra-button .ui-icon,
|
||||
.mobile-bottom-nav .ui-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mobile-extra-link span:last-child,
|
||||
.mobile-extra-button span:last-child,
|
||||
.mobile-bottom-nav a span:last-child,
|
||||
.mobile-nav-button span:last-child {
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.mobile-extra-form {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.35rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav a {
|
||||
}
|
||||
|
||||
.mobile-nav-button {
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav a.active,
|
||||
.mobile-extra-link.active,
|
||||
.mobile-nav-button.is-open {
|
||||
background: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.mobile-profile-link {
|
||||
@@ -1438,8 +1505,6 @@ legend {
|
||||
height: 2.15rem;
|
||||
}
|
||||
|
||||
.mobile-sheet-head,
|
||||
.mobile-sheet-actions,
|
||||
.week-template-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
+16
-12
@@ -1,32 +1,33 @@
|
||||
(() => {
|
||||
const initMobileSheet = () => {
|
||||
const sheet = document.querySelector("[data-mobile-sheet]");
|
||||
const backdrop = document.querySelector("[data-mobile-sheet-backdrop]");
|
||||
const navStack = document.querySelector("[data-mobile-nav-stack]");
|
||||
const openButtons = document.querySelectorAll("[data-mobile-sheet-open]");
|
||||
const closeButtons = document.querySelectorAll("[data-mobile-sheet-close]");
|
||||
if (!sheet || !backdrop || !openButtons.length) return;
|
||||
if (!sheet || !navStack || !openButtons.length) return;
|
||||
|
||||
const closeSheet = () => {
|
||||
sheet.hidden = true;
|
||||
backdrop.hidden = true;
|
||||
document.body.classList.remove("sheet-open");
|
||||
navStack.classList.remove("is-open");
|
||||
openButtons.forEach((button) => button.classList.remove("is-open"));
|
||||
};
|
||||
|
||||
const openSheet = () => {
|
||||
sheet.hidden = false;
|
||||
backdrop.hidden = false;
|
||||
document.body.classList.add("sheet-open");
|
||||
navStack.classList.add("is-open");
|
||||
openButtons.forEach((button) => button.classList.add("is-open"));
|
||||
};
|
||||
|
||||
const toggleSheet = () => {
|
||||
if (sheet.hidden) {
|
||||
openSheet();
|
||||
} else {
|
||||
closeSheet();
|
||||
}
|
||||
};
|
||||
|
||||
openButtons.forEach((button) => {
|
||||
button.addEventListener("click", openSheet);
|
||||
button.addEventListener("click", toggleSheet);
|
||||
});
|
||||
closeButtons.forEach((button) => {
|
||||
button.addEventListener("click", closeSheet);
|
||||
});
|
||||
backdrop.addEventListener("click", closeSheet);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
@@ -37,6 +38,9 @@
|
||||
sheet.querySelectorAll("a").forEach((link) => {
|
||||
link.addEventListener("click", closeSheet);
|
||||
});
|
||||
sheet.querySelectorAll("button[data-theme-toggle]").forEach((button) => {
|
||||
button.addEventListener("click", closeSheet);
|
||||
});
|
||||
};
|
||||
|
||||
const initFilterInputs = () => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const CACHE_NAME = "nouri-v0-5-1";
|
||||
const CACHE_NAME = "nouri-v0-5-1-1";
|
||||
const STATIC_ASSETS = [
|
||||
"/static/css/styles.css",
|
||||
"/static/js/theme.js",
|
||||
|
||||
Reference in New Issue
Block a user