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);
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;
:root {
--footer-nav-height: #{$footer-nav-height};
--footer-nav-height: 0px;
}
body.footer-nav-visible {
--footer-nav-height: #{$footer-nav-height};
#main-outlet {
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 & {
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) {
// desktop and mobile
// -1px is for the bottom border of the chat navbar
height: calc(
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
.keyboard-visible & {
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 & {
height: calc(
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 {
.footer-nav {
display: none !important;
}
body #main-outlet {
padding: 0;

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

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