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

Improve mobile layout a bit (fixes #123)

Browse source
This commit is contained in:
Paul Bienkowski 2021-12-03 16:55:50 +01:00
parent 456554c1de
commit 7d2c45da43
5 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/HomePage.module.less
View file

@ -1,9 +1,11 @@
@import "styles.less";
.welcomeMap { .welcomeMap {
height: 60rem; height: 60rem;
max-height: 70vh; max-height: 70vh;
position: relative; position: relative;
@media screen and (max-width: 767px) { @media @mobile {
margin: -35px -32px 0 -32px; margin: -35px -32px 0 -32px;
max-height: 70vh; max-height: 70vh;
} }

2
frontend/src/pages/SettingsPage.tsx
View file

@ -45,7 +45,7 @@ const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(func
return ( return (
<Page> <Page>
<Grid centered relaxed divided> <Grid centered relaxed divided stackable>
<Grid.Row> <Grid.Row>
<Grid.Column width={8}> <Grid.Column width={8}>
<Header as="h2">Your profile</Header> <Header as="h2">Your profile</Header>

2
frontend/src/pages/TrackEditor.tsx
View file

@ -95,7 +95,7 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
return ( return (
<Page> <Page>
<Grid centered relaxed divided> <Grid centered relaxed divided stackable>
<Grid.Row> <Grid.Row>
<Grid.Column width={10}> <Grid.Column width={10}>
<Header as="h2">Edit {track ? track.title || 'Unnamed track' : 'track'}</Header> <Header as="h2">Edit {track ? track.title || 'Unnamed track' : 'track'}</Header>

11
frontend/src/pages/TrackPage/TrackPage.module.less
View file

@ -1,8 +1,11 @@
@import "styles.less";
.stage { .stage {
position: relative; position: relative;
margin-bottom: 32px; margin-bottom: 32px;
} }
@media @desktop {
.details.details { .details.details {
position: absolute; position: absolute;
width: 320px; width: 320px;
@ -11,3 +14,11 @@
max-height: calc(100% - 32px); max-height: calc(100% - 32px);
overflow: auto; overflow: auto;
} }
}
@media @mobile {
.details > :global(.ui.segment) {
box-shadow: none;
border: none;
}
}

3
frontend/src/styles.less
View file

@ -9,3 +9,6 @@
@secondaryColor: @obsColorG1; @secondaryColor: @obsColorG1;
@menuHeight: 50px; @menuHeight: 50px;
@mobile: ~"screen and (max-width: 767px)";
@desktop: ~"screen and (min-width: 768px)";