From 469e4a4c87e68ebc29affc63b353611b30b9ccaa Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Tue, 6 Oct 2020 11:22:58 +0100
Subject: [PATCH] Make shops index page usable on mobile

---
 .../stylesheets/darkswarm/hub_node.scss       | 34 ++++++++++++-------
 app/views/shops/_fat.html.haml                |  2 +-
 app/views/shops/_skinny.html.haml             | 10 +++---
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/hub_node.scss b/app/assets/stylesheets/darkswarm/hub_node.scss
index f7e1ac5686..f35713496f 100644
--- a/app/assets/stylesheets/darkswarm/hub_node.scss
+++ b/app/assets/stylesheets/darkswarm/hub_node.scss
@@ -16,6 +16,22 @@
 
     .active_table_row {
       line-height: 1rem;
+
+      @include breakpoint(phablet) {
+        display: inline-block;
+        width: 100%;
+        background-color: rgba($white, 0.75);
+
+        &:not(.open) {
+          .columns:last-child {
+            padding-left: 0;
+          }
+        }
+
+        a.hub {
+          display: inline-block;
+        }
+      }
     }
 
     //Generic text link style
@@ -44,13 +60,6 @@
       }
     }
 
-    //Hub Link
-    @include breakpoint(phablet) {
-      a.hub {
-        display: block;
-      }
-    }
-
     //Hub Name
     span.hub-name-listing {
       font-weight: 700;
@@ -67,11 +76,11 @@
       .active_table_row {
         border: 1px solid transparent;
 
-        @include breakpoint(phablet) {
-          border-color: $clr-brick-light;
+        &:hover, &:active, &:focus {
+          border-color: $clr-brick-light-bright;
         }
 
-        &:hover, &:active, &:focus {
+        @include breakpoint(phablet) {
           border-color: $clr-brick-light-bright;
         }
       }
@@ -165,8 +174,9 @@
         }
 
         @include breakpoint(phablet) {
-          .active_table_row:first-child .skinny-head {
-            background-color: rgba(255, 255, 255, 0.85);
+          .active_table_row:first-child,
+          .active_table_row:last-child, {
+            background-color: rgba($white, 0.75);
           }
         }
       }
diff --git a/app/views/shops/_fat.html.haml b/app/views/shops/_fat.html.haml
index cd5d9c6f45..289b1d3dc0 100644
--- a/app/views/shops/_fat.html.haml
+++ b/app/views/shops/_fat.html.haml
@@ -1,6 +1,6 @@
 .row.active_table_row{"ng-show" => "open()", "ng-click" => "toggle($event)", "ng-class" => "{'open' : open()}"}
   .columns.small-12.fat.text-center{"ng-show" => "open() && shopfront_loading"}
-    %p
+    %p.fullwidth
       %img.spinner.text-center{ src: image_path("spinning-circles.svg") }
 
   .columns.small-12.medium-6.large-5.fat{"ng-show" => "open() && !shopfront_loading"}
diff --git a/app/views/shops/_skinny.html.haml b/app/views/shops/_skinny.html.haml
index 6a67f4eed9..1ae01c1546 100644
--- a/app/views/shops/_skinny.html.haml
+++ b/app/views/shops/_skinny.html.haml
@@ -10,23 +10,23 @@
     %span.margin-top{"ng-bind" => "::hub.address.state_name"}
     %span.margin-top{"ng-if" => "hub.distance != null && hub.distance > 0"} ({{ hub.distance / 1000 | number:0 }} km)
 
-  .columns.small-4.medium-3.large-3.text-right{"ng-if" => "::hub.active"}
+  .columns.small-5.medium-3.large-3.text-right{"ng-if" => "::hub.active"}
     %a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
-      %i.ofn-i_068-shop-reversed
+      %i.ofn-i_068-shop-reversed.show-for-medium-up
       %span.margin-top{ ng: { if: "::current()" } }
         %em= t :hubs_shopping_here
       %span.margin-top{ ng: { if: "::!current()" } }
         %span{"ng-bind" => "::hub.orders_close_at | sensible_timeframe"}
 
-  .columns.small-4.medium-3.large-3.text-right{"ng-if" => "::!hub.active"}
+  .columns.small-5.medium-3.large-3.text-right{"ng-if" => "::!hub.active"}
     %a.hub.open_closed{"ng-href" => "{{::hub.path}}", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}", "ng-class" => "{primary: hub.active, secondary: !hub.active}", "ofn-change-hub" => "hub"}
       %span.margin-top{ ng: { if: "::current()" } }
         %em= t :hubs_shopping_here
       %span.margin-top{ ng: { if: "::!current()" } }
         = t :hubs_orders_closed
-      %i.ofn-i_068-shop-reversed
+      %i.ofn-i_068-shop-reversed.show-for-medium-up
 
-  .columns.small-2.medium-1.large-1.text-right
+  .columns.small-1.medium-1.large-1.text-right
     %span.margin-top
       %i{"ng-class" => "{'ofn-i_005-caret-down' : !open(), 'ofn-i_006-caret-up' : open()}"}