From 4b0e1610eca6057998233f37e5f23685e1dbccdc Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 8 Jan 2020 13:05:09 +0100 Subject: [PATCH 01/40] Update order cycle selection box --- app/views/shopping_shared/_header.html.haml | 5 ++--- app/views/shopping_shared/tabs/_home.html.haml | 3 +++ app/views/shopping_shared/tabs/_shop.html.haml | 3 +++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/views/shopping_shared/_header.html.haml b/app/views/shopping_shared/_header.html.haml index af28612ded..03661a22ea 100644 --- a/app/views/shopping_shared/_header.html.haml +++ b/app/views/shopping_shared/_header.html.haml @@ -2,14 +2,13 @@ %navigation %distributor.details.row - .small-12.medium-6.large-6.columns + .small-12.medium-12.large-8.columns #distributor_title - if distributor.logo? %img.left{src: distributor.logo.url(:thumb)} %h3 = distributor.name %location= distributor.address.city - / Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented - .small-12.medium-6.large-6.columns + .show-for-large-up.large-4.columns = render partial: "shopping_shared/order_cycles" diff --git a/app/views/shopping_shared/tabs/_home.html.haml b/app/views/shopping_shared/tabs/_home.html.haml index c02d64692e..7e6fbe53f6 100644 --- a/app/views/shopping_shared/tabs/_home.html.haml +++ b/app/views/shopping_shared/tabs/_home.html.haml @@ -1,3 +1,6 @@ %script{ type: "text/ng-template", id: "shop/home.html" } + .order-cycle-bar.hide-for-large-up.small-12.columns + = render partial: "shopping_shared/order_cycles" + .content = render partial: 'shop/messages' diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml index 7352cd0a3b..048315c290 100644 --- a/app/views/shopping_shared/tabs/_shop.html.haml +++ b/app/views/shopping_shared/tabs/_shop.html.haml @@ -1,4 +1,7 @@ %script{ type: "text/ng-template", id: "shop/shop.html" } + .order-cycle-bar.hide-for-large-up.small-12.columns + = render partial: "shopping_shared/order_cycles" + .row .small-12.columns - if no_open_order_cycles? From bf9f7309f768201f2f037fcca1a5203b0f492436 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 8 Jan 2020 17:53:33 +0100 Subject: [PATCH 02/40] Adapt style definitions to altered layout --- .../darkswarm/_shop-navigation.css.scss | 123 ++++++++++-------- 1 file changed, 66 insertions(+), 57 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index bd0580958f..b946df99a8 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -35,68 +35,77 @@ margin-bottom: 8px; } } + } +} +ordercycle { + text-align: right; + float: right; + p { + max-width: 400px; + } - ordercycle { - text-align: right; - float: right; - p { - max-width: 400px; + h4 i { + margin-right: 0.3rem; + } + + @media all and (max-width: 640px) { + float: left; + clear: left; + text-align: left; + padding: 12px 10px; + width: 100%; + margin-top: 10px; + background: #e5e5e5; + + p { + max-width: 100%; + } + } + + form.custom { + text-align: right; + + & > strong { + line-height: 2.5; + font-size: 1.29em; + padding-right: 14px; + } + + select { + width: inherit; + display: inline-block; + border: 1px #999; + color: #666; + font-size: 1em; + margin-bottom: 0; + padding: 8px 20px 8px 12px; + + @media all and (max-width: 768px) { + font-size: 0.875em; } - h4 i { - margin-right: 0.3rem; + @media screen and (-webkit-min-device-pixel-ratio: 0) { + font-size: 16px; } - @media all and (max-width: 640px) { - float: left; - clear: left; - text-align: left; - padding: 12px 10px; - width: 100%; - margin-top: 10px; - background: #e5e5e5; - p { - max-width: 100%; - } - } - form.custom { - text-align: right; - & > strong { - line-height: 2.5; - font-size: 1.29em; - padding-right: 14px; - } - select { - width: inherit; - display: inline-block; - border: 1px #999; - color: #666; - font-size: 1em; - margin-bottom: 0; - padding: 8px 20px 8px 12px; - @media all and (max-width: 768px) { - font-size: 0.875em; - } - @media screen and (-webkit-min-device-pixel-ratio: 0) { - font-size: 16px; - } - } - } - closing { - @include headingFont; - color: black; - font-size: 1.5em; - display: block; - padding-bottom: 12px; - @media all and (max-width: 768px) { - font-size: 1.2em; - padding-bottom: 10px; - } - span { - @media all and (max-width: 768px) { - font-size: 0.875em; - } - } + } + } + + closing { + @include headingFont; + color: black; + font-size: 1.5em; + display: block; + padding-bottom: 12px; + + @media all and (max-width: 768px) { + font-size: 1.2em; + padding-bottom: 10px; + } + + span { + @media all and (max-width: 768px) { + font-size: 0.875em; } } } From de4402457ad6b6adb1eee3fa737305c4d3e4768f Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 8 Jan 2020 18:06:45 +0100 Subject: [PATCH 03/40] Improve layout and positioning on mobile and tablet --- .../stylesheets/darkswarm/_shop-navigation.css.scss | 12 ++++++++---- app/views/shopping_shared/tabs/_home.html.haml | 2 +- app/views/shopping_shared/tabs/_shop.html.haml | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index b946df99a8..6ae788a425 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -50,14 +50,14 @@ ordercycle { margin-right: 0.3rem; } - @media all and (max-width: 640px) { - float: left; - clear: left; + @media all and (max-width: 1024px) { text-align: left; + float: none; padding: 12px 10px; width: 100%; - margin-top: 10px; + margin-top: 0; background: #e5e5e5; + display: inline-block; p { max-width: 100%; @@ -89,6 +89,10 @@ ordercycle { font-size: 16px; } } + + @media all and (max-width: 1024px) { + text-align: left; + } } closing { diff --git a/app/views/shopping_shared/tabs/_home.html.haml b/app/views/shopping_shared/tabs/_home.html.haml index 7e6fbe53f6..827ace7283 100644 --- a/app/views/shopping_shared/tabs/_home.html.haml +++ b/app/views/shopping_shared/tabs/_home.html.haml @@ -1,5 +1,5 @@ %script{ type: "text/ng-template", id: "shop/home.html" } - .order-cycle-bar.hide-for-large-up.small-12.columns + .order-cycle-bar.hide-for-large-up = render partial: "shopping_shared/order_cycles" .content diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml index 048315c290..5775e76369 100644 --- a/app/views/shopping_shared/tabs/_shop.html.haml +++ b/app/views/shopping_shared/tabs/_shop.html.haml @@ -1,5 +1,5 @@ %script{ type: "text/ng-template", id: "shop/shop.html" } - .order-cycle-bar.hide-for-large-up.small-12.columns + .order-cycle-bar.hide-for-large-up = render partial: "shopping_shared/order_cycles" .row From a93243a8b709bf475e67cf5eb8c9c899c39f34dd Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 8 Jan 2020 18:13:35 +0100 Subject: [PATCH 04/40] Change vertical position of shop name in relation to logo --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 6ae788a425..3f5d384c3e 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -31,6 +31,8 @@ #distributor_title h3 { margin-top: 0; + padding-top: 0.45em; + @media all and (max-width: 768px) { margin-bottom: 8px; } From a35f3c130e45be0355da9e1b4d2111b8c82af081 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 10 Jan 2020 17:37:28 +0100 Subject: [PATCH 05/40] Recolour shop tab buttons --- .../stylesheets/darkswarm/_shop-navigation.css.scss | 4 +++- app/assets/stylesheets/darkswarm/branding.css.scss | 3 +++ app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 13 ++++--------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 3f5d384c3e..bd72d49c95 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -2,7 +2,7 @@ .darkswarm navigation { display: block; - background: #f7f7f7; + background: $white; distributor.details { box-sizing: border-box; @@ -10,9 +10,11 @@ min-height: 150px; padding: 30px 0 20px 0; position: relative; + select { width: 200px; } + img { display: block; height: 100px; diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss index acf0bf07d8..9b935fbe48 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.scss +++ b/app/assets/stylesheets/darkswarm/branding.css.scss @@ -38,3 +38,6 @@ $light-grey: #ddd; $light-grey-transparency: rgba(0, 0, 0, .1); $black: #000; $white: #fff; + +$primary-blue: #0096ad; +$primary-grey: #666; diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 135178cab8..3ca6b82871 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -6,10 +6,6 @@ .tabset-ctrl#shop-tabs { .tab-buttons { - background: url("/assets/gray_jean.png") top left repeat; - - @include box-shadow(inset 0 2px 3px 0 rgba(0, 0, 0, 0.15)); - color: $dark-grey; .row:first-child { @@ -27,8 +23,7 @@ >a { outline: none; display: block; - background-color: #efefef; - color: #222; + color: $primary-grey; font-family: "Oswald", sans-serif; } @@ -44,7 +39,7 @@ border: none; &:hover, &:focus, &:active { - color: $clr-brick-bright; + color: $primary-blue; } &, &:hover { @@ -58,10 +53,10 @@ } &.selected { - border-bottom: 4px solid $clr-brick; + border-bottom: 4px solid $primary-blue; a { - color: $clr-brick; + color: $primary-blue; } } } From a4b94cf39f3e7efcb601a66f424bfcea7620b133 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sun, 19 Jan 2020 17:56:18 +0100 Subject: [PATCH 06/40] Add dividing line on tabs Shows a thin grey line when the tab view content is white, but doesn't interfere when the content below is a full-width colour image. --- app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 3ca6b82871..8274b1fc52 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -7,6 +7,7 @@ .tab-buttons { color: $dark-grey; + box-shadow: 0 1px 0 $light-grey-transparency; .row:first-child { display: flex; @@ -70,7 +71,7 @@ .content { padding: 1.25em 0; - background-color: $white; + background-color: transparent; img { margin: 0px 0px 0px 40px; From 1927e2883e211ceece6c629d66d6698111273904 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sun, 19 Jan 2020 18:04:25 +0100 Subject: [PATCH 07/40] Move brackets inside conditionals for rendering last closed / next open message --- app/views/shopping_shared/_last_order_cycle.html.haml | 2 ++ app/views/shopping_shared/_next_order_cycle.html.haml | 2 ++ app/views/shopping_shared/tabs/_shop.html.haml | 2 -- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/views/shopping_shared/_last_order_cycle.html.haml b/app/views/shopping_shared/_last_order_cycle.html.haml index ca474fadd6..8bbe9d7411 100644 --- a/app/views/shopping_shared/_last_order_cycle.html.haml +++ b/app/views/shopping_shared/_last_order_cycle.html.haml @@ -1,2 +1,4 @@ - if most_recently_closed = OrderCycle.most_recently_closed_for(@distributor) + ( = t :shopping_oc_last_closed, distance_of_time: distance_of_time_in_words_to_now(most_recently_closed.orders_close_at) + ) diff --git a/app/views/shopping_shared/_next_order_cycle.html.haml b/app/views/shopping_shared/_next_order_cycle.html.haml index 04f63fdcad..668493bab3 100644 --- a/app/views/shopping_shared/_next_order_cycle.html.haml +++ b/app/views/shopping_shared/_next_order_cycle.html.haml @@ -1,2 +1,4 @@ - if next_oc = OrderCycle.first_opening_for(@distributor) + ( = t :shopping_oc_next_open, distance_of_time: distance_of_time_in_words_to_now(next_oc.orders_open_at) + ) diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml index 5775e76369..be547535ca 100644 --- a/app/views/shopping_shared/tabs/_shop.html.haml +++ b/app/views/shopping_shared/tabs/_shop.html.haml @@ -11,10 +11,8 @@ = t :shopping_oc_closed %small %em - ( = render partial: "shopping_shared/next_order_cycle" = render partial: "shopping_shared/last_order_cycle" - ) %p = t :shopping_oc_closed_description From 2e616a9e315c10e2b9cb254a7b89bd38c107ae27 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sun, 19 Jan 2020 18:07:39 +0100 Subject: [PATCH 08/40] Fix conditional display of order cycle selection element --- app/views/shopping_shared/_order_cycles.html.haml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/views/shopping_shared/_order_cycles.html.haml b/app/views/shopping_shared/_order_cycles.html.haml index 6fab77ffe9..402f09a4e6 100644 --- a/app/views/shopping_shared/_order_cycles.html.haml +++ b/app/views/shopping_shared/_order_cycles.html.haml @@ -1,8 +1,7 @@ - content_for :injection_data do = inject_current_order_cycle -%ordercycle{"ng-controller" => "OrderCycleCtrl"} - - - unless no_open_order_cycles? +- unless no_open_order_cycles? + %ordercycle{"ng-controller" => "OrderCycleCtrl"} %form.custom = yield :order_cycle_form From 43cadb00c42b17e410f3fc94a5361f9d1e618343 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sun, 19 Jan 2020 18:16:40 +0100 Subject: [PATCH 09/40] Recolour order cycle selector --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 5 +++-- app/assets/stylesheets/darkswarm/branding.css.scss | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index bd72d49c95..1f0249ac82 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -45,6 +45,8 @@ ordercycle { text-align: right; float: right; + background: $secondary-blue; + color: $white; p { max-width: 400px; @@ -60,7 +62,6 @@ ordercycle { padding: 12px 10px; width: 100%; margin-top: 0; - background: #e5e5e5; display: inline-block; p { @@ -101,7 +102,7 @@ ordercycle { closing { @include headingFont; - color: black; + color: $white; font-size: 1.5em; display: block; padding-bottom: 12px; diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss index 9b935fbe48..c518305a06 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.scss +++ b/app/assets/stylesheets/darkswarm/branding.css.scss @@ -40,4 +40,5 @@ $black: #000; $white: #fff; $primary-blue: #0096ad; +$secondary-blue: #4cb5c5; $primary-grey: #666; From a146bdacc84a05d5dad8b5043cbc9df07d6643bc Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sun, 19 Jan 2020 18:28:06 +0100 Subject: [PATCH 10/40] Realign ordercycle text on tablet downwards --- 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 1f0249ac82..190ca70fe2 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -96,7 +96,7 @@ ordercycle { } @media all and (max-width: 1024px) { - text-align: left; + text-align: center; } } From 6da43850d1846b340ee3658460101c498b839d38 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 20 Jan 2020 13:24:42 +0100 Subject: [PATCH 11/40] Restyle order cycle dropdown --- .../darkswarm/_shop-navigation.css.scss | 47 +++++++++++-------- .../stylesheets/darkswarm/branding.css.scss | 1 + app/views/enterprises/shop.html.haml | 17 ++++--- 3 files changed, 37 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 190ca70fe2..36bdcdc53f 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -72,31 +72,40 @@ ordercycle { form.custom { text-align: right; - & > strong { - line-height: 2.5; - font-size: 1.29em; - padding-right: 14px; + @media all and (max-width: 1024px) { + text-align: center; + } + } + + .order-cycle-select { + border: 1px solid $light-blue; + display: inline-block; + font-size: 1em; + border-radius: 0.5em; + + .select-label { + background-color: $light-blue; + display: inline-block; + border-radius: 0.5em 0 0 0.5em; + float: left; + font-size: 1em; + line-height: 1.5em; + padding: 0.5em 1em; + height: 2.35em; } select { width: inherit; display: inline-block; - border: 1px #999; - color: #666; - font-size: 1em; + color: $white; + background-color: transparent; + border: 0; margin-bottom: 0; - padding: 8px 20px 8px 12px; - - @media all and (max-width: 768px) { - font-size: 0.875em; - } - @media screen and (-webkit-min-device-pixel-ratio: 0) { - font-size: 16px; - } - } - - @media all and (max-width: 1024px) { - text-align: center; + font-size: 1em; + line-height: 1.5em; + padding: 0.5em 1.25em 0.5em 0.75em; + height: 2.35em; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIKICAgdmlld0JveD0iMCAwIDYgMyIKICAgaGVpZ2h0PSIzcHgiCiAgIHdpZHRoPSIyNHB4IgogICB5PSIwcHgiCiAgIHg9IjEycHgiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPjxwb2x5Z29uCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpZD0icG9seWdvbjIiCiAgICAgcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIiAvPjwvc3ZnPg=='); } } diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss index c518305a06..ea9ca0b8f0 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.scss +++ b/app/assets/stylesheets/darkswarm/branding.css.scss @@ -41,4 +41,5 @@ $white: #fff; $primary-blue: #0096ad; $secondary-blue: #4cb5c5; +$light-blue: #78c7d3; $primary-grey: #666; diff --git a/app/views/enterprises/shop.html.haml b/app/views/enterprises/shop.html.haml index 5498ca3d0a..29c185e3e5 100644 --- a/app/views/enterprises/shop.html.haml +++ b/app/views/enterprises/shop.html.haml @@ -23,16 +23,15 @@ = t :enterprises_next_closing %strong {{ OrderCycle.orders_close_at() | date_in_words }} - %span - = t :enterprises_ready_for + .order-cycle-select + .select-label + = t :enterprises_ready_for - / Will this label should be a variable to reflect 'Ready for pickup / delivery' as appropriate - - %select.avenir#order_cycle_id{"ng-model" => "order_cycle.order_cycle_id", - "ofn-change-order-cycle" => true, - "disabled" => require_customer?, - "ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}", - "popover-placement" => "left", "popover" => t(:enterprises_choose), "popover-trigger" => "openTrigger"} + %select.select2.avenir#order_cycle_id{"ng-model" => "order_cycle.order_cycle_id", + "ofn-change-order-cycle" => true, + "disabled" => require_customer?, + "ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}", + "popover-placement" => "left", "popover" => t(:enterprises_choose), "popover-trigger" => "openTrigger"} From 390d80f0ebdd37901cf198960d0a0e38e75f1752 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 20 Jan 2020 14:12:23 +0100 Subject: [PATCH 12/40] Update order cycle selector positioning --- .../darkswarm/_shop-navigation.css.scss | 43 ++++++++++++++----- .../stylesheets/darkswarm/shop_tabs.css.scss | 4 ++ app/views/shopping_shared/_tabs.html.haml | 7 +-- 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index 36bdcdc53f..a9db959a5b 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -43,10 +43,15 @@ } ordercycle { - text-align: right; float: right; background: $secondary-blue; color: $white; + width: 100%; + border-radius: 0.75em 0.75em 0 0; + position: absolute; + right: 1em; + padding: 1.65em 0 2.5em; + margin-top: 1em; p { max-width: 400px; @@ -57,24 +62,26 @@ ordercycle { } @media all and (max-width: 1024px) { - text-align: left; float: none; - padding: 12px 10px; + padding: 0.5em 1em; width: 100%; margin-top: 0; display: inline-block; + border-radius: 0; + position: relative; + right: 0; p { max-width: 100%; } } - form.custom { - text-align: right; + @media all and (max-width: 768px) { + padding: 0.5em 1em 0.75em; + } - @media all and (max-width: 1024px) { - text-align: center; - } + form.custom { + text-align: center; } .order-cycle-select { @@ -107,6 +114,14 @@ ordercycle { height: 2.35em; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIKICAgdmlld0JveD0iMCAwIDYgMyIKICAgaGVpZ2h0PSIzcHgiCiAgIHdpZHRoPSIyNHB4IgogICB5PSIwcHgiCiAgIHg9IjEycHgiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPjxwb2x5Z29uCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpZD0icG9seWdvbjIiCiAgICAgcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIiAvPjwvc3ZnPg=='); } + + @media all and (max-width: 1024px) { + float: right; + } + + @media all and (max-width: 768px) { + float: none; + } } closing { @@ -114,11 +129,17 @@ ordercycle { color: $white; font-size: 1.5em; display: block; - padding-bottom: 12px; + padding: 0 0 12px; + + @media all and (max-width: 1024px) { + float: left; + padding: 0.2em 0 0; + font-size: 1.2em; + } @media all and (max-width: 768px) { - font-size: 1.2em; - padding-bottom: 10px; + float: none; + padding: 0 0 10px; } span { diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 8274b1fc52..32ab7ffd19 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -13,6 +13,10 @@ display: flex; justify-content: space-between; } + + .columns { + display: flex; + } } .tab { diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml index 8e07d4b993..434c5070a2 100644 --- a/app/views/shopping_shared/_tabs.html.haml +++ b/app/views/shopping_shared/_tabs.html.haml @@ -6,8 +6,9 @@ .tabset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } } .tab-buttons .row - - shop_tabs.each do |tab| - .tab{ id: "tab_#{tab[:name]}", name: tab[:name] } - %a{ href: 'javascript:void(0)' }=tab[:title] + .columns.small-12.large-8 + - shop_tabs.each do |tab| + .tab{ id: "tab_#{tab[:name]}", name: tab[:name] } + %a{ href: 'javascript:void(0)' }=tab[:title] .tab-view From 5becbc2a119f839740b4711fb6f088cc4fb8a3ae Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 22 Jan 2020 12:26:03 +0100 Subject: [PATCH 13/40] Move caret svg to `/app/assets/images` --- app/assets/images/white-caret.svg | 23 +++++++++++++++++++ .../darkswarm/_shop-navigation.css.scss | 2 +- 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 app/assets/images/white-caret.svg diff --git a/app/assets/images/white-caret.svg b/app/assets/images/white-caret.svg new file mode 100644 index 0000000000..eed771fc14 --- /dev/null +++ b/app/assets/images/white-caret.svg @@ -0,0 +1,23 @@ + +image/svg+xml \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index a9db959a5b..caf45920e2 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -112,7 +112,7 @@ ordercycle { line-height: 1.5em; padding: 0.5em 1.25em 0.5em 0.75em; height: 2.35em; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIKICAgdmlld0JveD0iMCAwIDYgMyIKICAgaGVpZ2h0PSIzcHgiCiAgIHdpZHRoPSIyNHB4IgogICB5PSIwcHgiCiAgIHg9IjEycHgiCiAgIHZlcnNpb249IjEuMSI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTAiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM4IiAvPjxwb2x5Z29uCiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpZD0icG9seWdvbjIiCiAgICAgcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIiAvPjwvc3ZnPg=='); + background-image: url('/assets/white-caret.svg'); } @media all and (max-width: 1024px) { From 35133f7ee82a4c4e0b46fccb24e629aa191e9570 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 22 Jan 2020 12:43:24 +0100 Subject: [PATCH 14/40] Adjust height of ordercycle selector on desktop --- app/assets/stylesheets/darkswarm/_shop-navigation.css.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss index caf45920e2..e8dcbab63a 100644 --- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss +++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss @@ -50,8 +50,9 @@ ordercycle { border-radius: 0.75em 0.75em 0 0; position: absolute; right: 1em; - padding: 1.65em 0 2.5em; + padding: 1.65em 0; margin-top: 1em; + height: 9.6em; p { max-width: 400px; @@ -70,6 +71,7 @@ ordercycle { border-radius: 0; position: relative; right: 0; + height: auto; p { max-width: 100%; From 5ce5072f26f3556612b1b72ab5b81805d15f9e3b Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 22 Jan 2020 12:44:32 +0100 Subject: [PATCH 15/40] Adjust position of OC popover tip to not cover up the "ready for" label --- app/views/enterprises/shop.html.haml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/views/enterprises/shop.html.haml b/app/views/enterprises/shop.html.haml index 29c185e3e5..9a8b030711 100644 --- a/app/views/enterprises/shop.html.haml +++ b/app/views/enterprises/shop.html.haml @@ -23,15 +23,14 @@ = t :enterprises_next_closing %strong {{ OrderCycle.orders_close_at() | date_in_words }} - .order-cycle-select + .order-cycle-select{"popover-placement" => "left", "popover" => t(:enterprises_choose), "popover-trigger" => "openTrigger"} .select-label = t :enterprises_ready_for %select.select2.avenir#order_cycle_id{"ng-model" => "order_cycle.order_cycle_id", "ofn-change-order-cycle" => true, "disabled" => require_customer?, - "ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}", - "popover-placement" => "left", "popover" => t(:enterprises_choose), "popover-trigger" => "openTrigger"} + "ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}"} From 15360740b147d44d0b1c9f5d34c51c7835591e39 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 22 Jan 2020 12:49:55 +0100 Subject: [PATCH 16/40] Add ng-cloak to ordercycle box to improve appearance whilst page loads --- app/views/shopping_shared/_order_cycles.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shopping_shared/_order_cycles.html.haml b/app/views/shopping_shared/_order_cycles.html.haml index 402f09a4e6..5c001f1301 100644 --- a/app/views/shopping_shared/_order_cycles.html.haml +++ b/app/views/shopping_shared/_order_cycles.html.haml @@ -2,6 +2,6 @@ = inject_current_order_cycle - unless no_open_order_cycles? - %ordercycle{"ng-controller" => "OrderCycleCtrl"} + %ordercycle{"ng-controller" => "OrderCycleCtrl", "ng-cloak" => true} %form.custom = yield :order_cycle_form From 45cf54408dfe542a1343151085715a048aec9e4c Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 28 Jan 2020 15:57:18 +0100 Subject: [PATCH 17/40] Readjust layout after rebase --- app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 32ab7ffd19..b75be43f4b 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -9,11 +9,6 @@ color: $dark-grey; box-shadow: 0 1px 0 $light-grey-transparency; - .row:first-child { - display: flex; - justify-content: space-between; - } - .columns { display: flex; } From bd7549c57fac5bebcf3be127b4a996692df108aa Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 20 Jan 2020 15:45:40 +0100 Subject: [PATCH 18/40] Update layout for producers and groups tabs --- app/views/shopping_shared/tabs/_groups.html.haml | 4 ++-- app/views/shopping_shared/tabs/_producers.html.haml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shopping_shared/tabs/_groups.html.haml b/app/views/shopping_shared/tabs/_groups.html.haml index 9846fd5e3a..59026e1718 100644 --- a/app/views/shopping_shared/tabs/_groups.html.haml +++ b/app/views/shopping_shared/tabs/_groups.html.haml @@ -1,12 +1,12 @@ %script{ type: "text/ng-template", id: "shop/groups.html" } .content .row - .small-12.large-4.columns + .small-12.columns - if current_distributor.groups.length > 0 %h5 =current_distributor.name = t :shopping_groups_part_of - %ul.bullet-list + %ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3 - for group in current_distributor.groups %li %a{href: main_app.groups_path + "/#{group.permalink}"} diff --git a/app/views/shopping_shared/tabs/_producers.html.haml b/app/views/shopping_shared/tabs/_producers.html.haml index e80b681eb9..1a982851d1 100644 --- a/app/views/shopping_shared/tabs/_producers.html.haml +++ b/app/views/shopping_shared/tabs/_producers.html.haml @@ -4,7 +4,7 @@ .small-12.columns %h5 = t :shopping_producers_of_hub, hub: '{{ shopfront.name }}' - %ul.small-block-grid-2.large-block-grid-4 + %ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3 %li{"ng-repeat" => "enterprise in shopfront.producers"} %enterprise-modal %i.ofn-i_036-producers From efd314e3b1db39e247e8b569e62972acc4b70d31 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 20 Jan 2020 16:00:02 +0100 Subject: [PATCH 19/40] Restyle contact tab --- app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 7 +------ app/views/shopping_shared/tabs/_contact.html.haml | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index b75be43f4b..3e99a3814b 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -95,13 +95,8 @@ .header { text-align: center; - text-transform: uppercase; - color: $dark-grey; - border-bottom: 1px solid $disabled-dark; + color: $med-grey; margin-top: 0.75rem; - margin-bottom: 0.75rem; - padding-bottom: 0.25rem; - font-size: 0.875rem; } } } diff --git a/app/views/shopping_shared/tabs/_contact.html.haml b/app/views/shopping_shared/tabs/_contact.html.haml index 2091779f09..104ca1f33b 100644 --- a/app/views/shopping_shared/tabs/_contact.html.haml +++ b/app/views/shopping_shared/tabs/_contact.html.haml @@ -6,7 +6,7 @@ %div.center .header = t :shopping_contact_address - %strong=current_distributor.name + %span= current_distributor.name %p = current_distributor.address.address1 - unless current_distributor.address.address2.blank? From 0893d14025dc115c0092dcbd101949bce590f4f2 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 5 Feb 2020 13:56:46 +0100 Subject: [PATCH 20/40] Add new shop link colours --- app/assets/stylesheets/darkswarm/branding.css.scss | 4 ++++ app/assets/stylesheets/darkswarm/shop_tabs.css.scss | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss index ea9ca0b8f0..bb0e1df158 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.scss +++ b/app/assets/stylesheets/darkswarm/branding.css.scss @@ -43,3 +43,7 @@ $primary-blue: #0096ad; $secondary-blue: #4cb5c5; $light-blue: #78c7d3; $primary-grey: #666; + +$orange-400: #ff9466; +$orange-500: #f27052; +$orange-600: #d7583a; diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss index 3e99a3814b..c3b8c164bb 100644 --- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss +++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss @@ -72,6 +72,14 @@ padding: 1.25em 0; background-color: transparent; + a { + color: $orange-500; + + &:hover { + color: $orange-600; + } + } + img { margin: 0px 0px 0px 40px; } From 26688409a1cbd0ec4df6ce1544506d8acb5775a9 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 5 Feb 2020 14:07:29 +0100 Subject: [PATCH 21/40] Use alternate dots in