raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5073 from Matt-Yorkley/mobile-checkout

Browse Source 
[Mobile UX] Order cycle section updates
This commit is contained in:
Maikel
2020-03-27 15:34:19 +11:00
committed by GitHub
parent 8caf10f634 e63dbcfa89
commit d254df7ccc
11 changed files with 140 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
View File

@@ -1,77 +1,13 @@
@import "typography";
.darkswarm navigation {
display: block;
background: $white;
distributor.details {
box-sizing: border-box;
display: block;
min-height: 150px;
padding: 30px 0 20px 0;
position: relative;
select {
width: 200px;
}
img {
display: block;
height: 100px;
width: 100px;
margin-right: 12px;
}
location {
@include headingFont;
}
@media all and (max-width: 768px) {
location, location + small {
display: block;
}
}
#distributor_title h3 {
margin-top: 0;
padding-top: 0.45em;
@media all and (max-width: 768px) {
margin-bottom: 8px;
}
}
}
}
ordercycle {
float: right;
background: $teal-400;
color: $white;
background: $grey-050;
color: $grey-800;
width: 100%;
border-radius: 0.5em 0.5em 0 0;
position: absolute;
right: 1em;
padding: 1em;
margin-top: 3em;
height: 7.6em;
&.requires-selection {
background-color: $red-700;
.order-cycle-select {
border: 1px solid $red-500;
.select-label {
background-color: rgba($red-500, 0.5);
}
select {
background-color: $white;
background-image: url('/assets/black-caret.svg');
color: $grey-500;
font-style: italic;
}
}
}
margin-top: 1em;
padding: 1em 1.25em 0;
p {
max-width: 400px;
@@ -97,14 +33,10 @@ ordercycle {
}
}
@media all and (max-width: 768px) {
@media all and (max-width: 480px) {
padding: 0.5em 1em 0.75em;
}
form.custom {
text-align: center;
}
.order-cycle-select {
border: 1px solid $teal-300;
display: inline-block;
@@ -164,9 +96,44 @@ ordercycle {
closing {
@include headingFont;
color: $white;
color: $grey-800;
font-size: 1.25rem;
display: block;
padding: 0.5em 0;
span {
@media all and (max-width: 768px) {
font-size: 0.875em;
}
}
}
}
shop ordercycle {
background: $teal-400;
color: $white;
&.requires-selection {
background-color: $red-700;
.order-cycle-select {
border: 1px solid $red-500;
.select-label {
background-color: rgba($red-500, 0.5);
}
select {
background-color: $white;
background-image: url('/assets/black-caret.svg');
color: $grey-500;
font-style: italic;
}
}
}
closing {
color: $white;
padding: 0 0 12px;
@media all and (max-width: 1024px) {
@@ -181,11 +148,25 @@ ordercycle {
float: none;
padding: 0 0 10px;
}
}
span {
@media all and (max-width: 768px) {
font-size: 0.875em;
}
form.custom {
text-align: center;
}
}
shop navigation ordercycle {
margin-top: 3em;
padding: 1em;
height: 7.6em;
position: absolute;
right: 1em;
}
.sub-header {
form {
p {
margin-bottom: 0.75em;
}
}
}

25
app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
View File

@@ -1,31 +1,6 @@
@import "mixins";
@import "branding";
// .darkswarm
// product
ordercycle {
.joyride-tip-guide {
background-color: $clr-brick;
.joyride-nub.right {
border-color: $clr-brick !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
}
p {
margin: 0;
font-weight: 700;
}
@media all and (max-width: 768px) {
z-index: 10;
}
}
}
// Pop over
// Foundation overrides
.joyride-tip-guide.price_breakdown {

2
app/assets/stylesheets/darkswarm/active_table_search.css.scss
View File

@@ -27,7 +27,7 @@
}
products .filter-box {
background: #f7f7f7;
background: $grey-050;
}
.filter-box {

4
app/assets/stylesheets/darkswarm/branding.css.scss
View File

@@ -1,5 +1,7 @@
$ofn-brand: #f27052;
$distributor-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
// e.g. australia, uk, norway specific color
$ofn-grey: #808184;
@@ -39,6 +41,8 @@ $light-grey-transparency: rgba(0, 0, 0, .1);
$black: #000;
$white: #fff;
$grey-050: #f7f7f7;
$grey-400: #bbb;
$grey-500: #999;
$grey-600: #777;

2
app/assets/stylesheets/darkswarm/checkout.css.scss
View File

@@ -44,7 +44,7 @@ checkout {
h5 {
margin: 0;
padding: 0.65em;
background: #f7f7f7;
background: $grey-050;
.label {
font-size: 1em;

52
app/assets/stylesheets/darkswarm/distributor_header.css.scss Normal file
View File

@@ -0,0 +1,52 @@
@import 'typography';
section {
:not(shop) navigation {
box-shadow: $distributor-header-shadow;
}
}
.darkswarm navigation {
display: block;
background: $white;
position: relative;
z-index: 2;
.details {
box-sizing: border-box;
display: block;
min-height: 150px;
padding: 30px 0 0;
position: relative;
select {
width: 200px;
}
img {
display: block;
height: 100px;
width: 100px;
margin-right: 12px;
}
location {
@include headingFont;
}
@media all and (max-width: 768px) {
location, location + small {
display: block;
}
}
#distributor_title h3 {
margin-top: 0;
padding-top: 0.45em;
@media all and (max-width: 768px) {
margin-bottom: 8px;
}
}
}
}

2
app/assets/stylesheets/darkswarm/shop_tabs.css.scss
View File

@@ -7,7 +7,7 @@
.tab-buttons {
color: $dark-grey;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
box-shadow: $distributor-header-shadow;
.columns {
display: flex;

14
app/views/checkout/edit.html.haml
View File

@@ -7,7 +7,6 @@
.darkswarm.footer-pad
- content_for :order_cycle_form do
%closing
= t :checkout_now
%p
@@ -15,16 +14,23 @@
%strong
= pickup_time current_order_cycle
= render partial: "shopping_shared/header", locals: { hide_oc_selector: true }
- content_for :ordercycle_sidebar do
.show-for-large-up.large-4.columns
= render partial: "shopping_shared/order_cycles"
= render partial: "shopping_shared/header"
.sub-header.show-for-medium-down
= render partial: "shopping_shared/order_cycles"
%accordion{"close-others" => "false"}
%checkout.row{"ng-controller" => "CheckoutCtrl"}
.small-12.medium-8.large-9.columns
.small-12.medium-8.columns
- unless spree_current_user
= render partial: "checkout/authentication"
%div{"ng-show" => "enabled", "ng-controller" => "AccordionCtrl"}
= render partial: "checkout/form"
.small-12.medium-4.large-3.columns
.small-12.medium-4.columns
= render partial: "checkout/summary"

4
app/views/enterprises/shop.html.haml
View File

@@ -38,6 +38,10 @@
- if oc_select_options.count > 1
%option{value: "", disabled: "", selected: ""}= t :shopping_oc_select
- content_for :ordercycle_sidebar do
.show-for-large-up.large-4.columns
= render partial: "shopping_shared/order_cycles"
= render partial: "shopping_shared/header"
= render partial: "shopping_shared/tabs"

4
app/views/shopping_shared/_header.html.haml
View File

@@ -10,6 +10,4 @@
= distributor.name
%location= distributor.address.city
- unless defined? hide_oc_selector
.show-for-large-up.large-4.columns
= render partial: "shopping_shared/order_cycles"
= yield :ordercycle_sidebar

7
app/views/spree/orders/edit.html.haml
View File

@@ -16,8 +16,15 @@
- else
= @order.distributor.next_collection_at
- content_for :ordercycle_sidebar do
.show-for-large-up.large-4.columns
= render partial: "shopping_shared/order_cycles"
= render partial: "shopping_shared/header"
.sub-header.show-for-medium-down
= render partial: "shopping_shared/order_cycles"
%fieldset.footer-pad
- if @order.line_items.empty?
%div.row{"data-hook" => "empty_cart"}