pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Make menu stackable on mobile

Browse source
This commit is contained in:
Dennis Boldt 2023-03-26 19:09:29 +02:00
parent df0466c6f1
commit eda3bf2688
4 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/App.module.less
View file

@ -120,6 +120,15 @@
} }
} }
@media @mobile {
.menu.menu {
> :global(.ui.container) {
height: @menuHeightMobile;
align-items: stretch;
}
}
}
.banner { .banner {
padding: 8px; padding: 8px;
z-index: 100; z-index: 100;

2
frontend/src/App.tsx
View file

@ -95,7 +95,7 @@ const App = connect((state) => ({ login: state.login }))(function App({
<title>OpenBikeSensor Portal</title> <title>OpenBikeSensor Portal</title>
</Helmet> </Helmet>
{config?.banner && <Banner {...config.banner} />} {config?.banner && <Banner {...config.banner} />}
<Menu className={styles.menu}> <Menu className={styles.menu} stackable>
<Container> <Container>
<Link <Link
to="/" to="/"

5
frontend/src/pages/MapPage/styles.module.less
View file

@ -48,7 +48,10 @@
@media @mobile { @media @mobile {
.mapContainer { .mapContainer {
height: auto; height: auto;
min-height: calc(100vh - @menuHeight); min-height: calc(100vh - @menuHeightMobile);
&.hasBanner {
height: calc(100vh - @menuHeightMobile - 50px);
}
flex-direction: column; flex-direction: column;
} }

1
frontend/src/styles.less
View file

@ -10,6 +10,7 @@
@borderColor: #e0e0e0; @borderColor: #e0e0e0;
@menuHeight: 50px; @menuHeight: 50px;
@menuHeightMobile: 220px;
@mobile: ~'screen and (max-width: 767px)'; @mobile: ~'screen and (max-width: 767px)';
@desktop: ~'screen and (min-width: 768px)'; @desktop: ~'screen and (min-width: 768px)';