discourse/app/assets/stylesheets/common/components/footer-nav.scss
Penar Musaraj c8e03f251f
DEV: Remove body docked class and its scroll event listener ()
Docking is a leftover from older header code, it looks like it is no
longer used in the app. This helper was registering a scroll event
listener to check if the header should be docked or not. Initially, a
"docked" class was added to the body element. This class persisted
through the lifecycle of the app and the scroll event was doing no
useful work.

Some older themes may still use it in CSS, that will cause a regression,
from a quick look at existing code, the surface area should be small
(2-3 themes). It's worth removing the event listener for performance
reasons. We could possibly add the class "docked" statically to the body
element, but it's redundant. It's best to clean up the relevant CSS in
themes, where applicable.
2024-10-31 10:21:50 -04:00

98 lines
2.1 KiB
SCSS

// --------------------------------------------------
// Footer nav bar (displayed in DiscourseHub app and PWAs)
// --------------------------------------------------
$footer-nav-height: 49px;
:root {
--footer-nav-height: #{$footer-nav-height};
}
html.footer-nav-visible {
#main-outlet {
padding-bottom: calc(var(--footer-nav-height) + 15px);
}
#reply-control.draft {
bottom: var(--footer-nav-height);
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: calc(var(--footer-nav-height) + env(safe-area-inset-bottom));
}
.posts-filtered-notice {
transition: all linear 0.1s;
bottom: calc(var(--footer-nav-height) + env(safe-area-inset-bottom));
}
}
.footer-nav {
background-color: rgba(var(--header_background-rgb), 0.9);
box-shadow: var(--shadow-footer-nav);
height: var(--footer-nav-height);
position: fixed;
bottom: calc(var(--footer-nav-height) * -1);
left: 0;
width: 100%;
z-index: z("footer-nav");
transition: all linear 0.1s;
.d-icon {
color: var(--header_primary-medium);
}
&.visible {
bottom: 0px;
}
.footer-nav-widget {
display: flex;
justify-content: "space-evenly";
@include unselectable;
button {
flex: 1;
margin: 4px;
border-radius: 2px;
padding: 14px 18px;
&:disabled {
opacity: 0.6;
}
}
}
}
@supports (padding: max(0px)) {
.footer-nav.visible {
padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))");
}
}
@supports (-webkit-backdrop-filter: blur(10px)) {
html:not(.footer-nav-ipad) .footer-nav {
background-color: rgba(var(--header_background-rgb), 0.7);
-webkit-backdrop-filter: blur(20px);
}
}
html.footer-nav-ipad {
padding-top: var(--footer-nav-height);
.footer-nav {
bottom: auto;
top: 0px;
background-color: var(--header_background);
z-index: z("ipad-header-nav");
padding-bottom: 0; // resets safe-area-inset-bottom
}
#reply-control,
#reply-control.fullscreen {
z-index: z("ipad-header-nav") + 1;
}
.d-header-wrap {
top: var(--footer-nav-height);
}
}