cincodenada
/
mastodon
forked from cybrespace/mastodon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

changes for single column

This commit is contained in:
khr 2019-10-12 11:59:20 -07:00
parent 89b6322ef4
commit 019e0833d1
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/styles/cybre-base.scss
View File

@ -1,15 +1,8 @@
@import 'application'; @import 'application';
/* Allow columns to grow wider as the screen gets /* Wider compose area */
* wider, but don't ever let them get more than
* 400px (some people have a bunch of columns!) */
@media screen and (min-width: 1300px) { @media screen and (min-width: 1300px) {
.column {
flex-grow: 1 !important;
max-width: 400px;
}
.drawer { .drawer {
width: 17%; /* Not part of the flex fun */ width: 17%; /* Not part of the flex fun */
max-width: 400px; max-width: 400px;
@ -17,13 +10,6 @@
} }
} }
/* Cap the column height at 100vh (fixed an old
* bug someone encountered in safari, but which
* I've seen resurface from time to time) */
.column {
max-height:100vh;
}
/* Don't show outline around statuses if we're in /* Don't show outline around statuses if we're in
* mouse or touch mode (rather than keyboard) */ * mouse or touch mode (rather than keyboard) */
[data-whatinput="mouse"], [data-whatinput="touch"] { [data-whatinput="mouse"], [data-whatinput="touch"] {
@ -69,6 +55,21 @@
overflow-y:auto; overflow-y:auto;
} }
/* Put a reasonable background on the single-column compose form */
.layout-single-column .compose-panel {
background-color: $ui-base-color;
height: auto;
overflow-y: visible;
margin-top: 65px;
}
/* Better distinguish the search bar */
.layout-single-column .compose-panel .search {
position:relative;
top: -55px;
margin-bottom: -55px;
}
/* Use display: none instead of visibility:hidden /* Use display: none instead of visibility:hidden
* to hide the suggested follows list on non-mobile */ * to hide the suggested follows list on non-mobile */
@media screen and (min-width: 630px) { @media screen and (min-width: 630px) {