nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix menu bar not placed properly on Firefox

Browse source 
Because Firefox *still* doesn't support :has
This commit is contained in:
Lim Chee Aun 2023-04-02 15:18:08 +08:00
parent d194b08aef
commit 1365cbff3a
3 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -1062,7 +1062,7 @@ body:has(.status-deck) .media-post-link {
filter: drop-shadow(0 1px 2px var(--button-bg-color));
}
@media (max-width: calc(40em - 1px)) {
#app:has(#shortcuts .tab-bar) #compose-button {
#app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
bottom: calc(16px + 52px);
bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
}

8
src/app.jsx
View file

@ -192,6 +192,14 @@ function App() {
return !/^\/(login|welcome)/.test(pathname);
}, [location]);
// Change #app classname based on snapStates.settings.shortcutsViewMode
useEffect(() => {
const $app = document.getElementById('app');
if ($app) {
$app.dataset.shortcutsViewMode = snapStates.settings.shortcutsViewMode;
}
}, [snapStates.settings.shortcutsViewMode]);
return (
<>
<Routes location={nonRootLocation || location}>

6
src/components/shortcuts.css
View file

@ -131,16 +131,16 @@ shortcuts .tab-bar[hidden] {
}
@media (max-width: calc(40em - 1px)) {
#app:has(#shortcuts .tab-bar) .deck-container {
#app[data-shortcuts-view-mode='tab-menu-bar'] .deck-container {
padding-bottom: 52px;
}
}
@media (min-width: 40em) {
#app:has(#shortcuts .tab-bar) .timeline-deck {
#app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
margin-top: 44px;
}
#app:has(#shortcuts .tab-bar) .timeline-deck > header {
#app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck > header {
--margin-top: calc(44px + 8px);
}
#shortcuts .tab-bar:not([hidden]) {