[Glitch] Various improvements to single column layout

Port 84dc21d55d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2019-05-23 20:01:10 +02:00
committed by ThibG
parent 610b4b44c4
commit 0bd9f23e6d
3 changed files with 56 additions and 14 deletions

View File

@ -11,6 +11,39 @@
justify-content: flex-start;
overflow-x: auto;
position: relative;
&__panels {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
&__pane {
flex: 1 1 auto;
height: 100%;
overflow: hidden;
pointer-events: none;
display: flex;
justify-content: flex-end;
&__inner {
pointer-events: auto;
height: 100%;
}
}
&__main {
box-sizing: border-box;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
@media screen and (min-width: 360px) {
padding: 0 10px;
}
}
}
}
.react-swipeable-view-container {
@ -496,4 +529,8 @@
&:active {
background: lighten($ui-highlight-color, 7%);
}
@media screen and (min-width: 630px) {
display: none;
}
}

View File

@ -608,7 +608,6 @@
.columns-area--mobile {
flex-direction: column;
width: 100%;
max-width: 600px;
margin: 0 auto;
.column,
@ -624,7 +623,7 @@
}
@media screen and (min-width: 360px) {
padding: 10px;
padding: 10px 0;
}
@media screen and (min-width: 630px) {
@ -685,8 +684,7 @@
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
width: calc(100% - 20px);
max-width: 600px;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {