From c3283adcf5201146d41c701b735d6f2f260c13a7 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Wed, 25 Mar 2020 14:25:04 +0100
Subject: [PATCH] Show full-width ordercycle subheader on tablet and below

---
 .../darkswarm/_shop-navigation.css.scss       | 39 ++++++++++++-------
 .../darkswarm/distributor_header.css.scss     |  2 +
 app/views/checkout/edit.html.haml             |  3 ++
 app/views/spree/orders/edit.html.haml         |  3 ++
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index c3d16aa4d1..70ddb8c652 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -7,7 +7,7 @@ ordercycle {
   width: 100%;
   border-radius: 0.5em 0.5em 0 0;
   margin-top: 1em;
-  padding: 1em 1em 0;
+  padding: 1em 1.25em 0;
 
   p {
     max-width: 400px;
@@ -99,20 +99,7 @@ ordercycle {
     color: $grey-800;
     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;
-    }
+    padding: 0.5em 0 0.5em;
 
     span {
       @media all and (max-width: 768px) {
@@ -147,6 +134,20 @@ shop ordercycle {
 
   closing {
     color: $white;
+    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;
+    }
   }
 
   form.custom {
@@ -161,3 +162,11 @@ shop navigation ordercycle {
   position: absolute;
   right: 1em;
 }
+
+.sub-header {
+  form {
+    p {
+      margin-bottom: 0.75em;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
index 5e402580aa..1dbe38641d 100644
--- a/app/assets/stylesheets/darkswarm/distributor_header.css.scss
+++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
@@ -9,6 +9,8 @@ section {
 .darkswarm navigation {
   display: block;
   background: $white;
+  position: relative;
+  z-index: 2;
 
   distributor.details {
     box-sizing: border-box;
diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml
index 35b9269a0f..9d85b3e8df 100644
--- a/app/views/checkout/edit.html.haml
+++ b/app/views/checkout/edit.html.haml
@@ -20,6 +20,9 @@
 
   = 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.columns
diff --git a/app/views/spree/orders/edit.html.haml b/app/views/spree/orders/edit.html.haml
index e1ded2b7a8..f654cfebb1 100644
--- a/app/views/spree/orders/edit.html.haml
+++ b/app/views/spree/orders/edit.html.haml
@@ -22,6 +22,9 @@
 
   = 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"}