mirror of
https://github.com/dpnmw/community-landing.git
synced 2026-03-18 09:27:16 +00:00
UI Fixes for Mobile
This commit is contained in:
@@ -862,6 +862,8 @@ const CONDITIONAL_TOGGLES = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
function applyConditionalVisibility(container) {
|
function applyConditionalVisibility(container) {
|
||||||
|
const tab = TABS.find((t) => t.id === currentTab);
|
||||||
|
|
||||||
CONDITIONAL_TOGGLES.forEach((group) => {
|
CONDITIONAL_TOGGLES.forEach((group) => {
|
||||||
const toggleRow = container.querySelector(
|
const toggleRow = container.querySelector(
|
||||||
`.row.setting[data-setting="${group.toggle}"]`
|
`.row.setting[data-setting="${group.toggle}"]`
|
||||||
@@ -873,12 +875,17 @@ function applyConditionalVisibility(container) {
|
|||||||
|
|
||||||
group.whenOff.forEach((name) => {
|
group.whenOff.forEach((name) => {
|
||||||
const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
|
const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
|
||||||
if (row) row.classList.toggle("cl-tab-hidden", isOn);
|
if (!row) return;
|
||||||
|
// Only unhide if this setting belongs to the current tab
|
||||||
|
const inTab = tab && tab.settings.has(name);
|
||||||
|
row.classList.toggle("cl-tab-hidden", !inTab || isOn);
|
||||||
});
|
});
|
||||||
|
|
||||||
group.whenOn.forEach((name) => {
|
group.whenOn.forEach((name) => {
|
||||||
const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
|
const row = container.querySelector(`.row.setting[data-setting="${name}"]`);
|
||||||
if (row) row.classList.toggle("cl-tab-hidden", !isOn);
|
if (!row) return;
|
||||||
|
const inTab = tab && tab.settings.has(name);
|
||||||
|
row.classList.toggle("cl-tab-hidden", !inTab || !isOn);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -128,7 +128,10 @@
|
|||||||
/* ── Smooth Scroll ── */
|
/* ── Smooth Scroll ── */
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
overflow-x: hidden;
|
}
|
||||||
|
|
||||||
|
html, .cl-body {
|
||||||
|
max-width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Focus-visible Accessibility ── */
|
/* ── Focus-visible Accessibility ── */
|
||||||
@@ -543,13 +546,17 @@ html {
|
|||||||
.cl-navbar__mobile-menu {
|
.cl-navbar__mobile-menu {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
background: var(--cl-bg);
|
background: var(--cl-bg);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1.25rem;
|
gap: 1.25rem;
|
||||||
z-index: 1000;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-navbar__mobile-menu.open {
|
.cl-navbar__mobile-menu.open {
|
||||||
@@ -2143,6 +2150,10 @@ html {
|
|||||||
MOBILE — tighter padding, no horizontal overflow
|
MOBILE — tighter padding, no horizontal overflow
|
||||||
═══════════════════════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════════════════════ */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
|
.cl-orb-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.cl-container {
|
.cl-container {
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -188,13 +188,13 @@ module CommunityLanding
|
|||||||
html << "</div>"
|
html << "</div>"
|
||||||
|
|
||||||
html << "<button class=\"cl-navbar__hamburger\" id=\"cl-hamburger\" aria-label=\"Toggle menu\"><span></span><span></span><span></span></button>\n"
|
html << "<button class=\"cl-navbar__hamburger\" id=\"cl-hamburger\" aria-label=\"Toggle menu\"><span></span><span></span><span></span></button>\n"
|
||||||
|
html << "</div></nav>\n"
|
||||||
html << "<div class=\"cl-navbar__mobile-menu\" id=\"cl-nav-links\">\n"
|
html << "<div class=\"cl-navbar__mobile-menu\" id=\"cl-nav-links\">\n"
|
||||||
html << theme_toggle
|
html << theme_toggle
|
||||||
html << render_social_icons
|
html << render_social_icons
|
||||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{button_with_icon(signin_label)}</a>\n"
|
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--ghost\">#{button_with_icon(signin_label)}</a>\n"
|
||||||
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{button_with_icon(join_label)}</a>\n"
|
html << "<a href=\"#{login_url}\" class=\"cl-navbar__link cl-btn--primary\">#{button_with_icon(join_label)}</a>\n"
|
||||||
html << "</div>"
|
html << "</div>\n"
|
||||||
html << "</div></nav>\n"
|
|
||||||
html
|
html
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user