Merge branch 'group-pages' of github.com:openfoodfoundation/openfoodnetwork into group-pages

Conflicts:
	app/views/groups/show.html.haml

app/assets/stylesheets/darkswarm/groups.css.sass

@@ -20,28 +20,55 @@
     vertical-align: middle
 
 #group-page
-  @media screen and (min-width: 768px)
-    .group-logo
-      max-height: 100px
+  .group-logo, .group-header
+    text-align: center   
   .group-name
     border-bottom: 1px solid #ccc
-  .producers
-    background-image: none
+  @media screen and (min-width: 768px)
+    .group-logo, .group-header
+      text-align: left
+    .group-logo img
+      max-height: 100px
+
+  // Tabs
   .tabs dd a
+    padding: 0.35rem 0.5rem
+    font-size: 0.75rem
     border: none
-    // border-bottom: 1px solid grey
     margin-bottom: -2px
     margin-right: 2px
+  @media screen and (min-width: 400px)
+    .tabs dd a
+      padding: 0.45rem 0.75rem
+      font-size: 0.875rem
+  @media screen and (min-width: 768px)
+    .tabs dd a
+      padding: 1rem 2rem
+      font-size: 1rem
   .tabs dd.active a
     margin-bottom: -1px
     border-top: 1px solid $light-grey
     border-left: 1px solid $light-grey
     border-right: 1px solid $light-grey
     border-bottom: 1px solid white
-
   .tabs-content
     border-top: 1px solid $light-grey
     border-left: 1px solid $light-grey
     border-right: 1px solid $light-grey
     border-bottom: 1px solid $light-grey
-    padding: 1.5em
+    padding: 1.5em
+
+  // Producers tab
+  .producers
+    background-image: none
+    .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer
+      color: $clr-turquoise
+  // Hubs tab
+  .hubs
+    background-image: none
+    padding-top: 0
+    padding-bottom: 0
+
+// .hubs .active_table .active_table_node.inactive.closed a, .hubs .active_table .active_table_node.inactive.closed a *, .hubs .active_table .active_table_node.inactive.open a, .hubs .active_table .active_table_node.inactive.open a *
+
+    

app/views/groups/show.html.haml

@@ -5,15 +5,15 @@
         .small-12.columns
           %img{"src" => @group.promo_image}
       .row
-        .small-12.medium-2.large-2.columns.pad-top
-          %img.group-logo{"src" => @group.logo}
-        .small-12.medium-10.large-10.columns.pad-top
+        .small-12.medium-2.large-2.columns.group-logo.pad-top
+          %img{"src" => @group.logo}
+        .small-12.medium-10.large-10.columns.group-header.pad-top
           %h2.group-name= @group.name
           %p= @group.description
 
   .small-12.columns.pad-top
     .row.pad-top
-      .small-12.medium-8.columns
+      .small-12.large-8.columns
         %div{"ng-controller" => "TabsCtrl"}
           %tabset
             %tab{heading: 'Map',
@@ -35,9 +35,9 @@
             %tab{heading: 'Our producers',
                 active: "active(\'producers\')",
                 select: "select(\'producers\')"}
-              .producers.pad-top{"ng-controller" => "GroupEnterprisesCtrl"}
+              .producers{"ng-controller" => "GroupEnterprisesCtrl"}
                 .row
-                  .small-12.columns.pad-top
+                  .small-12.columns
                     %h1 Our Producers
                 = render partial: "shared/components/enterprise_search"
                 -# TODO: find out why this is not working
@@ -61,7 +61,7 @@
             %tab{heading: 'Our hubs',
                 active: "active(\'hubs\')",
                 select: "select(\'hubs\')"}
-              #hubs.hubs{"ng-controller" => "GroupEnterprisesCtrl"}
+              .hubs{"ng-controller" => "GroupEnterprisesCtrl"}
                 .row
                   .small-12.columns
                     %h1 Our Hubs
@@ -83,7 +83,7 @@
 
                       = render partial: 'shared/components/enterprise_no_results'
       
-      .small-12.medium-4.columns
+      .small-12.large-4.columns
         = render partial: 'contact'
   /       %h4 Contact us
   /       - if @group.phone