From a70468aa562e51c3dd0d4a7505f4163e3572ea13 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Sat, 24 Jun 2017 13:18:54 -0500 Subject: Support overriding media queries for deciding between single-column/multi-column layouts with a class --- app/javascript/styles/_mixins.scss | 22 ++++++++++++++++++++++ app/javascript/styles/accounts.scss | 8 ++++---- app/javascript/styles/components.scss | 22 +++++++++++----------- app/javascript/styles/containers.scss | 4 ++-- app/javascript/styles/custom.scss | 2 +- 5 files changed, 40 insertions(+), 18 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index 455062135..76302af99 100644 --- a/app/javascript/styles/_mixins.scss +++ b/app/javascript/styles/_mixins.scss @@ -10,3 +10,25 @@ height: $size; background-size: $size $size; } + +@mixin single-column($media, $parent: '&') { + .auto-columns #{$parent} { + @media #{$media} { + @content; + } + } + .single-column #{$parent} { + @content; + } +} + +@mixin multi-columns($media, $parent: '&') { + .auto-columns #{$parent} { + @media #{$media} { + @content; + } + } + .multi-columns #{$parent} { + @content; + } +} \ No newline at end of file diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 10f8bd2b9..815f8b94f 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -9,7 +9,7 @@ overflow: hidden; position: relative; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { border-radius: 0; box-shadow: none; } @@ -148,7 +148,7 @@ order: 1; } - @media screen and (max-width: 480px) { + @include single-column('screen and (max-width: 480px)') { .details { display: block; } @@ -230,7 +230,7 @@ color: lighten($ui-base-color, 10%); } - @media screen and (max-width: 360px) { + @include single-column('screen and (max-width: 360px)') { padding: 30px 20px; a, @@ -258,7 +258,7 @@ display: flex; flex-wrap: wrap; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { border-radius: 0; box-shadow: none; } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 025ef2f64..e204f3637 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1330,7 +1330,7 @@ position: relative; } -@media screen and (min-width: 360px) { +@include multi-columns('screen and (min-width: 360px)', $parent: null) { .columns-area { padding: 10px; } @@ -1386,7 +1386,7 @@ } } -@media screen and (min-width: 360px) { +@include multi-columns('screen and (min-width: 360px)', $parent: null) { .tabs-bar { margin: 10px; margin-bottom: 0; @@ -1397,7 +1397,7 @@ } } -@media screen and (max-width: 1024px) { +@include single-column('screen and (max-width: 1024px)', $parent: null) { .column, .drawer { width: 100%; @@ -1414,7 +1414,7 @@ } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .columns-area { padding: 0; } @@ -1540,7 +1540,7 @@ } } -@media screen and (min-width: 600px) { +@include multi-columns('screen and (min-width: 600px)', $parent: null) { .tabs-bar__link { span { display: inline; @@ -1548,7 +1548,7 @@ } } -@media screen and (min-width: 1025px) { +@include multi-columns('screen and (min-width: 1025px)', $parent: null) { .tabs-bar { display: none; } @@ -1737,7 +1737,7 @@ } &.hidden-on-mobile { - @media screen and (max-width: 1024px) { + @include single-column('screen and (max-width: 1024px)') { display: none; } } @@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet { } &.hidden-on-mobile { - @media screen and (max-width: 1024px) { + @include single-column('screen and (max-width: 1024px)') { display: none; } } @@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet { } } -@media screen and (max-width: 550px) { +@include single-column('screen and (max-width: 550px)', $parent: null) { .onboarding-modal { width: 100%; height: 100%; @@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet { margin-right: 15px; } -@media screen and (max-width: 400px) { +@include single-column('screen and (max-width: 400px)', $parent: null) { .onboarding-modal__page-one { flex-direction: column; } @@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet { } } -@media screen and (max-width: 320px) and (max-height: 600px) { +@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) { .onboarding-modal__page p { font-size: 14px; line-height: 20px; diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index 68f73e0c0..34d6cbc69 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -3,7 +3,7 @@ margin: 0 auto; margin-top: 40px; - @media screen and (max-width: 700px) { + @include single-column('screen and (max-width: 700px)') { width: 100%; margin: 0; } @@ -15,7 +15,7 @@ margin-bottom: 0; cursor: default; - @media screen and (max-width: 360px) { + @include single-column('screen and (max-width: 360px)') { margin: 30px auto; } diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss index b03231102..7a0509842 100644 --- a/app/javascript/styles/custom.scss +++ b/app/javascript/styles/custom.scss @@ -1,6 +1,6 @@ @import 'application'; -@media screen and (min-width: 1300px) { +@include multi-columns('screen and (min-width: 1300px)', $parent: null) { .column { flex-grow: 1 !important; max-width: 400px; -- cgit