Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-21 21:29:20 +01:00
Code Issues Projects Releases Packages 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)); filter: drop-shadow(0 1px 2px var(--button-bg-color));
} }
@media (max-width: calc(40em - 1px)) { @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 + 52px);
bottom: calc(16px + env(safe-area-inset-bottom) + 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); return !/^\/(login|welcome)/.test(pathname);
}, [location]); }, [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 ( return (
<> <>
<Routes location={nonRootLocation || location}> <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)) { @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; padding-bottom: 52px;
} }
} }
@media (min-width: 40em) { @media (min-width: 40em) {
#app:has(#shortcuts .tab-bar) .timeline-deck { #app[data-shortcuts-view-mode='tab-menu-bar'] .timeline-deck {
margin-top: 44px; 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); --margin-top: calc(44px + 8px);
} }
#shortcuts .tab-bar:not([hidden]) { #shortcuts .tab-bar:not([hidden]) {