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] 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