From 85abfd2056ed33bf8f3bf44279ac4fdf430818a2 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 10:52:13 +0200 Subject: [PATCH 01/43] Create Cart sidebar and controller --- .../cart_dropdown_controller.js.coffee | 5 + .../stylesheets/darkswarm/shop.css.scss | 400 +++++++++--------- app/views/shared/menu/_cart_sidebar.html.haml | 8 + app/views/shared/menu/_menu.html.haml | 10 +- app/views/shared/menu/_mobile_menu.html.haml | 4 +- 5 files changed, 220 insertions(+), 207 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee create mode 100644 app/views/shared/menu/_cart_sidebar.html.haml diff --git a/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee new file mode 100644 index 0000000000..9606db1168 --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee @@ -0,0 +1,5 @@ +Darkswarm.controller "CartDropdownCtrl", ($scope) -> + $scope.showCartSidebar = false + + $scope.toggleCartSidebar = -> + $scope.showCartSidebar = !$scope.showCartSidebar diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 0c46523184..885536208c 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -16,243 +16,241 @@ $sidebar-medium-width: 65%; $sidebar-large-width: 45%; $sidebar-footer-height: 5em; -.darkswarm { - .shop-filters-sidebar { - display: flex; - flex-direction: column; +.shop-filters-sidebar, .cart-sidebar { + display: flex; + flex-direction: column; + height: 100%; + + .background { + position: fixed; + top: 0; + right: 0; + z-index: 200; height: 100%; + width: 100%; + background-color: $shop-sidebar-overlay; + opacity: 0; + transition: opacity $transition-sidebar; + } + &.shown { .background { - position: fixed; - top: 0; - right: 0; - z-index: 200; - height: 100%; - width: 100%; - background-color: $shop-sidebar-overlay; - opacity: 0; - transition: opacity $transition-sidebar; + opacity: 1; } - &.shown { - .background { - opacity: 1; - } - - .sidebar, .sidebar-footer { - margin-right: 0; - } - } - - .sidebar { - position: fixed; - top: 0; - right: 0; - z-index: 210; - height: 100%; - width: $sidebar-large-width; - margin-right: -$sidebar-large-width; - background-color: rgba($white, 0.95); - padding: 1em; - transition: margin $transition-sidebar; - overflow-y: scroll; - - .property-selectors { - margin-bottom: $sidebar-footer-height + 2em; - } - } - - .sidebar-footer { - background-color: $grey-800; - width: $sidebar-large-width; - margin-right: -$sidebar-large-width; - height: $sidebar-footer-height; - position: fixed; - bottom: 0; - right: 0; - transition: margin $transition-sidebar; - padding: 1em; - - button { - width: 48%; - } - } - - @include breakpoint(tablet) { - .sidebar, .sidebar-footer { - width: $sidebar-medium-width; - margin-right: -$sidebar-medium-width; - } - } - - @include breakpoint(mobile) { - .sidebar, .sidebar-footer { - width: $sidebar-small-width; - margin-right: -$sidebar-small-width; - } + .sidebar, .sidebar-footer { + margin-right: 0; } } - products { + .sidebar { + position: fixed; + top: 0; + right: 0; + z-index: 210; + height: 100%; + width: $sidebar-large-width; + margin-right: -$sidebar-large-width; + background-color: rgba($white, 0.95); + padding: 1em; + transition: margin $transition-sidebar; + overflow-y: scroll; + + .property-selectors { + margin-bottom: $sidebar-footer-height + 2em; + } + } + + .sidebar-footer { + background-color: $grey-800; + width: $sidebar-large-width; + margin-right: -$sidebar-large-width; + height: $sidebar-footer-height; + position: fixed; + bottom: 0; + right: 0; + transition: margin $transition-sidebar; + padding: 1em; + + button { + width: 48%; + } + } + + @include breakpoint(tablet) { + .sidebar, .sidebar-footer { + width: $sidebar-medium-width; + margin-right: -$sidebar-medium-width; + } + } + + @include breakpoint(mobile) { + .sidebar, .sidebar-footer { + width: $sidebar-small-width; + margin-right: -$sidebar-small-width; + } + } +} + +products { + display: block; + + @include breakpoint(tablet) { + input.button.right { + float: left; + } + } + + @include breakpoint(mobile) { + .add_to_cart { + margin-top: 2rem; + } + } + + form { + input.small.button.primary.right.add_to_cart { + &.dirty { + padding-left: 3.2rem; + } + } + + i.cart-spinner { + position: absolute; + top: 14px; + right: 146px; + color: white; + font-size: 1.2em; + + // Necessary to be below Z index of cart popover: + z-index: 98; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; + } + } + + product { + @include csstrans; + + border-bottom: 1px solid #e5e5e5; + border-top: 1px solid #e5e5e5; + padding-bottom: 1px; + margin-bottom: 20px !important; + position: relative; display: block; + color: $med-drk-grey; - @include breakpoint(tablet) { - input.button.right { - float: left; + &:hover, &:focus, &:active { + border-bottom: 1px solid $clr-brick-med-bright; + border-top: 1px solid $clr-brick-med-bright; + } + + // BULK + .bulk-buy { + font-size: 0.875rem; + + @include breakpoint(tablet) { + font-size: 0.75rem; } } - @include breakpoint(mobile) { - .add_to_cart { - margin-top: 2rem; + .bulk-buy, .bulk-buy i { + color: #888; + } + + .inline { + display: inline; + } + + .spinner { + width: 100px; + margin-bottom: 20px; + } + + // ICONS + i { + font-size: 0.75em; + padding-right: 0.9375rem; + + @include breakpoint(phablet) { + padding-right: 0.25rem; } } - form { - input.small.button.primary.right.add_to_cart { - &.dirty { - padding-left: 3.2rem; - } - } - - i.cart-spinner { - position: absolute; - top: 14px; - right: 146px; - color: white; - font-size: 1.2em; - - // Necessary to be below Z index of cart popover: - z-index: 98; - -webkit-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; - } + i.ofn-i_056-bulk { + font-size: 1rem; + padding-right: 0rem; } - product { - @include csstrans; - - border-bottom: 1px solid #e5e5e5; - border-top: 1px solid #e5e5e5; - padding-bottom: 1px; - margin-bottom: 20px !important; - position: relative; - display: block; - color: $med-drk-grey; - - &:hover, &:focus, &:active { - border-bottom: 1px solid $clr-brick-med-bright; - border-top: 1px solid $clr-brick-med-bright; - } - - // BULK - .bulk-buy { - font-size: 0.875rem; - - @include breakpoint(tablet) { - font-size: 0.75rem; - } - } - - .bulk-buy, .bulk-buy i { - color: #888; - } - - .inline { - display: inline; - } - - .spinner { - width: 100px; - margin-bottom: 20px; - } - - // ICONS - i { - font-size: 0.75em; - padding-right: 0.9375rem; - - @include breakpoint(phablet) { - padding-right: 0.25rem; - } - } - - i.ofn-i_056-bulk { - font-size: 1rem; - padding-right: 0rem; - } - - i.ofn-i_036-producers { - padding-left: 0.2rem; - padding-right: 0rem; - font-size: 0.8rem; - } + i.ofn-i_036-producers { + padding-left: 0.2rem; + padding-right: 0rem; + font-size: 0.8rem; } } +} - .alert-box.changeable-orders-alert { - margin-bottom: 0px; +.alert-box.changeable-orders-alert { + margin-bottom: 0px; +} + +.select-oc-message { + margin-top: 1rem; + + .highlighted { + color: $red-700; + font-weight: bold; } +} - .select-oc-message { - margin-top: 1rem; +.open-shop-message { + a { + color: #0096ad; - .highlighted { - color: $red-700; - font-weight: bold; + &:hover, &:focus, &:active { + text-decoration: none; + color: #4aadbd; } } +} - .open-shop-message { - a { - color: #0096ad; +.closed-shop-header { + background-color: $grey-650; + color: $white; - &:hover, &:focus, &:active { - text-decoration: none; - color: #4aadbd; - } - } - } - - .closed-shop-header { - background-color: $grey-650; + h4 { color: $white; - - h4 { - color: $white; - } - - p { - margin: 1rem 0 0.4rem; - } - - .message { - display: inline-block; - } } + p { + margin: 1rem 0 0.4rem; + } + + .message { + display: inline-block; + } +} + .warning-sign { margin: 0 10px 0 5px; display: inline-block; line-height: 1.9rem; - strong { - color: $grey-650; - display: block; - position: relative; - text-align: center; - width: 23px; - } + strong { + color: $grey-650; + display: block; + position: relative; + text-align: center; + width: 23px; + } - .rectangle { - background-color: $white; - border-radius: 4px; - color: $grey-650; - height: 23px; - position: absolute; - top: 27px; - transform: rotate(-315deg); - width: 23px; - } + .rectangle { + background-color: $white; + border-radius: 4px; + color: $grey-650; + height: 23px; + position: absolute; + top: 27px; + transform: rotate(-315deg); + width: 23px; } } diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml new file mode 100644 index 0000000000..56624a8ed9 --- /dev/null +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -0,0 +1,8 @@ +.cart-sidebar{ng: {show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}} + .background{ng: {click: 'toggleCartSidebar()'}} + .sidebar + .sidebar-footer + %button.large.dark.left{type: 'button'} + Edit Cart + %button.large.bright.right{type: 'button', ng: {click: 'toggleCartSidebar()'}} + Checkout diff --git a/app/views/shared/menu/_menu.html.haml b/app/views/shared/menu/_menu.html.haml index 050a3f043e..4559434a8f 100644 --- a/app/views/shared/menu/_menu.html.haml +++ b/app/views/shared/menu/_menu.html.haml @@ -1,4 +1,6 @@ -= render "shared/menu/large_menu" -%ofn-flash -= render "shared/menu/mobile_menu" -= render "shared/menu/offcanvas_menu" +%div{'ng-controller' => 'CartDropdownCtrl'} + = render "shared/menu/large_menu" + %ofn-flash + = render "shared/menu/mobile_menu" + = render "shared/menu/offcanvas_menu" + = render "shared/menu/cart_sidebar" diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index 8ef5ef7b5d..d13dbeae07 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -9,8 +9,8 @@ %img{src: ContentConfig.logo_mobile.url, srcset: ContentConfig.logo_mobile_svg.url, width: "75", height: "26"} %section.right{"ng-cloak" => true} - %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"} - %a.icon{href: main_app.cart_path} + %span.cart-span{"ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"} + %a.icon{ng: {click: 'toggleCartSidebar()'}} %span = t '.cart' %span.count From b1ce7f2c155aaea840b4bb58a48837b1b2ad225c Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:45:31 +0200 Subject: [PATCH 02/43] Simplify product naming in cart --- app/assets/javascripts/darkswarm/services/variants.js.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/darkswarm/services/variants.js.coffee b/app/assets/javascripts/darkswarm/services/variants.js.coffee index 456fd00f01..a650db5cd7 100644 --- a/app/assets/javascripts/darkswarm/services/variants.js.coffee +++ b/app/assets/javascripts/darkswarm/services/variants.js.coffee @@ -20,7 +20,6 @@ Darkswarm.factory 'Variants', -> name = variant.product_name else name = "#{variant.product_name} - #{variant.name_to_display}" - name += " (#{variant.options_text})" if variant.options_text name lineItemFor: (variant) -> From a8b981e9cd830a4bb705f2282f4fc899effdf7dc Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:46:03 +0200 Subject: [PATCH 03/43] Add product thumbnais to serializer for cart dropdown images --- app/serializers/api/variant_serializer.rb | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/serializers/api/variant_serializer.rb b/app/serializers/api/variant_serializer.rb index e824db8406..e60ec2832d 100644 --- a/app/serializers/api/variant_serializer.rb +++ b/app/serializers/api/variant_serializer.rb @@ -3,7 +3,7 @@ class Api::VariantSerializer < ActiveModel::Serializer :options_text, :unit_value, :unit_description, :unit_to_display, :display_as, :display_name, :name_to_display, :price, :on_demand, :on_hand, :fees, :price_with_fees, - :tag_list + :tag_list, :thumb_url delegate :price, to: :object @@ -30,4 +30,12 @@ class Api::VariantSerializer < ActiveModel::Serializer object.tag_list end + + def thumb_url + if object.images.present? + object.images.first.attachment.url(:mini) + else + "/assets/noimage/mini.png" + end + end end From b4e5542e5fa274e39adf553ee4105a60bfb471f5 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:46:58 +0200 Subject: [PATCH 04/43] Extract re-usable sidebar styes --- .../darkswarm/expanding-sidebar.css.scss | 75 +++++++++++++++++ .../stylesheets/darkswarm/shop.css.scss | 81 +------------------ .../stylesheets/darkswarm/variables.css.scss | 5 ++ app/views/shop/products/_form.html.haml | 2 +- 4 files changed, 84 insertions(+), 79 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss new file mode 100644 index 0000000000..07874ef5c3 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss @@ -0,0 +1,75 @@ +@import "mixins"; +@import "variables"; +@import "branding"; + +.expanding-sidebar { + display: flex; + flex-direction: column; + height: 100%; + + .background { + position: fixed; + top: 0; + right: 0; + z-index: 200; + height: 100%; + width: 100%; + background-color: $shop-sidebar-overlay; + opacity: 0; + transition: opacity $transition-sidebar; + } + + &.shown { + .background { + opacity: 1; + } + + .sidebar, .sidebar-footer { + margin-right: 0; + } + } + + .sidebar { + position: fixed; + top: 0; + right: 0; + z-index: 210; + height: 100%; + width: $sidebar-large-width; + margin-right: -$sidebar-large-width; + background-color: rgba($white, 0.95); + padding: 1em; + transition: margin $transition-sidebar; + overflow-y: scroll; + } + + .sidebar-footer { + background-color: $grey-800; + width: $sidebar-large-width; + margin-right: -$sidebar-large-width; + min-height: $sidebar-footer-height; + position: fixed; + bottom: 0; + right: 0; + transition: margin $transition-sidebar; + padding: 1em; + + button { + width: 48%; + } + } + + @include breakpoint(tablet) { + .sidebar, .sidebar-footer { + width: $sidebar-medium-width; + margin-right: -$sidebar-medium-width; + } + } + + @include breakpoint(mobile) { + .sidebar, .sidebar-footer { + width: $sidebar-small-width; + margin-right: -$sidebar-small-width; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 885536208c..367d414d2b 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -11,84 +11,9 @@ @import "shop-taxon-flag"; @import "shop-popovers"; -$sidebar-small-width: 75%; -$sidebar-medium-width: 65%; -$sidebar-large-width: 45%; -$sidebar-footer-height: 5em; - -.shop-filters-sidebar, .cart-sidebar { - display: flex; - flex-direction: column; - height: 100%; - - .background { - position: fixed; - top: 0; - right: 0; - z-index: 200; - height: 100%; - width: 100%; - background-color: $shop-sidebar-overlay; - opacity: 0; - transition: opacity $transition-sidebar; - } - - &.shown { - .background { - opacity: 1; - } - - .sidebar, .sidebar-footer { - margin-right: 0; - } - } - - .sidebar { - position: fixed; - top: 0; - right: 0; - z-index: 210; - height: 100%; - width: $sidebar-large-width; - margin-right: -$sidebar-large-width; - background-color: rgba($white, 0.95); - padding: 1em; - transition: margin $transition-sidebar; - overflow-y: scroll; - - .property-selectors { - margin-bottom: $sidebar-footer-height + 2em; - } - } - - .sidebar-footer { - background-color: $grey-800; - width: $sidebar-large-width; - margin-right: -$sidebar-large-width; - height: $sidebar-footer-height; - position: fixed; - bottom: 0; - right: 0; - transition: margin $transition-sidebar; - padding: 1em; - - button { - width: 48%; - } - } - - @include breakpoint(tablet) { - .sidebar, .sidebar-footer { - width: $sidebar-medium-width; - margin-right: -$sidebar-medium-width; - } - } - - @include breakpoint(mobile) { - .sidebar, .sidebar-footer { - width: $sidebar-small-width; - margin-right: -$sidebar-small-width; - } +.shop-filters-sidebar { + .property-selectors { + margin-bottom: $sidebar-footer-height + 2em; } } diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss index 115212fc76..08930efd76 100644 --- a/app/assets/stylesheets/darkswarm/variables.css.scss +++ b/app/assets/stylesheets/darkswarm/variables.css.scss @@ -33,6 +33,11 @@ $topbar-dropdown-link-bg-hover: $white; $mobile-nav-height: 2.8em; +$sidebar-small-width: 75%; +$sidebar-medium-width: 65%; +$sidebar-large-width: 45%; +$sidebar-footer-height: 5em; + $radius-small: 0.25em; $radius-medium: 0.5em; diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml index 7d2718c2d5..ffbc7bdf25 100644 --- a/app/views/shop/products/_form.html.haml +++ b/app/views/shop/products/_form.html.haml @@ -31,7 +31,7 @@ = render partial: "shop/products/filters" - .shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}} + .expanding-sidebar.shop-filters-sidebar.hide-for-large-up{ng: {show: 'showFilterSidebar', class: "{'shown': showFilterSidebar}"}} .background{ng: {click: 'toggleFilterSidebar()'}} .sidebar %h5 From 400fce8ef9a29bb299264424045e9609f26355d5 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:50:17 +0200 Subject: [PATCH 05/43] Separate cart page and cart dropdown styles --- .../stylesheets/darkswarm/cart-page.css.scss | 71 +++++++++ .../darkswarm/shopping-cart.css.scss | 140 ------------------ 2 files changed, 71 insertions(+), 140 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/cart-page.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/shopping-cart.css.scss diff --git a/app/assets/stylesheets/darkswarm/cart-page.css.scss b/app/assets/stylesheets/darkswarm/cart-page.css.scss new file mode 100644 index 0000000000..9c0d76e11e --- /dev/null +++ b/app/assets/stylesheets/darkswarm/cart-page.css.scss @@ -0,0 +1,71 @@ +@import "mixins"; +@import "branding"; +@import "compass/css3/user-interface"; +@import "variables"; + +#update-cart { + #errorExplanation { + display: none; + } +} + +#cart-detail { + .cart-item-delete, .bought-item-delete { + a { + font-size: 1.125em; + } + } + + .out-of-stock { + color: $clr-brick; + } + + button, .button { + margin: 0; + } + + .toggle-bought { + cursor: pointer; + } + + tr.bought td { + color: $med-grey; + + h5 { + color: $med-grey; + } + + .already-confirmed { + float: right; + } + } + + input { + &.ng-invalid-stock, &.ng-invalid-number { + border: 1px solid $clr-brick; + } + } +} + +.item-thumb-image { + display: none; + + @media screen and (min-width: 640px) { + display: inline-block; + float: left; + padding-right: 0.5em; + width: 36px; + height: 36px; + } +} + +.links { + .button { + padding: 1.125rem 0 1.1875rem; + width: 210px; + + @media all and (max-width: 480px) { + width: 100%; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/shopping-cart.css.scss b/app/assets/stylesheets/darkswarm/shopping-cart.css.scss deleted file mode 100644 index d00f3915e7..0000000000 --- a/app/assets/stylesheets/darkswarm/shopping-cart.css.scss +++ /dev/null @@ -1,140 +0,0 @@ -@import "mixins"; -@import "branding"; -@import "compass/css3/user-interface"; -@import 'variables'; - -.cart { - @include user-select(none); - - .cart-span, .cart-span a { - display: inline-block; - } - - .cart-span { - float: left; - } - - .joyride-tip-guide { - display: block; - right: 0; - top: $topbar-height; - width: 480px; - - @media screen and (min-width: 641px) { - overflow-y: auto; - max-height: calc(95vh - 55px); - } - - @media screen and (max-width: 640px) { - width: 96%; - } - - .joyride-nub { - right: 22px !important; - left: auto; - } - - table { - width: 100%; - border: none; - border-spacing: 0px; - margin-bottom: 5px; - - tr.total-cart { - color: #fff; - background-color: #424242; - - td { - color: #fff; - } - } - - tr.product-cart { - background-color: #333333; - border-top: 1px solid #424242; - - td { - padding: 4px 12px; - color: #fff; - } - } - } - - .buttons { - margin-bottom: 0.1em; - - .button { - height: auto; - top: 0px; - } - } - } -} - -// Shopping cart -#update-cart { - #errorExplanation { - display: none; - } -} - -#cart-detail { - .cart-item-delete, .bought-item-delete { - a { - font-size: 1.125em; - } - } - - .out-of-stock { - color: $clr-brick; - } - - button, .button { - margin: 0; - } - - .toggle-bought { - cursor: pointer; - } - - tr.bought td { - color: $med-grey; - - h5 { - color: $med-grey; - } - - .already-confirmed { - float: right; - } - } - - input { - &.ng-invalid-stock, &.ng-invalid-number { - border: 1px solid $clr-brick; - } - } -} - -.item-thumb-image { - display: none; - - @media screen and (min-width: 640px) { - display: inline-block; - float: left; - padding-right: 0.5em; - width: 36px; - height: 36px; - } -} - -.links { - .button { - padding: 1.125rem 0 1.1875rem; - width: 210px; - - @media all and (max-width: 480px) { - width: 100%; - } - } -} From 33a2dd100ebdf5356add6d35a38366fe17298694 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:51:00 +0200 Subject: [PATCH 06/43] Add new layout for cart sidebar --- .../darkswarm/cart-dropdown.css.scss | 77 +++++++++++++++++++ app/views/shared/menu/_cart.html.haml | 4 +- app/views/shared/menu/_cart_sidebar.html.haml | 36 +++++++-- 3 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/cart-dropdown.css.scss diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss new file mode 100644 index 0000000000..5b7f21b7ea --- /dev/null +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -0,0 +1,77 @@ +@import "mixins"; +@import "variables"; +@import "branding"; + +.expanding-sidebar.cart-sidebar { + .sidebar { + padding: 0; + background-color: $white; + } + + .cart-header { + padding: 1em; + border-bottom: 1px solid $grey-100; + + .title { + color: $grey-800; + margin: 0; + } + + .close { + color: $grey-500; + float: right; + + i { + vertical-align: middle; + } + } + } + + .cart-content { + margin-bottom: $sidebar-footer-height + 2em; + } + + table { + width: 100%; + border: none; + border-spacing: 0; + margin: 0; + + tr.product-cart { + background-color: white; + + td { + border-bottom: 1px solid $grey-100; + padding: 0.75em 1em 0.5em 1em; + vertical-align: top; + + &.image { + width: 42px; + padding: 0.5em 0 0.5em 1em; + } + + span { + color: $grey-800; + font-size: 16px; + line-height: 1.25; + } + + img { + max-width: 56px; + max-height: 56px; + } + + .options-text { + color: $grey-500; + font-size: 14px; + } + } + } + } + + .cart-total { + color: $white; + text-align: center; + margin: -0.5em 0 0.75em 0; + } +} diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml index d6408dc634..1fd1b06e89 100644 --- a/app/views/shared/menu/_cart.html.haml +++ b/app/views/shared/menu/_cart.html.haml @@ -1,10 +1,8 @@ %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"} - %a#cart.icon{"cart-toggle" => true} + %a#cart.icon{"ng-click" => "toggleCartSidebar()"} %span = t '.cart' %span.count %img{ src: image_path("menu/icn-cart.svg") } %span {{ Cart.total_item_count() }} - - = render 'shared/menu/joyride' diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 56624a8ed9..a5aaf2dec1 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -1,8 +1,34 @@ -.cart-sidebar{ng: {show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}} +.expanding-sidebar.cart-sidebar{ng: {controller: 'CartCtrl', show: 'showCartSidebar', class: "{'shown': showCartSidebar, 'hidden': !showCartSidebar}"}} .background{ng: {click: 'toggleCartSidebar()'}} .sidebar + .cart-header + %span.title + 5 items in your cart + %span.close + Close + %i.ofn-i_009-close + .cart-content + %table + %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"} + %td.image + %img{'ng-src' => '{{ line_item.variant.thumb_url }}'} + %td + %span {{ line_item.variant.extended_name }} + %br + %span.options-text {{ line_item.variant.options_text }} + %td.text-right + %span.quantity {{ line_item.quantity }} + %td + %span.total-price.right {{ line_item.total_price | localizeCurrency }} + .sidebar-footer - %button.large.dark.left{type: 'button'} - Edit Cart - %button.large.bright.right{type: 'button', ng: {click: 'toggleCartSidebar()'}} - Checkout + %p.cart-total{"ng-show" => "Cart.line_items.length > 0"} + %strong + = t 'total' + \: + {{ Cart.total() | localizeCurrency }} + + %button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} + = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}" + %button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} + = t '.checkout' From be8c0f360052b410bdd236c3afe54adaa0e752da Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 17:51:31 +0200 Subject: [PATCH 07/43] Remove old cart dropdown view and directive --- .../directives/cart_toggle.js.coffee | 19 ------ app/views/shared/menu/_joyride.html.haml | 63 ------------------- 2 files changed, 82 deletions(-) delete mode 100644 app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee delete mode 100644 app/views/shared/menu/_joyride.html.haml diff --git a/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee b/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee deleted file mode 100644 index cb7e574d87..0000000000 --- a/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee +++ /dev/null @@ -1,19 +0,0 @@ -Darkswarm.directive "cartToggle", ($document) -> - # Toggles visibility of the "cart" popover - restrict: 'A' - link: (scope, elem, attr)-> - scope.open = false - - $document.bind 'click', (event) -> - cart_button = elem[0] - element_and_parents = [event.target, event.target.parentElement, event.target.parentElement.parentElement] - cart_button_clicked = (element_and_parents.indexOf(cart_button) != -1) - - if cart_button_clicked - scope.$apply -> - scope.open = !scope.open - else - scope.$apply -> - scope.open = false - - return diff --git a/app/views/shared/menu/_joyride.html.haml b/app/views/shared/menu/_joyride.html.haml deleted file mode 100644 index eb1875f383..0000000000 --- a/app/views/shared/menu/_joyride.html.haml +++ /dev/null @@ -1,63 +0,0 @@ -.cart-dropdown.joyride-tip-guide{"ng-class" => "{ in: open }", "ng-show" => "open"} - %span.joyride-nub.top - .joyride-content-wrapper - %h5 - = t 'cart_headline' - .buttons.text-right - %a.button.secondary.tiny.add_to_cart{ href: main_app.cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" } - = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}" - %a.button.primary.tiny{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} - = t '.checkout' - %table - %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"} - %td - %small - %strong - {{ line_item.variant.extended_name }} - %td.text-right - %small - %span.quantity {{ line_item.quantity }} - %i.ofn-i_009-close - %span.price {{ line_item.variant.price_with_fees | localizeCurrency }} - - %td - %small - \= - %strong - .total-price.right {{ line_item.total_price | localizeCurrency }} - - %table{"ng-show" => "Cart.line_items.length > 0"} - %tr.total-cart - %td - %em - = t 'total' - \: - %td.text-right - %strong {{ Cart.total() | localizeCurrency }} - - .buttons.text-right - %a.button.secondary.tiny.add_to_cart{ href: main_app.cart_path, type: :submit, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" } - = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}" - %a.button.primary.tiny{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} - = t '.checkout' - - if order_changes_allowed? - %h5{"ng-if" => "Cart.line_items_finalised.length", style: 'margin-top: 1em'} - = t '.already_ordered_products' - %table - %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items_finalised", - "id" => "cart-variant-{{ line_item.variant.id }}"} - %td - %small - %strong - {{ line_item.variant.extended_name }} - %td.text-right - %small - %span.quantity {{ line_item.quantity }} - %i.ofn-i_009-close - %span.price {{ line_item.variant.price_with_fees | localizeCurrency }} - - %td - %small - \= - %strong - .total-price.right {{ line_item.total_price | localizeCurrency }} \ No newline at end of file From 4362b8b25ba75d06468d5114d3d3c6a44d6ace83 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:07:38 +0200 Subject: [PATCH 08/43] Improve line spacing on cart product list --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 5b7f21b7ea..e1a969b9f2 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -53,7 +53,7 @@ span { color: $grey-800; font-size: 16px; - line-height: 1.25; + line-height: 1.4em; } img { From 7efccac7bbbaf895a1651169dda81bc923653324 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:10:28 +0200 Subject: [PATCH 09/43] Add close functionality to close button --- app/views/shared/menu/_cart_sidebar.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index a5aaf2dec1..d3a5216e86 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -4,7 +4,7 @@ .cart-header %span.title 5 items in your cart - %span.close + %a.close{ng: {click: 'toggleCartSidebar()'}} Close %i.ofn-i_009-close .cart-content From 95686eda78e066b87395a9cef8fe643a2d59aa3a Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:16:56 +0200 Subject: [PATCH 10/43] Update translations --- app/views/shared/menu/_cart_sidebar.html.haml | 6 +++--- config/locales/en.yml | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index d3a5216e86..84d85f95e1 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -3,9 +3,9 @@ .sidebar .cart-header %span.title - 5 items in your cart + = t('.items_in_cart', num: "{{ Cart.total_item_count() }}") %a.close{ng: {click: 'toggleCartSidebar()'}} - Close + = t('.close') %i.ofn-i_009-close .cart-content %table @@ -29,6 +29,6 @@ {{ Cart.total() | localizeCurrency }} %button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} - = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t(:cart_edit)}' ) }}" + = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t('.edit_cart')}' ) }}" %button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} = t '.checkout' diff --git a/config/locales/en.yml b/config/locales/en.yml index 5b89620b2b..996294ad01 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1216,6 +1216,11 @@ en: menu: cart: cart: "Cart" + cart_sidebar: + checkout: "Checkout" + edit_cart: "Edit cart" + items_in_cart: "%{num} items in your cart" + close: "Close" signed_in: profile: "Profile" mobile_menu: From 8ca0119f5d7bf57401a6caf009030a41ba3dd4b9 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:45:21 +0200 Subject: [PATCH 11/43] Add empty cart feedback --- .../stylesheets/darkswarm/cart-dropdown.css.scss | 13 +++++++++++-- app/views/shared/menu/_cart_sidebar.html.haml | 11 ++++++++--- config/locales/en.yml | 1 + 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index e1a969b9f2..69e0dc642e 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -10,7 +10,6 @@ .cart-header { padding: 1em; - border-bottom: 1px solid $grey-100; .title { color: $grey-800; @@ -29,6 +28,16 @@ .cart-content { margin-bottom: $sidebar-footer-height + 2em; + + .cart-empty { + text-align: center; + padding-top: 10em; + width: 100%; + + span { + font-size: 1.5em; + } + } } table { @@ -41,7 +50,7 @@ background-color: white; td { - border-bottom: 1px solid $grey-100; + border-top: 1px solid $grey-100; padding: 0.75em 1em 0.5em 1em; vertical-align: top; diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 84d85f95e1..7be2c0f1fe 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -2,11 +2,12 @@ .background{ng: {click: 'toggleCartSidebar()'}} .sidebar .cart-header - %span.title + %span.title{"ng-show" => "Cart.line_items.length > 0"} = t('.items_in_cart', num: "{{ Cart.total_item_count() }}") %a.close{ng: {click: 'toggleCartSidebar()'}} = t('.close') %i.ofn-i_009-close + .cart-content %table %tr.product-cart{"ng-repeat" => "line_item in Cart.line_items", "id" => "cart-variant-{{ line_item.variant.id }}"} @@ -21,8 +22,12 @@ %td %span.total-price.right {{ line_item.total_price | localizeCurrency }} - .sidebar-footer - %p.cart-total{"ng-show" => "Cart.line_items.length > 0"} + .cart-empty{"ng-show" => "Cart.line_items.length == 0"} + %span + = t('.cart_empty') + + .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"} + %p.cart-total %strong = t 'total' \: diff --git a/config/locales/en.yml b/config/locales/en.yml index 996294ad01..89acb46306 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1221,6 +1221,7 @@ en: edit_cart: "Edit cart" items_in_cart: "%{num} items in your cart" close: "Close" + cart_empty: "Your cart is empty" signed_in: profile: "Profile" mobile_menu: From 439674ad9c90bb49f535be6e5365c410b7e5e6ad Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:54:16 +0200 Subject: [PATCH 12/43] Make cart view fullwidth on mobile --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 69e0dc642e..71cd0a8cd2 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -83,4 +83,11 @@ text-align: center; margin: -0.5em 0 0.75em 0; } + + @include breakpoint(mobile) { + .sidebar, .sidebar-footer { + width: 100%; + margin-right: -100%; + } + } } From 4a0f43a8313a2f74d40b9b8a9aff7c5394bfa4bf Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 18:58:39 +0200 Subject: [PATCH 13/43] Ensure cart item count is visible in header cart button (for screens smaller than desktop) --- .../darkswarm/controllers/cart_dropdown_controller.js.coffee | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee index 9606db1168..f22e237f06 100644 --- a/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee @@ -1,4 +1,5 @@ -Darkswarm.controller "CartDropdownCtrl", ($scope) -> +Darkswarm.controller "CartDropdownCtrl", ($scope, Cart) -> + $scope.Cart = Cart $scope.showCartSidebar = false $scope.toggleCartSidebar = -> From b74b9fbd1dbad33bf7ffee627dc4c1ed00dc5cb8 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 23:19:57 +0200 Subject: [PATCH 14/43] Shift sidebar down vertically (below navigation) and bring navigation up (z-index) --- .../stylesheets/darkswarm/cart-dropdown.css.scss | 11 ++++++++++- app/assets/stylesheets/darkswarm/menu.css.scss | 3 ++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 71cd0a8cd2..c098f43d11 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -3,9 +3,18 @@ @import "branding"; .expanding-sidebar.cart-sidebar { + .background { + z-index: 150; + } + .sidebar { - padding: 0; + padding: $topbar-height 0 0; background-color: $white; + z-index: 160; + + @include breakpoint(desktop) { + padding: $mobile-nav-height 0 0; + } } .cart-header { diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index abefec7a23..b48ed93091 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -11,6 +11,7 @@ nav.top-bar { font-size: 16px; margin-bottom: 0; height: $topbar-height; + z-index: 190; } @media #{$large-only} { @@ -174,7 +175,7 @@ nav.top-bar { height: $mobile-nav-height; position: fixed; width: 100%; - z-index: 1; + z-index: 190; .cart-span { background-color: #f4704c; From 2f2ef28351e512f9ab24e57967444afbca87620a Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 21 May 2020 23:53:15 +0200 Subject: [PATCH 15/43] Use links instead of buttons and fix up styles --- app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss | 6 +++++- app/assets/stylesheets/darkswarm/ui.css.scss | 2 +- app/views/shared/menu/_cart_sidebar.html.haml | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss index 07874ef5c3..e6b2becbac 100644 --- a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss +++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss @@ -54,9 +54,13 @@ transition: margin $transition-sidebar; padding: 1em; - button { + button, a.button { width: 48%; } + + a.button { + line-height: 2.75em; + } } @include breakpoint(tablet) { diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss index 66d72d6511..5143d52cab 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.scss +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -124,7 +124,7 @@ button.success, .button.success { } } -button.large { +button.large, a.button.large { height: 3em; font-size: 1em; color: $white; diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 7be2c0f1fe..1bfde559f8 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -33,7 +33,7 @@ \: {{ Cart.total() | localizeCurrency }} - %button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} + %a.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t('.edit_cart')}' ) }}" - %button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} + %a.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} = t '.checkout' From 459e53f43d93cf6b404d9536289e329e3faa9e87 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 22 May 2020 15:39:10 +0200 Subject: [PATCH 16/43] Adjust specs for new cart display --- app/views/shared/menu/_cart_sidebar.html.haml | 4 ++-- spec/features/consumer/shopping/shopping_spec.rb | 16 +++++++++------- .../consumer/shopping/variant_overrides_spec.rb | 13 ++++++------- .../darkswarm/services/variants_spec.js.coffee | 16 ---------------- spec/support/request/shop_workflow.rb | 8 ++++---- spec/support/request/ui_component_helper.rb | 6 +++--- 6 files changed, 24 insertions(+), 39 deletions(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 1bfde559f8..bb00e88b91 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -33,7 +33,7 @@ \: {{ Cart.total() | localizeCurrency }} - %a.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} + %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t('.edit_cart')}' ) }}" - %a.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} + %a.checkout.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} = t '.checkout' diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb index e1679791d4..85b0a92873 100644 --- a/spec/features/consumer/shopping/shopping_spec.rb +++ b/spec/features/consumer/shopping/shopping_spec.rb @@ -105,8 +105,9 @@ feature "As a consumer I want to shop with a distributor", js: true do # -- Cart shows correct price fill_in "variants[#{variant.id}]", with: 1 - show_cart - within("li.cart") { expect(page).to have_content with_currency(1020.99) } + toggle_cart + within(".cart-sidebar") { expect(page).to have_content with_currency(1020.99) } + toggle_cart # -- Changing order cycle accept_alert do @@ -119,8 +120,9 @@ feature "As a consumer I want to shop with a distributor", js: true do # that we are not filling in the quantity on the outgoing row expect(page).not_to have_selector "tr.product-cart" within('product:not(.ng-leave)') { fill_in "variants[#{variant.id}]", with: 1 } - show_cart - within("li.cart") { expect(page).to have_content with_currency(19.99) } + + toggle_cart + within(".cart-sidebar") { expect(page).to have_content with_currency(19.99) } end describe "declining to clear the cart" do @@ -136,9 +138,9 @@ feature "As a consumer I want to shop with a distributor", js: true do it "leaves the cart untouched when the user declines" do handle_js_confirm(false) do select "frogs", from: "order_cycle_id" - show_cart + toggle_cart expect(page).to have_selector "tr.product-cart" - expect(page).to have_selector 'li.cart', text: '1' + expect(page).to have_selector '.cart-sidebar', text: '1' # The order cycle choice should not have changed expect(page).to have_select 'order_cycle_id', selected: 'turtles' @@ -294,7 +296,7 @@ feature "As a consumer I want to shop with a distributor", js: true do expect(li.quantity).to eq(1) fill_in "variants[#{variant.id}]", with: '0' - within('li.cart') { expect(page).not_to have_content product.name } + within('.cart-sidebar') { expect(page).not_to have_content product.name } wait_until { !cart_dirty } expect(Spree::LineItem.where(id: li)).to be_empty diff --git a/spec/features/consumer/shopping/variant_overrides_spec.rb b/spec/features/consumer/shopping/variant_overrides_spec.rb index a4279786da..6dfed074a7 100644 --- a/spec/features/consumer/shopping/variant_overrides_spec.rb +++ b/spec/features/consumer/shopping/variant_overrides_spec.rb @@ -67,8 +67,8 @@ feature "shopping with variant overrides defined", js: true do it "shows the correct prices when products are in the cart" do fill_in "variants[#{product1_variant1.id}]", with: "2" - show_cart - wait_until_enabled 'li.cart a.button' + toggle_cart + wait_until_enabled '.cart-sidebar a.edit-cart' visit shop_path expect(page).to have_price with_currency(61.11) end @@ -78,9 +78,8 @@ feature "shopping with variant overrides defined", js: true do it "shows the overridden price with fees in the quick cart" do fill_in "variants[#{product1_variant1.id}]", with: "2" - show_cart + toggle_cart expect(page).to have_selector "#cart-variant-#{product1_variant1.id} .quantity", text: '2' - expect(page).to have_selector "#cart-variant-#{product1_variant1.id} .price", text: with_currency(61.11) expect(page).to have_selector "#cart-variant-#{product1_variant1.id} .total-price", text: with_currency(122.22) end @@ -202,8 +201,8 @@ feature "shopping with variant overrides defined", js: true do end def click_checkout - show_cart - wait_until_enabled 'li.cart a.button' - first(:link, 'Checkout now').click + toggle_cart + wait_until_enabled '.cart-sidebar a.edit-cart' + first(:link, I18n.t('shared.menu.cart_sidebar.checkout')).click end end diff --git a/spec/javascripts/unit/darkswarm/services/variants_spec.js.coffee b/spec/javascripts/unit/darkswarm/services/variants_spec.js.coffee index 408fecf7ea..2d9d1452f3 100644 --- a/spec/javascripts/unit/darkswarm/services/variants_spec.js.coffee +++ b/spec/javascripts/unit/darkswarm/services/variants_spec.js.coffee @@ -49,25 +49,9 @@ describe 'Variants service', -> variant = {product_name: 'product_name', name_to_display: 'product_name'} expect(Variants.extendedVariantName(variant)).toEqual "product_name" - it "includes the options text even if variant name is same as product", -> - variant = - product_name: 'product_name' - name_to_display: 'product_name' - options_text: 'options_text' - - expect(Variants.extendedVariantName(variant)).toEqual "product_name (options_text)" - describe "when the product name and the variant name differ", -> it "returns a combined name when there is no options text", -> variant = product_name: 'product_name' name_to_display: 'name_to_display' expect(Variants.extendedVariantName(variant)).toEqual "product_name - name_to_display" - - it "returns a combined name when there is some options text", -> - variant = - product_name: 'product_name' - name_to_display: 'name_to_display' - options_text: 'options_text' - - expect(Variants.extendedVariantName(variant)).toEqual "product_name - name_to_display (options_text)" diff --git a/spec/support/request/shop_workflow.rb b/spec/support/request/shop_workflow.rb index cde1437b04..e5123715e0 100644 --- a/spec/support/request/shop_workflow.rb +++ b/spec/support/request/shop_workflow.rb @@ -1,17 +1,17 @@ module ShopWorkflow def wait_for_cart first("#cart").click - within '.cart-dropdown' do + within '.cart-sidebar' do expect(page).to_not have_link "Updating cart..." end end def edit_cart wait_for_cart - within '.cart-dropdown' do - expect(page).to have_link "Edit your cart" + within '.cart-sidebar' do + expect(page).to have_link I18n.t('shared.menu.cart_sidebar.edit_cart') end - first("a.add_to_cart").click + first("a.edit-cart").click end def have_price(price) diff --git a/spec/support/request/ui_component_helper.rb b/spec/support/request/ui_component_helper.rb index 277d8ee88c..b23002e3d7 100644 --- a/spec/support/request/ui_component_helper.rb +++ b/spec/support/request/ui_component_helper.rb @@ -59,13 +59,13 @@ module UIComponentHelper end def have_in_cart(name) - show_cart - within "li.cart" do + toggle_cart + within ".cart-sidebar" do have_content name end end - def show_cart + def toggle_cart page.find("#cart").click end From 8ac971651c6af9b36d476aeff14596e83e858523 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 22 May 2020 16:24:27 +0200 Subject: [PATCH 17/43] Fix flaky spec --- spec/features/consumer/shopping/shopping_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb index 85b0a92873..b33657e6fd 100644 --- a/spec/features/consumer/shopping/shopping_spec.rb +++ b/spec/features/consumer/shopping/shopping_spec.rb @@ -121,7 +121,7 @@ feature "As a consumer I want to shop with a distributor", js: true do expect(page).not_to have_selector "tr.product-cart" within('product:not(.ng-leave)') { fill_in "variants[#{variant.id}]", with: 1 } - toggle_cart + wait_for_cart within(".cart-sidebar") { expect(page).to have_content with_currency(19.99) } end From 786348bc71af0388faaabb34c20d2234f180b0d2 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 22 May 2020 16:30:46 +0200 Subject: [PATCH 18/43] Remove colon from cart total text --- app/views/shared/menu/_cart_sidebar.html.haml | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index bb00e88b91..0b153f7c43 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -30,7 +30,6 @@ %p.cart-total %strong = t 'total' - \: {{ Cart.total() | localizeCurrency }} %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} From 4acb08e52b0032be43d35aacce98784b3582eca1 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 22 May 2020 16:42:12 +0200 Subject: [PATCH 19/43] Update hamburger menu icon --- app/assets/images/menu/btn-menu-mobile.png | Bin 0 -> 759 bytes app/assets/stylesheets/darkswarm/menu.css.scss | 9 +-------- app/views/shared/menu/_mobile_menu.html.haml | 2 +- 3 files changed, 2 insertions(+), 9 deletions(-) create mode 100644 app/assets/images/menu/btn-menu-mobile.png diff --git a/app/assets/images/menu/btn-menu-mobile.png b/app/assets/images/menu/btn-menu-mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..1d2d414473c197f60510723cde082a6b7c00f994 GIT binary patch literal 759 zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q4M;wBd$a>cF%}28J29*~C-ahlfoY?si(^Oy z4L`ZM%{(mK+gvo_p^_iFZum{>QV! zJmwBQ^-@p3Qq+ihn07$x1RM_t7+`8@NV^0pnXe} zH*Qw8>o kaS)ZQqxr0#h=Br>mdKI;Vst04A~X?*IS* literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index b48ed93091..3c9fea8417 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -226,14 +226,7 @@ nav.top-bar { .off-canvas-wrap .tab-bar .menu-icon { @include box-shadow(none); -} - -.off-canvas-wrap.move-right .tab-bar .menu-icon span { - box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666; -} - -.tab-bar .menu-icon span::after { - box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black; + text-indent: 0; } .tab-bar .ofn-logo { diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index d13dbeae07..1c96dd1d64 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -1,7 +1,7 @@ %nav.tab-bar.show-for-medium-down %section.left %a.left-off-canvas-toggle.menu-icon - %span + %img{src: "/assets/menu/btn-menu-mobile.png"} %section.left .ofn-logo From 10b8470e297cb46f2826ea5bacf95cffb03c5b25 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sat, 23 May 2020 12:05:49 +0200 Subject: [PATCH 20/43] Set a fixed width for cart sidebar on tablet up --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index c098f43d11..a689e1dbd9 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -93,8 +93,11 @@ margin: -0.5em 0 0.75em 0; } - @include breakpoint(mobile) { - .sidebar, .sidebar-footer { + .sidebar, .sidebar-footer { + width: 375px; + margin-right: -375px; + + @include breakpoint(mobile) { width: 100%; margin-right: -100%; } From 387a5ec950bc7558523624c7682fdefc688e0acf Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sat, 23 May 2020 12:48:38 +0200 Subject: [PATCH 21/43] Implement "Take me shopping" button --- .../darkswarm/controllers/cart_controller.js.coffee | 3 ++- .../stylesheets/darkswarm/cart-dropdown.css.scss | 11 ++++++++++- .../stylesheets/darkswarm/expanding-sidebar.css.scss | 4 ---- app/assets/stylesheets/darkswarm/ui.css.scss | 4 ++++ app/views/shared/menu/_cart_sidebar.html.haml | 5 ++++- config/locales/en.yml | 1 + 6 files changed, 21 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee index ebad820ebd..119fb640f3 100644 --- a/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee @@ -1,2 +1,3 @@ -Darkswarm.controller "CartCtrl", ($scope, Cart, $timeout) -> +Darkswarm.controller "CartCtrl", ($scope, Cart, CurrentHub) -> $scope.Cart = Cart + $scope.CurrentHub = CurrentHub diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index a689e1dbd9..c551d7cde2 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -43,12 +43,21 @@ padding-top: 10em; width: 100%; - span { + p { font-size: 1.5em; } } } + .go-shopping { + display: none; + padding: 0 1.5em; + + @include breakpoint(mobile) { + display: inline-block; + } + } + table { width: 100%; border: none; diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss index e6b2becbac..b4688e2e84 100644 --- a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss +++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss @@ -57,10 +57,6 @@ button, a.button { width: 48%; } - - a.button { - line-height: 2.75em; - } } @include breakpoint(tablet) { diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss index 5143d52cab..26a371daca 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.scss +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -124,6 +124,10 @@ button.success, .button.success { } } +a.button.large { + line-height: 2.75em; +} + button.large, a.button.large { height: 3em; font-size: 1em; diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 0b153f7c43..c20b1b21d7 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -23,9 +23,12 @@ %span.total-price.right {{ line_item.total_price | localizeCurrency }} .cart-empty{"ng-show" => "Cart.line_items.length == 0"} - %span + %p = t('.cart_empty') + %a.go-shopping.button.large.bright{ng: {href: "{{ CurrentHub.hub.id ? '#{main_app.shop_path}' : '#{main_app.shops_path}' }}"}} + = t('.take_me_shopping') + .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"} %p.cart-total %strong diff --git a/config/locales/en.yml b/config/locales/en.yml index 89acb46306..614eae8d59 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1222,6 +1222,7 @@ en: items_in_cart: "%{num} items in your cart" close: "Close" cart_empty: "Your cart is empty" + take_me_shopping: "Take me shopping!" signed_in: profile: "Profile" mobile_menu: From 2bcadd52e877aa2bd79a34c02030c6d892cb0cef Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sat, 23 May 2020 12:48:58 +0200 Subject: [PATCH 22/43] Hide "Take me shopping" button on /shop and /shops pages --- app/helpers/shop_helper.rb | 9 +++++++++ app/views/shared/menu/_cart_sidebar.html.haml | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/helpers/shop_helper.rb b/app/helpers/shop_helper.rb index a4c89bcd0d..32bb144d5f 100644 --- a/app/helpers/shop_helper.rb +++ b/app/helpers/shop_helper.rb @@ -50,4 +50,13 @@ module ShopHelper def no_open_order_cycles? @no_open_order_cycles ||= @order_cycles&.empty? end + + def show_shopping_cta? + return false if current_page?(main_app.shops_path) + + return false if current_distributor.present? && + current_page?(main_app.enterprise_shop_path(current_distributor)) + + true + end end diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index c20b1b21d7..b4b27766cd 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -26,7 +26,7 @@ %p = t('.cart_empty') - %a.go-shopping.button.large.bright{ng: {href: "{{ CurrentHub.hub.id ? '#{main_app.shop_path}' : '#{main_app.shops_path}' }}"}} + %a.go-shopping.button.large.bright{ng: {show: "#{show_shopping_cta?}", href: "{{ CurrentHub.hub.id ? '#{main_app.shop_path}' : '#{main_app.shops_path}' }}"}} = t('.take_me_shopping') .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"} From bd97939062e4bb1cf806c06578d286361b98c820 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sat, 23 May 2020 14:08:35 +0200 Subject: [PATCH 23/43] Move homepage "register here" CTA to bottom of screen. The CTA breaks the layout when the new cart sidebar is open. I can't see a nice way to keep it at the top without making a mess. --- .../darkswarm/directives/page_alert.js.coffee | 4 ++-- .../directives/smooth_scroll_to.js.coffee | 1 - .../stylesheets/darkswarm/page_alert.css.scss | 17 ++++++++--------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee b/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee index a3858444ae..666daaec64 100644 --- a/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee +++ b/app/assets/javascripts/darkswarm/directives/page_alert.js.coffee @@ -14,8 +14,8 @@ Darkswarm.directive "ofnPageAlert", ($timeout) -> # Wait a moment after page load before showing the alert. Otherwise we often miss the # start of the animation. $timeout -> - container_elems.addClass("move-down") + container_elems.addClass("move-up") , 1000 scope.close = -> - container_elems.removeClass("move-down") + container_elems.removeClass("move-up") diff --git a/app/assets/javascripts/darkswarm/directives/smooth_scroll_to.js.coffee b/app/assets/javascripts/darkswarm/directives/smooth_scroll_to.js.coffee index c3bcc9590d..34552016c4 100644 --- a/app/assets/javascripts/darkswarm/directives/smooth_scroll_to.js.coffee +++ b/app/assets/javascripts/darkswarm/directives/smooth_scroll_to.js.coffee @@ -10,6 +10,5 @@ Darkswarm.directive "ofnSmoothScrollTo", ($location, $document)-> # Scrolling is confused by our position:fixed top bar and page alert bar # - add an offset to scroll to the correct location, plus 5px buffer offset = $("nav.top-bar").height() - offset += $(".page-alert.move-down").height() offset += 5 $document.scrollTo target, offset, 1000 diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss index a9276ab56d..08f35944c9 100644 --- a/app/assets/stylesheets/darkswarm/page_alert.css.scss +++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss @@ -55,19 +55,18 @@ $page-alert-height: 55px; .off-canvas-fixed nav.tab-bar, .off-canvas-fixed .page-alert { @include transition(all 1000ms ease-in-out); - - &.move-down { - margin-top: $page-alert-height; - } } .off-canvas-wrap .page-alert { - top: -1 * $page-alert-height; + bottom: -1 * $page-alert-height; + top: unset; z-index: 100; -} -.off-canvas-wrap.move-right .inner-wrap.move-down { - .left-off-canvas-menu { - top: -1 * $page-alert-height; + &.move-up { + bottom: 0; + } + + .alert-box { + border-bottom: 0; } } From 042b4fc395f5730fbd8604406b758dd7db5c4ceb Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 29 May 2020 23:19:00 +0200 Subject: [PATCH 24/43] Remove tests for viewing previous order items in cart dropdown This behavior has been removed --- spec/features/consumer/shopping/shopping_spec.rb | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb index b33657e6fd..0093afe405 100644 --- a/spec/features/consumer/shopping/shopping_spec.rb +++ b/spec/features/consumer/shopping/shopping_spec.rb @@ -158,21 +158,6 @@ feature "As a consumer I want to shop with a distributor", js: true do quick_login_as order.user visit shop_path end - - it "shows previous orders if order cycle was selected already" do - select "frogs", from: "order_cycle_id" - expect(page).to have_content "Next order closing in 2 days" - visit shop_path - find("#cart").click - expect(page).to have_text(I18n.t("shared.menu.joyride.already_ordered_products")) - end - - it "shows previous orders after selecting an order cycle" do - select "frogs", from: "order_cycle_id" - expect(page).to have_content "Next order closing in 2 days" - find("#cart").click - expect(page).to have_text(I18n.t("shared.menu.joyride.already_ordered_products")) - end end end end From c0282b57b6141611d6c0f435437cad80a0327783 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 29 May 2020 23:32:14 +0200 Subject: [PATCH 25/43] Fix some linting warnings --- .../stylesheets/darkswarm/cart-dropdown.css.scss | 11 ++++++----- app/assets/stylesheets/darkswarm/cart-page.css.scss | 13 ++++++++----- .../darkswarm/expanding-sidebar.css.scss | 12 ++++++++---- app/assets/stylesheets/darkswarm/ui.css.scss | 3 ++- 4 files changed, 24 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index c551d7cde2..db77d66659 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -60,16 +60,16 @@ table { width: 100%; - border: none; + border: 0; border-spacing: 0; margin: 0; tr.product-cart { - background-color: white; + background-color: $white; td { border-top: 1px solid $grey-100; - padding: 0.75em 1em 0.5em 1em; + padding: 0.75em 1em 0.5em; vertical-align: top; &.image { @@ -99,10 +99,11 @@ .cart-total { color: $white; text-align: center; - margin: -0.5em 0 0.75em 0; + margin: -0.5em 0 0.75em; } - .sidebar, .sidebar-footer { + .sidebar, + .sidebar-footer { width: 375px; margin-right: -375px; diff --git a/app/assets/stylesheets/darkswarm/cart-page.css.scss b/app/assets/stylesheets/darkswarm/cart-page.css.scss index 9c0d76e11e..12296f115b 100644 --- a/app/assets/stylesheets/darkswarm/cart-page.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-page.css.scss @@ -10,7 +10,8 @@ } #cart-detail { - .cart-item-delete, .bought-item-delete { + .cart-item-delete, + .bought-item-delete { a { font-size: 1.125em; } @@ -20,7 +21,8 @@ color: $clr-brick; } - button, .button { + button, + .button { margin: 0; } @@ -41,7 +43,8 @@ } input { - &.ng-invalid-stock, &.ng-invalid-number { + &.ng-invalid-stock, + &.ng-invalid-number { border: 1px solid $clr-brick; } } @@ -50,7 +53,7 @@ .item-thumb-image { display: none; - @media screen and (min-width: 640px) { + @include breakpoint(phablet) { display: inline-block; float: left; padding-right: 0.5em; @@ -64,7 +67,7 @@ padding: 1.125rem 0 1.1875rem; width: 210px; - @media all and (max-width: 480px) { + @include breakpoint(mobile) { width: 100%; } } diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss index b4688e2e84..04ec836112 100644 --- a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss +++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss @@ -24,7 +24,8 @@ opacity: 1; } - .sidebar, .sidebar-footer { + .sidebar, + .sidebar-footer { margin-right: 0; } } @@ -54,20 +55,23 @@ transition: margin $transition-sidebar; padding: 1em; - button, a.button { + button, + a.button { width: 48%; } } @include breakpoint(tablet) { - .sidebar, .sidebar-footer { + .sidebar, + .sidebar-footer { width: $sidebar-medium-width; margin-right: -$sidebar-medium-width; } } @include breakpoint(mobile) { - .sidebar, .sidebar-footer { + .sidebar, + .sidebar-footer { width: $sidebar-small-width; margin-right: -$sidebar-small-width; } diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss index 26a371daca..856b3dc0ca 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.scss +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -128,7 +128,8 @@ a.button.large { line-height: 2.75em; } -button.large, a.button.large { +button.large, +a.button.large { height: 3em; font-size: 1em; color: $white; From 1d8386bee87447f1c8b78563f9137f1cebf09df7 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Sat, 30 May 2020 14:43:26 +0200 Subject: [PATCH 26/43] Disable two SCSS-lint rules --- .codeclimate.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.codeclimate.yml b/.codeclimate.yml index 3880986cad..1892bc1fb8 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -16,6 +16,10 @@ plugins: enabled: false PropertySortOrder: enabled: false + StringQuotes: + enabled: false + DeclarationOrder: + enabled: false duplication: enabled: true exclude_patterns: From 656c23f4074c5b2792380afdd1c304f2908bd7fb Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 1 Jun 2020 16:33:54 +0200 Subject: [PATCH 27/43] Replace previous min-width breakpoint. This was mistakenly changed to use a max-width breakpoint in a previous commit. --- app/assets/stylesheets/darkswarm/cart-page.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/cart-page.css.scss b/app/assets/stylesheets/darkswarm/cart-page.css.scss index 12296f115b..5886b5dbe9 100644 --- a/app/assets/stylesheets/darkswarm/cart-page.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-page.css.scss @@ -53,7 +53,7 @@ .item-thumb-image { display: none; - @include breakpoint(phablet) { + @media screen and (min-width: 640px) { display: inline-block; float: left; padding-right: 0.5em; From 17c2721ab65c87e8fb7f122ec6b69af46789ff64 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 1 Jun 2020 16:47:41 +0200 Subject: [PATCH 28/43] Remove unused translation keys --- config/locales/en.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index 614eae8d59..23a380cfdf 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1227,9 +1227,6 @@ en: profile: "Profile" mobile_menu: cart: "Cart" - joyride: - checkout: "Checkout now" - already_ordered_products: "Already ordered in this order cycle" register_call: selling_on_ofn: "Interested in getting on the Open Food Network?" register: "Register here" From 1eb9d11e27ad1501b5746d6d93ae697e0380a6a4 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 1 Jun 2020 16:51:54 +0200 Subject: [PATCH 29/43] Update colour variables --- app/assets/stylesheets/darkswarm/shop.css.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 367d414d2b..4f6ac716ce 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -129,11 +129,13 @@ products { .open-shop-message { a { - color: #0096ad; + color: $teal-500; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { text-decoration: none; - color: #4aadbd; + color: $teal-400; } } } From 9c6dd1b3247792613f0df36c97644889506c8b2c Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 1 Jun 2020 16:56:33 +0200 Subject: [PATCH 30/43] Add comment on z-index --- app/assets/stylesheets/darkswarm/menu.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index 3c9fea8417..774d2bc146 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -175,7 +175,7 @@ nav.top-bar { height: $mobile-nav-height; position: fixed; width: 100%; - z-index: 190; + z-index: 190; // Above cart sidebar and shaded overlay .cart-span { background-color: #f4704c; From 234f0f94cf346b09c4b993b298f7ec17ed8ae956 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Mon, 1 Jun 2020 17:02:43 +0200 Subject: [PATCH 31/43] Change images in serializer to use `product.images` over `variant.images` --- app/serializers/api/variant_serializer.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/serializers/api/variant_serializer.rb b/app/serializers/api/variant_serializer.rb index e60ec2832d..38cc649910 100644 --- a/app/serializers/api/variant_serializer.rb +++ b/app/serializers/api/variant_serializer.rb @@ -32,8 +32,8 @@ class Api::VariantSerializer < ActiveModel::Serializer end def thumb_url - if object.images.present? - object.images.first.attachment.url(:mini) + if object.product.images.present? + object.product.images.first.attachment.url(:mini) else "/assets/noimage/mini.png" end From b58ccc02eebd5fd6ec8d8ac88a3424c220a431fd Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 4 Jun 2020 10:54:29 +0200 Subject: [PATCH 32/43] Adjust shop.css.scss and remove indentation --- .../stylesheets/darkswarm/shop.css.scss | 332 +++++++++--------- 1 file changed, 167 insertions(+), 165 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss index 4f6ac716ce..6f411db6e9 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.scss +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -11,173 +11,175 @@ @import "shop-taxon-flag"; @import "shop-popovers"; +.darkswarm { + products { + display: block; + + @include breakpoint(tablet) { + input.button.right { + float: left; + } + } + + @include breakpoint(mobile) { + .add_to_cart { + margin-top: 2rem; + } + } + + form { + input.small.button.primary.right.add_to_cart { + &.dirty { + padding-left: 3.2rem; + } + } + + i.cart-spinner { + position: absolute; + top: 14px; + right: 146px; + color: white; + font-size: 1.2em; + + // Necessary to be below Z index of cart popover: + z-index: 98; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; + } + } + + product { + @include csstrans; + + border-bottom: 1px solid #e5e5e5; + border-top: 1px solid #e5e5e5; + padding-bottom: 1px; + margin-bottom: 20px !important; + position: relative; + display: block; + color: $med-drk-grey; + + &:hover, &:focus, &:active { + border-bottom: 1px solid $clr-brick-med-bright; + border-top: 1px solid $clr-brick-med-bright; + } + + // BULK + .bulk-buy { + font-size: 0.875rem; + + @include breakpoint(tablet) { + font-size: 0.75rem; + } + } + + .bulk-buy, .bulk-buy i { + color: #888; + } + + .inline { + display: inline; + } + + .spinner { + width: 100px; + margin-bottom: 20px; + } + + // ICONS + i { + font-size: 0.75em; + padding-right: 0.9375rem; + + @include breakpoint(phablet) { + padding-right: 0.25rem; + } + } + + i.ofn-i_056-bulk { + font-size: 1rem; + padding-right: 0rem; + } + + i.ofn-i_036-producers { + padding-left: 0.2rem; + padding-right: 0rem; + font-size: 0.8rem; + } + } + } + + .alert-box.changeable-orders-alert { + margin-bottom: 0px; + } + + .select-oc-message { + margin-top: 1rem; + + .highlighted { + color: $red-700; + font-weight: bold; + } + } + + .open-shop-message { + a { + color: $teal-500; + + &:hover, + &:focus, + &:active { + text-decoration: none; + color: $teal-400; + } + } + } + + .closed-shop-header { + background-color: $grey-650; + color: $white; + + h4 { + color: $white; + } + + p { + margin: 1rem 0 0.4rem; + } + + .message { + display: inline-block; + } + } + +.warning-sign { + margin: 0 10px 0 5px; + display: inline-block; + line-height: 1.9rem; + + strong { + color: $grey-650; + display: block; + position: relative; + text-align: center; + width: 23px; + } + + .rectangle { + background-color: $white; + border-radius: 4px; + color: $grey-650; + height: 23px; + position: absolute; + top: 27px; + transform: rotate(-315deg); + width: 23px; + } + } +} + .shop-filters-sidebar { .property-selectors { margin-bottom: $sidebar-footer-height + 2em; } } - -products { - display: block; - - @include breakpoint(tablet) { - input.button.right { - float: left; - } - } - - @include breakpoint(mobile) { - .add_to_cart { - margin-top: 2rem; - } - } - - form { - input.small.button.primary.right.add_to_cart { - &.dirty { - padding-left: 3.2rem; - } - } - - i.cart-spinner { - position: absolute; - top: 14px; - right: 146px; - color: white; - font-size: 1.2em; - - // Necessary to be below Z index of cart popover: - z-index: 98; - -webkit-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; - } - } - - product { - @include csstrans; - - border-bottom: 1px solid #e5e5e5; - border-top: 1px solid #e5e5e5; - padding-bottom: 1px; - margin-bottom: 20px !important; - position: relative; - display: block; - color: $med-drk-grey; - - &:hover, &:focus, &:active { - border-bottom: 1px solid $clr-brick-med-bright; - border-top: 1px solid $clr-brick-med-bright; - } - - // BULK - .bulk-buy { - font-size: 0.875rem; - - @include breakpoint(tablet) { - font-size: 0.75rem; - } - } - - .bulk-buy, .bulk-buy i { - color: #888; - } - - .inline { - display: inline; - } - - .spinner { - width: 100px; - margin-bottom: 20px; - } - - // ICONS - i { - font-size: 0.75em; - padding-right: 0.9375rem; - - @include breakpoint(phablet) { - padding-right: 0.25rem; - } - } - - i.ofn-i_056-bulk { - font-size: 1rem; - padding-right: 0rem; - } - - i.ofn-i_036-producers { - padding-left: 0.2rem; - padding-right: 0rem; - font-size: 0.8rem; - } - } -} - -.alert-box.changeable-orders-alert { - margin-bottom: 0px; -} - -.select-oc-message { - margin-top: 1rem; - - .highlighted { - color: $red-700; - font-weight: bold; - } -} - -.open-shop-message { - a { - color: $teal-500; - - &:hover, - &:focus, - &:active { - text-decoration: none; - color: $teal-400; - } - } -} - -.closed-shop-header { - background-color: $grey-650; - color: $white; - - h4 { - color: $white; - } - - p { - margin: 1rem 0 0.4rem; - } - - .message { - display: inline-block; - } -} - - .warning-sign { - margin: 0 10px 0 5px; - display: inline-block; - line-height: 1.9rem; - - strong { - color: $grey-650; - display: block; - position: relative; - text-align: center; - width: 23px; - } - - .rectangle { - background-color: $white; - border-radius: 4px; - color: $grey-650; - height: 23px; - position: absolute; - top: 27px; - transform: rotate(-315deg); - width: 23px; - } -} From 850e1b03648ed1c96975b2efa43dd3fc0e99e1c2 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Thu, 4 Jun 2020 10:55:12 +0200 Subject: [PATCH 33/43] Reduce specificity in cart css rules --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 2 +- app/assets/stylesheets/darkswarm/cart-page.css.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index db77d66659..1c17d1b517 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -64,7 +64,7 @@ border-spacing: 0; margin: 0; - tr.product-cart { + .product-cart { background-color: $white; td { diff --git a/app/assets/stylesheets/darkswarm/cart-page.css.scss b/app/assets/stylesheets/darkswarm/cart-page.css.scss index 5886b5dbe9..8e58dde24e 100644 --- a/app/assets/stylesheets/darkswarm/cart-page.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-page.css.scss @@ -30,7 +30,7 @@ cursor: pointer; } - tr.bought td { + .bought td { color: $med-grey; h5 { From 7093e0f7a33fbc5cd79540b172ebada0e3030b54 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 9 Jun 2020 15:36:06 +0200 Subject: [PATCH 34/43] Use plural or singular description in cart, depending on number of items --- app/views/shared/menu/_cart_sidebar.html.haml | 6 ++++-- config/locales/en.yml | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index b4b27766cd..a792026afc 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -2,8 +2,10 @@ .background{ng: {click: 'toggleCartSidebar()'}} .sidebar .cart-header - %span.title{"ng-show" => "Cart.line_items.length > 0"} - = t('.items_in_cart', num: "{{ Cart.total_item_count() }}") + %span.title{"ng-show" => "Cart.line_items.length == 1"} + = t('.items_in_cart_singular', num: "{{ Cart.total_item_count() }}") + %span.title{"ng-show" => "Cart.line_items.length > 1"} + = t('.items_in_cart_plural', num: "{{ Cart.total_item_count() }}") %a.close{ng: {click: 'toggleCartSidebar()'}} = t('.close') %i.ofn-i_009-close diff --git a/config/locales/en.yml b/config/locales/en.yml index 23a380cfdf..27cf49f93b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1219,7 +1219,8 @@ en: cart_sidebar: checkout: "Checkout" edit_cart: "Edit cart" - items_in_cart: "%{num} items in your cart" + items_in_cart_singular: "%{num} item in your cart" + items_in_cart_plural: "%{num} items in your cart" close: "Close" cart_empty: "Your cart is empty" take_me_shopping: "Take me shopping!" From 076ecfdb43708d44ca0112d39b916bf95cd62db3 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 9 Jun 2020 16:32:25 +0200 Subject: [PATCH 35/43] Adjust scrollbar visibility in sidebar --- .../stylesheets/darkswarm/cart-dropdown.css.scss | 4 ++++ .../stylesheets/darkswarm/expanding-sidebar.css.scss | 2 +- app/views/shared/menu/_cart_sidebar.html.haml | 11 ++++++----- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 1c17d1b517..78a1241f54 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -112,4 +112,8 @@ margin-right: -100%; } } + + .sidebar-footer { + z-index: 170; + } } diff --git a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss index 04ec836112..da1034cf42 100644 --- a/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss +++ b/app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss @@ -41,7 +41,7 @@ background-color: rgba($white, 0.95); padding: 1em; transition: margin $transition-sidebar; - overflow-y: scroll; + overflow-y: auto; } .sidebar-footer { diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index a792026afc..070beb3983 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -31,12 +31,13 @@ %a.go-shopping.button.large.bright{ng: {show: "#{show_shopping_cta?}", href: "{{ CurrentHub.hub.id ? '#{main_app.shop_path}' : '#{main_app.shops_path}' }}"}} = t('.take_me_shopping') - .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"} - %p.cart-total - %strong - = t 'total' - {{ Cart.total() | localizeCurrency }} + .sidebar-footer{"ng-show" => "Cart.line_items.length > 0"} + %p.cart-total + %strong + = t 'total' + {{ Cart.total() | localizeCurrency }} + %div.fullwidth %a.edit-cart.button.large.dark.left{href: main_app.cart_path, "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }"} = "{{ Cart.dirty ? '#{t(:cart_updating)}' : (Cart.empty() ? '#{t(:cart_empty)}' : '#{t('.edit_cart')}' ) }}" %a.checkout.button.large.bright.right{href: main_app.checkout_path, "ng-disabled" => "Cart.dirty || Cart.empty()"} From 886df0e87ddeb38c067277b7efbaee572b997968 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 12 Jun 2020 10:39:56 +0200 Subject: [PATCH 36/43] Fix cart page button style regression --- app/assets/stylesheets/darkswarm/cart-page.css.scss | 1 + app/views/spree/orders/form/_cart_links.html.haml | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-page.css.scss b/app/assets/stylesheets/darkswarm/cart-page.css.scss index 8e58dde24e..b2b17fa0bb 100644 --- a/app/assets/stylesheets/darkswarm/cart-page.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-page.css.scss @@ -66,6 +66,7 @@ .button { padding: 1.125rem 0 1.1875rem; width: 210px; + font-size: 1.1em; @include breakpoint(mobile) { width: 100%; diff --git a/app/views/spree/orders/form/_cart_links.html.haml b/app/views/spree/orders/form/_cart_links.html.haml index 798a428f7c..89a63d70fd 100644 --- a/app/views/spree/orders/form/_cart_links.html.haml +++ b/app/views/spree/orders/form/_cart_links.html.haml @@ -1,5 +1,5 @@ .row.links{'data-hook' => "cart_buttons"} - %a.continue-shopping.button.large.secondary{href: current_shop_products_path, "ng-disabled" => "#{@insufficient_stock_lines.any?}", "disable-dynamically" => true} + %a.continue-shopping.button.secondary{href: current_shop_products_path, "ng-disabled" => "#{@insufficient_stock_lines.any?}", "disable-dynamically" => true} = t :orders_edit_continue - %a#checkout-link.button.large.primary.right{href: main_app.checkout_path, "ng-disabled" => "#{@insufficient_stock_lines.any?}", "disable-dynamically" => true} + %a#checkout-link.button.primary.right{href: main_app.checkout_path, "ng-disabled" => "#{@insufficient_stock_lines.any?}", "disable-dynamically" => true} = t :orders_edit_checkout From 2cc02d971121cc511eaa55d9afc17d3d1b6b9800 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 12 Jun 2020 10:58:25 +0200 Subject: [PATCH 37/43] Make cart header stick to top of cart --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 78a1241f54..890633d2ee 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -18,7 +18,11 @@ } .cart-header { + background-color: $white; + border-bottom: 1px solid $grey-100; padding: 1em; + position: sticky; + top: 0; .title { color: $grey-800; @@ -68,7 +72,7 @@ background-color: $white; td { - border-top: 1px solid $grey-100; + border-bottom: 1px solid $grey-100; padding: 0.75em 1em 0.5em; vertical-align: top; From ed086c2db595714719af2ebef062e581bcce9697 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 12 Jun 2020 11:17:59 +0200 Subject: [PATCH 38/43] Add character limit to product and variant names in cart sidebar --- .../darkswarm/controllers/cart_controller.js.coffee | 1 + app/views/shared/menu/_cart_sidebar.html.haml | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee index 119fb640f3..28d6cb4cfe 100644 --- a/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/cart_controller.js.coffee @@ -1,3 +1,4 @@ Darkswarm.controller "CartCtrl", ($scope, Cart, CurrentHub) -> $scope.Cart = Cart $scope.CurrentHub = CurrentHub + $scope.max_characters = 20 diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 070beb3983..03c3f52222 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -16,9 +16,9 @@ %td.image %img{'ng-src' => '{{ line_item.variant.thumb_url }}'} %td - %span {{ line_item.variant.extended_name }} + %span {{ line_item.variant.extended_name | truncate: max_characters }} %br - %span.options-text {{ line_item.variant.options_text }} + %span.options-text {{ line_item.variant.options_text | truncate: max_characters }} %td.text-right %span.quantity {{ line_item.quantity }} %td From a6edc1c97356fa564ae78e67cece576f7bde7fcb Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 12 Jun 2020 12:34:52 +0200 Subject: [PATCH 39/43] Enable control over body scroll with BodyScroll service --- .../controllers/cart_dropdown_controller.js.coffee | 3 ++- .../darkswarm/directives/body_scroll.js.coffee | 9 +++++++++ .../javascripts/darkswarm/services/body_scroll.js.coffee | 7 +++++++ app/assets/stylesheets/darkswarm/ui.css.scss | 4 ++++ app/views/layouts/darkswarm.html.haml | 2 +- 5 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/directives/body_scroll.js.coffee create mode 100644 app/assets/javascripts/darkswarm/services/body_scroll.js.coffee diff --git a/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee index f22e237f06..048459ecd8 100644 --- a/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee +++ b/app/assets/javascripts/darkswarm/controllers/cart_dropdown_controller.js.coffee @@ -1,6 +1,7 @@ -Darkswarm.controller "CartDropdownCtrl", ($scope, Cart) -> +Darkswarm.controller "CartDropdownCtrl", ($scope, Cart, BodyScroll) -> $scope.Cart = Cart $scope.showCartSidebar = false $scope.toggleCartSidebar = -> $scope.showCartSidebar = !$scope.showCartSidebar + BodyScroll.toggle() diff --git a/app/assets/javascripts/darkswarm/directives/body_scroll.js.coffee b/app/assets/javascripts/darkswarm/directives/body_scroll.js.coffee new file mode 100644 index 0000000000..183d828d03 --- /dev/null +++ b/app/assets/javascripts/darkswarm/directives/body_scroll.js.coffee @@ -0,0 +1,9 @@ +Darkswarm.directive "bodyScroll", ($rootScope, BodyScroll) -> + restrict: 'A' + scope: true + link: (scope, elem, attrs) -> + $rootScope.$on "toggleBodyScroll", -> + if BodyScroll.disabled + elem.addClass "disable-scroll" + else + elem.removeClass "disable-scroll" diff --git a/app/assets/javascripts/darkswarm/services/body_scroll.js.coffee b/app/assets/javascripts/darkswarm/services/body_scroll.js.coffee new file mode 100644 index 0000000000..84c8ed9337 --- /dev/null +++ b/app/assets/javascripts/darkswarm/services/body_scroll.js.coffee @@ -0,0 +1,7 @@ +angular.module("Darkswarm").factory "BodyScroll", ($rootScope) -> + new class BodyScroll + disabled: false + + toggle: -> + @disabled = !@disabled + $rootScope.$broadcast "toggleBodyScroll" diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss index 856b3dc0ca..d6b0988ad6 100644 --- a/app/assets/stylesheets/darkswarm/ui.css.scss +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -163,3 +163,7 @@ a.button.large { padding-right: 0; padding-left: 0; } + +.disable-scroll { + overflow: hidden; +} diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index fdf2cd4f17..f45b157a51 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -18,7 +18,7 @@ = stylesheet_link_tag "darkswarm/all" = csrf_meta_tags - %body{class: body_classes, ng: {app: "Darkswarm"}} + %body{class: body_classes, "body-scroll" => true , ng: {app: "Darkswarm"}} / [if lte IE 8] = render partial: "shared/ie_warning" = javascript_include_tag "iehack" From 5a480439ca63582073a3b5103a7bea04b09a0c99 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Fri, 12 Jun 2020 13:29:14 +0200 Subject: [PATCH 40/43] Remove test for items from previous orders looking in cart dropdown This feature has been removed --- spec/features/consumer/shopping/cart_spec.rb | 5 ----- 1 file changed, 5 deletions(-) diff --git a/spec/features/consumer/shopping/cart_spec.rb b/spec/features/consumer/shopping/cart_spec.rb index 9068504be6..e7785dcdb4 100644 --- a/spec/features/consumer/shopping/cart_spec.rb +++ b/spec/features/consumer/shopping/cart_spec.rb @@ -282,11 +282,6 @@ feature "full-page cart", js: true do expect(page).to have_no_content item1.variant.name expect(page).to have_content item2.variant.name - # open the dropdown cart and check there as well - find('#cart').click - expect(page).to have_no_content item1.variant.name - expect(page).to have_content item2.variant.name - visit main_app.cart_path find("td.toggle-bought").click From 7c7ab322bb08def96af11c1d035b5d292112b454 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 16 Jun 2020 11:25:43 +0200 Subject: [PATCH 41/43] Ensure cart-header has the same height when the cart is empty Fixes a minor visual bug --- app/assets/stylesheets/darkswarm/cart-dropdown.css.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss index 890633d2ee..ca3dd6a1a2 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.css.scss @@ -20,6 +20,7 @@ .cart-header { background-color: $white; border-bottom: 1px solid $grey-100; + min-height: 3.5em; padding: 1em; position: sticky; top: 0; From ff6ba8819f4fbc3464c7f7168ebb554cd6638e24 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Tue, 16 Jun 2020 13:56:53 +0200 Subject: [PATCH 42/43] Use image_tag helper with relative paths when loading static images in /app/assets/images folder This seems to be needed for Rails 4 --- app/views/shared/menu/_mobile_menu.html.haml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index 1c96dd1d64..716db01f73 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -1,7 +1,7 @@ %nav.tab-bar.show-for-medium-down %section.left %a.left-off-canvas-toggle.menu-icon - %img{src: "/assets/menu/btn-menu-mobile.png"} + = image_tag "menu/btn-menu-mobile.png" %section.left .ofn-logo @@ -14,7 +14,7 @@ %span = t '.cart' %span.count - %img{ src: image_path("menu/icn-cart.svg") } + = image_tag "menu/icn-cart.svg" %span {{ Cart.total_item_count() }} From b189d06eb76ab7b061ea81d25f88b3f153e9e7da Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 17 Jun 2020 11:19:32 +0200 Subject: [PATCH 43/43] Update shopping CTA logic Shows "Take me shopping!" button on /shops page if a shop is selected --- app/helpers/shop_helper.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/helpers/shop_helper.rb b/app/helpers/shop_helper.rb index 32bb144d5f..8da650c4ef 100644 --- a/app/helpers/shop_helper.rb +++ b/app/helpers/shop_helper.rb @@ -52,7 +52,7 @@ module ShopHelper end def show_shopping_cta? - return false if current_page?(main_app.shops_path) + return false if current_page?(main_app.shops_path) && current_distributor.blank? return false if current_distributor.present? && current_page?(main_app.enterprise_shop_path(current_distributor))