From ed14a92c7b7a9792de574a391f895bda1bfb6dcb Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Mon, 11 May 2020 17:28:51 +0100 Subject: [PATCH 1/6] Make OC selector wider to support more characters where there is enough space for that --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 6 +++++- .../stylesheets/darkswarm/distributor_header.css.scss | 4 ---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 95bd6b1059..04deec214c 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -71,7 +71,7 @@ ordercycle { select, p { - width: inherit; + width: 200px; display: inline-block; color: $white; background-color: transparent; @@ -89,6 +89,10 @@ ordercycle { width: 100%; min-width: 0; } + + @media all and (min-width: 640px) and (max-width: 1024px), (min-width: 1200px) { + width: 250px; + } } option { diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss index 8e9ebf769b..7df15dfcc4 100644 --- a/app/assets/stylesheets/darkswarm/distributor_header.css.scss +++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss @@ -20,10 +20,6 @@ section { padding: 30px 0 0; position: relative; - select { - width: 200px; - } - img { display: block; height: 100px; From b2bfe28173e930ee44784ce9979a9114d6e64b25 Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Mon, 11 May 2020 17:35:03 +0100 Subject: [PATCH 2/6] Remove extra right pad on OC selector, in mobile, this will make the selector be centered --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 04deec214c..355b84b8ac 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -111,6 +111,7 @@ ordercycle { @include breakpoint(mobile) { display: flex; + margin-right: 0; } } From 12f512e98b4ebbc36d6400ef94978b4005164e4f Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Mon, 11 May 2020 17:56:27 +0100 Subject: [PATCH 3/6] Move arrow on OC selector a little to the right so it's centered between end of text (if max length reached) and border --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 355b84b8ac..2f1d919db6 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -76,13 +76,14 @@ ordercycle { color: $white; background-color: transparent; border: 0; + border-radius: 0 $radius-small $radius-small 0; margin-bottom: 0; font-size: 1em; line-height: 1.3em; padding: 0.5em 1.25em 0.5em 0.75em; height: 2.35em; - background-size: 30px auto; - border-radius: 0 $radius-small $radius-small 0; + background-position-x: 102%; + background-size: 30px auto; min-width: 13em; @include breakpoint(mobile) { From a376a17f64583d56bf41061422f48498bfaf295d Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Mon, 11 May 2020 17:59:03 +0100 Subject: [PATCH 4/6] Group related properties together --- .../stylesheets/darkswarm/_shop-navigation.css.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 2f1d919db6..d54464d921 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -63,6 +63,8 @@ ordercycle { select { background-image: url('/assets/white-caret.svg'); + background-size: 30px auto; + background-position-x: 102%; } p { @@ -71,20 +73,18 @@ ordercycle { select, p { - width: 200px; display: inline-block; color: $white; background-color: transparent; border: 0; border-radius: 0 $radius-small $radius-small 0; margin-bottom: 0; + padding: 0.5em 1.25em 0.5em 0.75em; font-size: 1em; line-height: 1.3em; - padding: 0.5em 1.25em 0.5em 0.75em; height: 2.35em; - background-position-x: 102%; - background-size: 30px auto; min-width: 13em; + width: 200px; @include breakpoint(mobile) { width: 100%; From 2c55bef544b8e5753cd0f5ab3259b562c4543e8b Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Tue, 12 May 2020 13:01:00 +0100 Subject: [PATCH 5/6] Remove unnecessary padding This is looking broken in ipad mini 3 --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index d54464d921..a360c8f606 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -168,7 +168,7 @@ shop ordercycle { @include breakpoint(tablet) { float: none; - padding: 0 0 10px; + padding: 0; } } From 3e0839de73b42fe774f4494c776dc2d04d4cfc2c Mon Sep 17 00:00:00 2001 From: Luis Ramos Date: Tue, 12 May 2020 13:32:38 +0100 Subject: [PATCH 6/6] Increase warning sign line height so that it renders correctly on smaller screens --- app/assets/stylesheets/darkswarm/shop.css.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 6c477acb48..0c46523184 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -234,6 +234,7 @@ $sidebar-footer-height: 5em; .warning-sign { margin: 0 10px 0 5px; display: inline-block; + line-height: 1.9rem; strong { color: $grey-650;