mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 15:56:31 +08:00
c8e03f251f
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.
98 lines
2.1 KiB
SCSS
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);
|
|
}
|
|
}
|