ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change mobile layout breakpoint from 1024px to 630px (#5063) 

630px = Drawer + 1 Column
rebase/4.0.0rc2
Eugen Rochko 2017-09-24 01:25:07 +02:00 committed by GitHub
parent 5b8d0ad71b
commit dae0af1fd2
3 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/is_mobile.js
View File

@ -1,6 +1,6 @@
import detectPassiveEvents from 'detect-passive-events';
const LAYOUT_BREAKPOINT = 1024;
const LAYOUT_BREAKPOINT = 630;
export function isMobile(width) {
return width <= LAYOUT_BREAKPOINT;

12
app/javascript/styles/components.scss
View File

@ -222,7 +222,7 @@
}
.dropdown--active::after {
@media screen and (min-width: 1025px) {
@media screen and (min-width: 631px) {
content: "";
display: block;
position: absolute;
@ -1474,7 +1474,7 @@
}
}
@media screen and (max-width: 1024px) {
@media screen and (max-width: 630px) {
.column,
.drawer {
width: 100%;
@ -1491,7 +1491,7 @@
}
}
@media screen and (min-width: 1025px) {
@media screen and (min-width: 631px) {
.columns-area {
padding: 0;
}
@ -1605,7 +1605,7 @@
&:hover,
&:focus,
&:active {
@media screen and (min-width: 1025px) {
@media screen and (min-width: 631px) {
background: lighten($ui-base-color, 14%);
transition: all 100ms linear;
}
@ -1625,7 +1625,7 @@
}
}
@media screen and (min-width: 1025px) {
@media screen and (min-width: 631px) {
.tabs-bar {
display: none;
}
@ -4037,7 +4037,7 @@ noscript {
100% { opacity: 1; }
}
@media screen and (max-width: 1024px) and (max-height: 400px) {
@media screen and (max-width: 630px) and (max-height: 400px) {
$duration: 400ms;
$delay: 100ms;

2
app/javascript/styles/rtl.scss
View File

@ -245,7 +245,7 @@ body.rtl {
margin-left: 30px;
}
@media screen and (min-width: 1025px) {
@media screen and (min-width: 631px) {
.column,
.drawer {
padding-left: 5px;