cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

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

630px = Drawer + 1 Column
This commit is contained in:
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'; import detectPassiveEvents from 'detect-passive-events';
const LAYOUT_BREAKPOINT = 1024; const LAYOUT_BREAKPOINT = 630;
export function isMobile(width) { export function isMobile(width) {
return width <= LAYOUT_BREAKPOINT; return width <= LAYOUT_BREAKPOINT;

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

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

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

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