raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-05 22:26:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5013 from openfoodfoundation/mobile-ux-3

Browse Source 
Merge mobile-ux-3 branch into master
This commit is contained in:
Maikel
2020-03-19 11:51:41 +11:00
committed by GitHub
parent 2590745b2e 6db0421347
commit 27d8951add
21 changed files with 316 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/images/black-caret.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
xml:space="preserve"
enable-background="new 0 0 6 3"
viewBox="0 0 6 3"
height="3px"
width="24px"
y="0px"
x="12px"
version="1.1"><metadata
id="metadata10"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs8" /><polygon
style="fill:#000000;fill-opacity:1"
id="polygon2"
points="5.992,0 2.992,3 -0.008,0 " /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 832 B

23
app/assets/images/white-caret.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
xml:space="preserve"
enable-background="new 0 0 6 3"
viewBox="0 0 6 3"
height="3px"
width="24px"
y="0px"
x="12px"
version="1.1"><metadata
id="metadata10"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs8" /><polygon
style="fill:#ffffff;fill-opacity:1"
id="polygon2"
points="5.992,0 2.992,3 -0.008,0 " /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 832 B

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

@@ -2,7 +2,7 @@
.darkswarm navigation {
display: block;
background: #f7f7f7;
background: $white;
distributor.details {
box-sizing: border-box;
@@ -10,9 +10,11 @@
min-height: 150px;
padding: 30px 0 20px 0;
position: relative;
select {
width: 200px;
}
img {
display: block;
height: 100px;
@@ -31,72 +33,158 @@
#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;
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;
ordercycle {
text-align: right;
float: right;
p {
max-width: 400px;
.order-cycle-select {
border: 1px solid $red-500;
.select-label {
background-color: rgba($red-500, 0.5);
}
h4 i {
margin-right: 0.3rem;
select {
background-color: $white;
background-image: url('/assets/black-caret.svg');
color: $grey-500;
font-style: italic;
}
@media all and (max-width: 640px) {
float: left;
clear: left;
text-align: left;
padding: 12px 10px;
width: 100%;
margin-top: 10px;
background: #e5e5e5;
p {
max-width: 100%;
}
}
form.custom {
text-align: right;
& > strong {
line-height: 2.5;
font-size: 1.29em;
padding-right: 14px;
}
select {
width: inherit;
display: inline-block;
border: 1px #999;
color: #666;
font-size: 1em;
margin-bottom: 0;
padding: 8px 20px 8px 12px;
@media all and (max-width: 768px) {
font-size: 0.875em;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
font-size: 16px;
}
}
}
closing {
@include headingFont;
color: black;
font-size: 1.5em;
}
}
p {
max-width: 400px;
}
h4 i {
margin-right: 0.3rem;
}
@media all and (max-width: 1024px) {
float: none;
padding: 0.5em 1em;
width: 100%;
margin-top: 0;
display: inline-block;
border-radius: 0;
position: relative;
right: 0;
height: auto;
p {
max-width: 100%;
}
}
@media all and (max-width: 768px) {
padding: 0.5em 1em 0.75em;
}
form.custom {
text-align: center;
}
.order-cycle-select {
border: 1px solid $teal-300;
display: inline-block;
font-size: 1em;
border-radius: 0.25em;
.select-label {
background-color: rgba($teal-300, 0.5);
display: inline-block;
border-radius: 0.25em 0 0 0.25em;
float: left;
font-size: 1em;
line-height: 1.5em;
padding: 0.5em 0.75em;
height: 2.35em;
span {
width: max-content;
display: block;
padding-bottom: 12px;
@media all and (max-width: 768px) {
font-size: 1.2em;
padding-bottom: 10px;
}
span {
@media all and (max-width: 768px) {
font-size: 0.875em;
}
}
}
}
select {
width: inherit;
display: inline-block;
color: $white;
background-color: transparent;
border: 0;
margin-bottom: 0;
font-size: 1em;
line-height: 1.5em;
padding: 0.5em 1.25em 0.5em 0.75em;
height: 2.35em;
background-image: url('/assets/white-caret.svg');
background-size: 30px auto;
border-radius: 0 0.25em 0.25em 0;
min-width: 13em;
@media all and (max-width: 480px) {
width: 100%;
}
}
@media all and (max-width: 1024px) {
float: none;
margin-right: 1em;
}
@media all and (max-width: 768px) {
float: none;
}
@media all and (max-width: 480px) {
display: flex;
}
}
closing {
@include headingFont;
color: $white;
font-size: 1.25rem;
display: block;
padding: 0 0 12px;
@media all and (max-width: 1024px) {
float: none;
display: inline-block;
padding: 0.2em 0 0;
font-size: 1.2em;
margin-right: 1em;
}
@media all and (max-width: 768px) {
float: none;
padding: 0 0 10px;
}
span {
@media all and (max-width: 768px) {
font-size: 0.875em;
}
}
}

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

@@ -38,3 +38,25 @@ $light-grey: #ddd;
$light-grey-transparency: rgba(0, 0, 0, .1);
$black: #000;
$white: #fff;
$grey-400: #bbb;
$grey-500: #999;
$grey-600: #777;
$grey-700: #555;
$grey-800: #333;
$teal-300: #80d3df;
$teal-400: #4cb5c5;
$teal-500: #0096ad;
$orange-400: #ff9466;
$orange-500: #f27052;
$orange-600: #d7583a;
$red-500: #e54e47;
$red-700: #c1122b;
$social-facebook: #3b5998;
$social-instagram: #e1306c;
$social-linkedin: #0e76a8;
$social-twitter: #00acee;

16
app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
View File

@@ -111,6 +111,22 @@
i {
font-size: 2rem;
&.facebook {
color: $social-facebook;
}
&.twitter {
color: $social-twitter;
}
&.linkedin {
color: $social-linkedin;
}
&.instagram {
color: $social-instagram;
}
}
a {

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

@@ -6,15 +6,20 @@
.tabset-ctrl#shop-tabs {
.tab-buttons {
background: url("/assets/gray_jean.png") top left repeat;
@include box-shadow(inset 0 2px 3px 0 rgba(0, 0, 0, 0.15));
color: $dark-grey;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
.row:first-child {
.columns {
display: flex;
justify-content: space-between;
@media all and (max-width: 1024px) {
display: table;
width: 100%;
}
@media all and (max-width: 480px) {
padding: 0;
}
}
}
@@ -27,8 +32,7 @@
>a {
outline: none;
display: block;
background-color: #efefef;
color: #222;
color: $grey-500;
font-family: "Oswald", sans-serif;
}
@@ -39,12 +43,11 @@
text-transform: uppercase;
line-height: 1;
font-size: 0.875em;
text-shadow: 0 -1px 1px #ffffff;
padding: 1em 2em;
border: none;
&:hover, &:focus, &:active {
color: $clr-brick-bright;
color: $teal-500;
}
&, &:hover {
@@ -53,17 +56,21 @@
@media all and (max-width: 640px) {
padding: 0.35em 0 0.65em 0;
text-shadow: none;
}
}
&.selected {
border-bottom: 4px solid $clr-brick;
border-bottom: 4px solid $teal-500;
a {
color: $clr-brick;
color: $teal-500;
}
}
@media all and (max-width: 1024px) {
display: table-cell;
width: auto;
}
}
// content revealed in accordion
@@ -75,7 +82,15 @@
.content {
padding: 1.25em 0;
background-color: $white;
background-color: transparent;
a {
color: $orange-500;
&:hover {
color: $orange-600;
}
}
img {
margin: 0px 0px 0px 40px;
@@ -83,6 +98,7 @@
h5 {
margin-bottom: 1em;
font-family: $body-font;
}
p {
@@ -100,13 +116,9 @@
.header {
text-align: center;
text-transform: uppercase;
color: $dark-grey;
border-bottom: 1px solid $disabled-dark;
color: $grey-600;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
padding-bottom: 0.25rem;
font-size: 0.875rem;
margin-bottom: 2px;
}
}
}

12
app/assets/stylesheets/darkswarm/typography.css.scss
View File

@@ -9,7 +9,7 @@
}
$headingFont: "Oswald";
$bodyFont: "Roboto";
$body-font: "Roboto", Arial, sans-serif;
body {
@include bodyFont;
@@ -43,7 +43,7 @@ small, .small {
.text-small {
font-size: 0.875rem;
margin-bottom: 0.5rem;
font-family: $bodyFont;
font-family: $body-font;
&, & * {
font-size: 0.875rem;
@@ -52,12 +52,12 @@ small, .small {
.text-normal {
font-weight: 400;
font-family: $bodyFont;
font-family: $body-font;
}
.text-skinny {
font-weight: 300;
font-family: $bodyFont;
font-family: $body-font;
}
.word-wrap {
@@ -114,9 +114,9 @@ ul.bullet-list, ul.check-list {
}
li:before {
content: "";
content: "•";
font-family: "OFN";
margin-left: -1.25em;
margin: 0 0.25em 0 -1.25em;
display: inline-block;
font-weight: normal;
font-style: normal;

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

@@ -10,7 +10,7 @@
@include border-radius(0.5em);
font-family: $bodyFont;
font-family: $body-font;
background-color: transparent;
border: 2px solid rgba(200, 200, 200, 1);
color: #999;
@@ -63,7 +63,7 @@
}
.button.primary, button.primary {
font-family: $bodyFont;
font-family: $body-font;
background: $clr-brick;
color: white;
}

4
app/helpers/shop_helper.rb
View File

@@ -8,6 +8,10 @@ module ShopHelper
end
end
def oc_select_options
@order_cycles.map { |oc| { time: pickup_time(oc), id: oc.id } }
end
def require_customer?
current_distributor.require_login? && !user_is_related_to_distributor?
end

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

@@ -19,22 +19,24 @@
- content_for :order_cycle_form do
%div{"ng-controller" => "OrderCycleChangeCtrl", "ng-cloak" => true}
%closing{"ng-if" => "OrderCycle.selected()"}
= t :enterprises_next_closing
%strong {{ OrderCycle.orders_close_at() | date_in_words }}
%closing
%div{"ng-if" => "OrderCycle.selected()"}
= t :enterprises_next_closing
%strong {{ OrderCycle.orders_close_at() | date_in_words }}
%div{"ng-if" => "!OrderCycle.selected()"}
= t :enterprises_choose
%span
= t :enterprises_ready_for
/ Will this label should be a variable to reflect 'Ready for pickup / delivery' as appropriate
%select.avenir#order_cycle_id{"ng-model" => "order_cycle.order_cycle_id",
"ofn-change-order-cycle" => true,
"disabled" => require_customer?,
"ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}",
"popover-placement" => "left", "popover" => t(:enterprises_choose), "popover-trigger" => "openTrigger"}
.order-cycle-select
.select-label
%span= t :enterprises_ready_for
%select.select2.avenir#order_cycle_id{"ng-model" => "order_cycle.order_cycle_id",
"ofn-change-order-cycle" => true,
"disabled" => require_customer?,
"ng-options" => "oc.id as oc.time for oc in #{oc_select_options.to_json}"}
- if oc_select_options.count > 1
%option{value: "", disabled: "", selected: ""}= t :shopping_oc_select
= render partial: "shopping_shared/header"
= render partial: "shopping_shared/tabs"

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

@@ -2,14 +2,13 @@
%navigation
%distributor.details.row
.small-12.medium-6.large-6.columns
.small-12.medium-12.large-8.columns
#distributor_title
- if distributor.logo?
%img.left{src: distributor.logo.url(:thumb)}
%h3
= distributor.name
%location= distributor.address.city
/ Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented
.small-12.medium-6.large-6.columns
.show-for-large-up.large-4.columns
= render partial: "shopping_shared/order_cycles"

2
app/views/shopping_shared/_last_order_cycle.html.haml
View File

@@ -1,2 +1,4 @@
- if most_recently_closed = OrderCycle.most_recently_closed_for(@distributor)
(
= t :shopping_oc_last_closed, distance_of_time: distance_of_time_in_words_to_now(most_recently_closed.orders_close_at)
)

2
app/views/shopping_shared/_next_order_cycle.html.haml
View File

@@ -1,2 +1,4 @@
- if next_oc = OrderCycle.first_opening_for(@distributor)
(
= t :shopping_oc_next_open, distance_of_time: distance_of_time_in_words_to_now(next_oc.orders_open_at)
)

6
app/views/shopping_shared/_order_cycles.html.haml
View File

@@ -1,8 +1,8 @@
- content_for :injection_data do
= inject_current_order_cycle
%ordercycle{"ng-controller" => "OrderCycleCtrl"}
- unless no_open_order_cycles?
- unless no_open_order_cycles?
%ordercycle{"ng-controller" => "OrderCycleCtrl", "ng-cloak" => true,
"ng-class" => "{'requires-selection': !OrderCycle.selected()}"}
%form.custom
= yield :order_cycle_form

7
app/views/shopping_shared/_tabs.html.haml
View File

@@ -6,8 +6,9 @@
.tabset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
.tab-buttons
.row
- shop_tabs.each do |tab|
.tab{ id: "tab_#{tab[:name]}", name: tab[:name] }
%a{ href: 'javascript:void(0)' }=tab[:title]
.columns.small-12.large-8
- shop_tabs.each do |tab|
.tab{ id: "tab_#{tab[:name]}", name: tab[:name] }
%a{ href: 'javascript:void(0)' }=tab[:title]
.tab-view

13
app/views/shopping_shared/tabs/_contact.html.haml
View File

@@ -6,7 +6,7 @@
%div.center
.header
= t :shopping_contact_address
%strong=current_distributor.name
%span= current_distributor.name
%p
= current_distributor.address.address1
- unless current_distributor.address.address2.blank?
@@ -44,22 +44,19 @@
- if current_distributor.twitter.present?
%span
%a{href: "http://twitter.com/#{current_distributor.twitter}", target: "_blank" }
%i.ofn-i_041-twitter
%i.twitter.ofn-i_041-twitter
- if current_distributor.facebook.present?
%span
%a{href: "http://#{current_distributor.facebook}", target: "_blank" }
%i.ofn-i_044-facebook
/ = current_distributor.facebook
%i.facebook.ofn-i_044-facebook
- if current_distributor.linkedin.present?
%span
%a{href: "http://#{current_distributor.linkedin}", target: "_blank" }
%i.ofn-i_042-linkedin
/ = current_distributor.linkedin
%i.linkedin.ofn-i_042-linkedin
- if current_distributor.instagram.present?
%span
%a{href: "http://instagram.com/#{current_distributor.instagram}", target: "_blank" }
%i.ofn-i_043-instagram
/ = current_distributor.instagram
%i.instagram.ofn-i_043-instagram

4
app/views/shopping_shared/tabs/_groups.html.haml
View File

@@ -1,12 +1,12 @@
%script{ type: "text/ng-template", id: "shop/groups.html" }
.content
.row
.small-12.large-4.columns
.small-12.columns
- if current_distributor.groups.length > 0
%h5
=current_distributor.name
= t :shopping_groups_part_of
%ul.bullet-list
%ul.bullet-list.small-block-grid-1.medium-block-grid-2.large-block-grid-3
- for group in current_distributor.groups
%li
%a{href: main_app.groups_path + "/#{group.permalink}"}

3
app/views/shopping_shared/tabs/_home.html.haml
View File

@@ -1,3 +1,6 @@
%script{ type: "text/ng-template", id: "shop/home.html" }
.order-cycle-bar.hide-for-large-up
= render partial: "shopping_shared/order_cycles"
.content
= render partial: 'shop/messages'

2
app/views/shopping_shared/tabs/_producers.html.haml
View File

@@ -4,7 +4,7 @@
.small-12.columns
%h5
= t :shopping_producers_of_hub, hub: '{{ shopfront.name }}'
%ul.small-block-grid-2.large-block-grid-4
%ul.small-block-grid-1.medium-block-grid-2.large-block-grid-3
%li{"ng-repeat" => "enterprise in shopfront.producers"}
%enterprise-modal
%i.ofn-i_036-producers

5
app/views/shopping_shared/tabs/_shop.html.haml
View File

@@ -1,4 +1,7 @@
%script{ type: "text/ng-template", id: "shop/shop.html" }
.order-cycle-bar.hide-for-large-up
= render partial: "shopping_shared/order_cycles"
.row
.small-12.columns
- if no_open_order_cycles?
@@ -8,10 +11,8 @@
= t :shopping_oc_closed
%small
%em
(
= render partial: "shopping_shared/next_order_cycle"
= render partial: "shopping_shared/last_order_cycle"
)
%p
= t :shopping_oc_closed_description

1
config/locales/en.yml
View File

@@ -1592,6 +1592,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
shopping_oc_closed_description: "Please wait until the next cycle opens (or contact us directly to see if we can accept any late orders)"
shopping_oc_last_closed: "The last cycle closed %{distance_of_time} ago"
shopping_oc_next_open: "The next cycle opens in %{distance_of_time}"
shopping_oc_select: "Select..."
shopping_tabs_home: "Home"
shopping_tabs_shop: "Shop"
shopping_tabs_about: "About"