Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: shows PWA/Hub footer navigation on chat (#25501) 

This commit sets a default of 0px for `--footer-nav-height` and set it only when `body.footer-nav-visible` allowing us to safely use `--footer-nav-height` wherever it will be needed if set.
This commit is contained in:
Joffrey JAFFEUX 2024-01-31 14:41:12 +01:00 committed by GitHub
parent 9b9ff3e10a
commit ec26dc51cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -660,6 +660,6 @@
height: var(--base-height); height: var(--base-height);
body.footer-nav-ipad & { body.footer-nav-ipad & {
height: calc(var(--base-height) - var(--footer-nav-height)); height: calc(var(--base-height) - var(--footer-nav-height, 0px));
} }
} }

4
app/assets/stylesheets/common/components/footer-nav.scss
View File

@ -5,10 +5,12 @@
$footer-nav-height: 49px; $footer-nav-height: 49px;
:root { :root {
--footer-nav-height: #{$footer-nav-height}; --footer-nav-height: 0px;
} }
body.footer-nav-visible { body.footer-nav-visible {
--footer-nav-height: #{$footer-nav-height};
#main-outlet { #main-outlet {
padding-bottom: calc(var(--footer-nav-height) + 15px); padding-bottom: calc(var(--footer-nav-height) + 15px);
} }

2
app/assets/stylesheets/common/loading-slider.scss
View File

@ -54,7 +54,7 @@
} }
body.footer-nav-ipad & { body.footer-nav-ipad & {
top: var(--footer-nav-height); top: var(--footer-nav-height, 0px);
} }
} }

9
plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
View File

@ -1,15 +1,17 @@
@mixin chat-height($inset: 0px) { @mixin chat-height($inset: 0px) {
// desktop and mobile // desktop and mobile
// -1px is for the bottom border of the chat navbar // -1px is for the bottom border of the chat navbar
height: calc( height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--composer-height, 0px) - 1px - $inset var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - $inset
); );
// mobile with keyboard opened // mobile with keyboard opened
.keyboard-visible & { .keyboard-visible & {
height: calc( height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--footer-nav-height, 0px) - 1px - $inset
); );
} }
@ -17,7 +19,8 @@
.footer-nav-ipad & { .footer-nav-ipad & {
height: calc( height: calc(
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
var(--composer-height, 0px) - 1px - $inset var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px -
$inset
); );
} }
} }

4
plugins/chat/assets/stylesheets/mobile/base-mobile.scss
View File

@ -10,10 +10,6 @@
} }
html.has-full-page-chat { html.has-full-page-chat {
.footer-nav {
display: none !important;
}
body #main-outlet { body #main-outlet {
padding: 0; padding: 0;

4
plugins/chat/assets/stylesheets/mobile/chat-footer.scss
View File

@ -20,7 +20,9 @@
position: sticky; position: sticky;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: calc(
env(safe-area-inset-bottom) + var(--footer-nav-height, 0px)
);
&__item { &__item {
display: flex; display: flex;