logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: dae0af1fd2499a2eca2becbbec13356a27c4e81c
parent: 5b8d0ad71b137724660455b41f5e19db438aa201
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sun, 24 Sep 2017 01:25:07 +0200

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

630px = Drawer + 1 Column

Diffstat:

Mapp/javascript/mastodon/is_mobile.js2+-
Mapp/javascript/styles/components.scss12++++++------
Mapp/javascript/styles/rtl.scss2+-
3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js @@ -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; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss @@ -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; diff --git a/app/javascript/styles/rtl.scss b/app/javascript/styles/rtl.scss @@ -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;