Improve mobile layout a bit (fixes #123)

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

View file

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

View file

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

View file

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

View file

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

View file

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