diff --git a/app/assets/images/black-caret.svg b/app/assets/images/black-caret.svg
new file mode 100644
index 0000000000..818b7411a2
--- /dev/null
+++ b/app/assets/images/black-caret.svg
@@ -0,0 +1,23 @@
+
+
\ No newline at end of file
diff --git a/app/assets/images/white-caret.svg b/app/assets/images/white-caret.svg
new file mode 100644
index 0000000000..eed771fc14
--- /dev/null
+++ b/app/assets/images/white-caret.svg
@@ -0,0 +1,23 @@
+
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index bd0580958f..fd08599222 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -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;
}
}
}
diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss
index acf0bf07d8..55401e0f24 100644
--- a/app/assets/stylesheets/darkswarm/branding.css.scss
+++ b/app/assets/stylesheets/darkswarm/branding.css.scss
@@ -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;
diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
index 4f66a180c3..5d356028f8 100644
--- a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
+++ b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss
@@ -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 {
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index 135178cab8..40007e2b6a 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -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;
}
}
}
diff --git a/app/assets/stylesheets/darkswarm/typography.css.scss b/app/assets/stylesheets/darkswarm/typography.css.scss
index 0ac7cbb673..f95de26a89 100644
--- a/app/assets/stylesheets/darkswarm/typography.css.scss
+++ b/app/assets/stylesheets/darkswarm/typography.css.scss
@@ -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;
diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss
index 529fb6e48b..6dc4d95d3b 100644
--- a/app/assets/stylesheets/darkswarm/ui.css.scss
+++ b/app/assets/stylesheets/darkswarm/ui.css.scss
@@ -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;
}
diff --git a/app/helpers/shop_helper.rb b/app/helpers/shop_helper.rb
index f2d397b654..29cb11b9bf 100644
--- a/app/helpers/shop_helper.rb
+++ b/app/helpers/shop_helper.rb
@@ -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
diff --git a/app/views/enterprises/shop.html.haml b/app/views/enterprises/shop.html.haml
index 5498ca3d0a..e08625d0df 100644
--- a/app/views/enterprises/shop.html.haml
+++ b/app/views/enterprises/shop.html.haml
@@ -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"
diff --git a/app/views/shopping_shared/_header.html.haml b/app/views/shopping_shared/_header.html.haml
index af28612ded..03661a22ea 100644
--- a/app/views/shopping_shared/_header.html.haml
+++ b/app/views/shopping_shared/_header.html.haml
@@ -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"
diff --git a/app/views/shopping_shared/_last_order_cycle.html.haml b/app/views/shopping_shared/_last_order_cycle.html.haml
index ca474fadd6..8bbe9d7411 100644
--- a/app/views/shopping_shared/_last_order_cycle.html.haml
+++ b/app/views/shopping_shared/_last_order_cycle.html.haml
@@ -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)
+ )
diff --git a/app/views/shopping_shared/_next_order_cycle.html.haml b/app/views/shopping_shared/_next_order_cycle.html.haml
index 04f63fdcad..668493bab3 100644
--- a/app/views/shopping_shared/_next_order_cycle.html.haml
+++ b/app/views/shopping_shared/_next_order_cycle.html.haml
@@ -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)
+ )
diff --git a/app/views/shopping_shared/_order_cycles.html.haml b/app/views/shopping_shared/_order_cycles.html.haml
index 6fab77ffe9..24148411fe 100644
--- a/app/views/shopping_shared/_order_cycles.html.haml
+++ b/app/views/shopping_shared/_order_cycles.html.haml
@@ -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
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 8e07d4b993..434c5070a2 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -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
diff --git a/app/views/shopping_shared/tabs/_contact.html.haml b/app/views/shopping_shared/tabs/_contact.html.haml
index 2091779f09..df487609bd 100644
--- a/app/views/shopping_shared/tabs/_contact.html.haml
+++ b/app/views/shopping_shared/tabs/_contact.html.haml
@@ -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
diff --git a/app/views/shopping_shared/tabs/_groups.html.haml b/app/views/shopping_shared/tabs/_groups.html.haml
index 9846fd5e3a..59026e1718 100644
--- a/app/views/shopping_shared/tabs/_groups.html.haml
+++ b/app/views/shopping_shared/tabs/_groups.html.haml
@@ -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}"}
diff --git a/app/views/shopping_shared/tabs/_home.html.haml b/app/views/shopping_shared/tabs/_home.html.haml
index c02d64692e..827ace7283 100644
--- a/app/views/shopping_shared/tabs/_home.html.haml
+++ b/app/views/shopping_shared/tabs/_home.html.haml
@@ -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'
diff --git a/app/views/shopping_shared/tabs/_producers.html.haml b/app/views/shopping_shared/tabs/_producers.html.haml
index e80b681eb9..1a982851d1 100644
--- a/app/views/shopping_shared/tabs/_producers.html.haml
+++ b/app/views/shopping_shared/tabs/_producers.html.haml
@@ -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
diff --git a/app/views/shopping_shared/tabs/_shop.html.haml b/app/views/shopping_shared/tabs/_shop.html.haml
index 7352cd0a3b..be547535ca 100644
--- a/app/views/shopping_shared/tabs/_shop.html.haml
+++ b/app/views/shopping_shared/tabs/_shop.html.haml
@@ -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
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 412dc970cd..804ccbbcef 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -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"