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>

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

@ -1,13 +1,24 @@
@import "styles.less";
.stage { .stage {
position: relative; position: relative;
margin-bottom: 32px; margin-bottom: 32px;
} }
.details.details { @media @desktop {
position: absolute; .details.details {
width: 320px; position: absolute;
top: 16px; width: 320px;
right: 16px; top: 16px;
max-height: calc(100% - 32px); right: 16px;
overflow: auto; max-height: calc(100% - 32px);
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)";