Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile] Cart Dropdown #5480

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
85abfd2
Create Cart sidebar and controller
Matt-Yorkley May 21, 2020
b1ce7f2
Simplify product naming in cart
Matt-Yorkley May 21, 2020
a8b981e
Add product thumbnais to serializer for cart dropdown images
Matt-Yorkley May 21, 2020
b4e5542
Extract re-usable sidebar styes
Matt-Yorkley May 21, 2020
400fce8
Separate cart page and cart dropdown styles
Matt-Yorkley May 21, 2020
33a2dd1
Add new layout for cart sidebar
Matt-Yorkley May 21, 2020
be8c0f3
Remove old cart dropdown view and directive
Matt-Yorkley May 21, 2020
4362b8b
Improve line spacing on cart product list
Matt-Yorkley May 21, 2020
7efccac
Add close functionality to close button
Matt-Yorkley May 21, 2020
95686ed
Update translations
Matt-Yorkley May 21, 2020
8ca0119
Add empty cart feedback
Matt-Yorkley May 21, 2020
439674a
Make cart view fullwidth on mobile
Matt-Yorkley May 21, 2020
4a0f43a
Ensure cart item count is visible in header cart button (for screens …
Matt-Yorkley May 21, 2020
b74b9fb
Shift sidebar down vertically (below navigation) and bring navigation…
Matt-Yorkley May 21, 2020
2f2ef28
Use links instead of buttons and fix up styles
Matt-Yorkley May 21, 2020
459e53f
Adjust specs for new cart display
Matt-Yorkley May 22, 2020
8ac9716
Fix flaky spec
Matt-Yorkley May 22, 2020
786348b
Remove colon from cart total text
Matt-Yorkley May 22, 2020
4acb08e
Update hamburger menu icon
Matt-Yorkley May 22, 2020
10b8470
Set a fixed width for cart sidebar on tablet up
Matt-Yorkley May 23, 2020
387a5ec
Implement "Take me shopping" button
Matt-Yorkley May 23, 2020
2bcadd5
Hide "Take me shopping" button on /shop and /shops pages
Matt-Yorkley May 23, 2020
bd97939
Move homepage "register here" CTA to bottom of screen.
Matt-Yorkley May 23, 2020
042b4fc
Remove tests for viewing previous order items in cart dropdown
Matt-Yorkley May 29, 2020
c0282b5
Fix some linting warnings
Matt-Yorkley May 29, 2020
1d8386b
Disable two SCSS-lint rules
Matt-Yorkley May 30, 2020
656c23f
Replace previous min-width breakpoint.
Matt-Yorkley Jun 1, 2020
17c2721
Remove unused translation keys
Matt-Yorkley Jun 1, 2020
1eb9d11
Update colour variables
Matt-Yorkley Jun 1, 2020
9c6dd1b
Add comment on z-index
Matt-Yorkley Jun 1, 2020
234f0f9
Change images in serializer to use `product.images` over `variant.ima…
Matt-Yorkley Jun 1, 2020
b58ccc0
Adjust shop.css.scss and remove indentation
Matt-Yorkley Jun 4, 2020
850e1b0
Reduce specificity in cart css rules
Matt-Yorkley Jun 4, 2020
7093e0f
Use plural or singular description in cart, depending on number of items
Matt-Yorkley Jun 9, 2020
076ecfd
Adjust scrollbar visibility in sidebar
Matt-Yorkley Jun 9, 2020
886df0e
Fix cart page button style regression
Matt-Yorkley Jun 12, 2020
2cc02d9
Make cart header stick to top of cart
Matt-Yorkley Jun 12, 2020
ed086c2
Add character limit to product and variant names in cart sidebar
Matt-Yorkley Jun 12, 2020
a6edc1c
Enable control over body scroll with BodyScroll service
Matt-Yorkley Jun 12, 2020
5a48043
Remove test for items from previous orders looking in cart dropdown
Matt-Yorkley Jun 12, 2020
7c7ab32
Ensure cart-header has the same height when the cart is empty
Matt-Yorkley Jun 16, 2020
ff6ba88
Use image_tag helper with relative paths when loading static images i…
Matt-Yorkley Jun 16, 2020
b189d06
Update shopping CTA logic
Matt-Yorkley Jun 17, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .codeclimate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ plugins:
enabled: false
PropertySortOrder:
enabled: false
StringQuotes:
enabled: false
DeclarationOrder:
enabled: false
luisramos0 marked this conversation as resolved.
Show resolved Hide resolved
duplication:
enabled: true
exclude_patterns:
Expand Down
Binary file added app/assets/images/menu/btn-menu-mobile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
Darkswarm.controller "CartCtrl", ($scope, Cart, $timeout) ->
Darkswarm.controller "CartCtrl", ($scope, Cart, CurrentHub) ->
$scope.Cart = Cart
$scope.CurrentHub = CurrentHub
$scope.max_characters = 20
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Darkswarm.controller "CartDropdownCtrl", ($scope, Cart, BodyScroll) ->
$scope.Cart = Cart
$scope.showCartSidebar = false

$scope.toggleCartSidebar = ->
$scope.showCartSidebar = !$scope.showCartSidebar
BodyScroll.toggle()
Original file line number Diff line number Diff line change
@@ -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"
19 changes: 0 additions & 19 deletions app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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")
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
angular.module("Darkswarm").factory "BodyScroll", ($rootScope) ->
new class BodyScroll
disabled: false

toggle: ->
@disabled = !@disabled
$rootScope.$broadcast "toggleBodyScroll"
Original file line number Diff line number Diff line change
Expand Up @@ -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) ->
Expand Down
124 changes: 124 additions & 0 deletions app/assets/stylesheets/darkswarm/cart-dropdown.css.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
@import "mixins";
@import "variables";
@import "branding";

.expanding-sidebar.cart-sidebar {
.background {
z-index: 150;
}

.sidebar {
padding: $topbar-height 0 0;
background-color: $white;
z-index: 160;

@include breakpoint(desktop) {
padding: $mobile-nav-height 0 0;
}
}

.cart-header {
background-color: $white;
border-bottom: 1px solid $grey-100;
min-height: 3.5em;
padding: 1em;
position: sticky;
top: 0;

.title {
color: $grey-800;
margin: 0;
}

.close {
color: $grey-500;
float: right;

i {
vertical-align: middle;
}
}
}

.cart-content {
margin-bottom: $sidebar-footer-height + 2em;

.cart-empty {
text-align: center;
padding-top: 10em;
width: 100%;

p {
font-size: 1.5em;
}
}
}

.go-shopping {
display: none;
padding: 0 1.5em;

@include breakpoint(mobile) {
display: inline-block;
}
}

table {
width: 100%;
border: 0;
border-spacing: 0;
margin: 0;

.product-cart {
background-color: $white;

td {
border-bottom: 1px solid $grey-100;
padding: 0.75em 1em 0.5em;
vertical-align: top;

&.image {
width: 42px;
padding: 0.5em 0 0.5em 1em;
}

span {
color: $grey-800;
font-size: 16px;
line-height: 1.4em;
}

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;
}

.sidebar,
.sidebar-footer {
width: 375px;
margin-right: -375px;

@include breakpoint(mobile) {
width: 100%;
margin-right: -100%;
}
}

.sidebar-footer {
z-index: 170;
}
}
75 changes: 75 additions & 0 deletions app/assets/stylesheets/darkswarm/cart-page.css.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
@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 {
Matt-Yorkley marked this conversation as resolved.
Show resolved Hide resolved
cursor: pointer;
}

.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;
font-size: 1.1em;

@include breakpoint(mobile) {
width: 100%;
}
}
}
79 changes: 79 additions & 0 deletions app/assets/stylesheets/darkswarm/expanding-sidebar.css.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
@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: auto;
}

.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,
a.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;
}
}
}
Loading