Improve mobile layout a bit (fixes #123)
This commit is contained in:
parent
456554c1de
commit
7d2c45da43
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
@import "styles.less";
|
||||
|
||||
.stage {
|
||||
position: relative;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media @desktop {
|
||||
.details.details {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
|
@ -11,3 +14,11 @@
|
|||
max-height: calc(100% - 32px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media @mobile {
|
||||
.details > :global(.ui.segment) {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,3 +9,6 @@
|
|||
@secondaryColor: @obsColorG1;
|
||||
|
||||
@menuHeight: 50px;
|
||||
|
||||
@mobile: ~"screen and (max-width: 767px)";
|
||||
@desktop: ~"screen and (min-width: 768px)";
|
||||
|
|
Loading…
Reference in a new issue