Merge branch 'ent_types_frontend' of https://github.com/openfoodfoundation/openfoodnetwork into ent_types_frontend

Conflicts:
	app/assets/javascripts/templates/partials/enterprise_header.html.haml

app/assets/javascripts/templates/partials/enterprise_header.html.haml

@@ -1,12 +1,13 @@
 .highlight
-  .highlight-top 
-    %p.right
-      {{ [enterprise.address.city, enterprise.address.state_name] | printArray}}
-    %h3{"ng-if" => "enterprise.has_shopfront"}
-      %a{"bo-href" => "enterprise.path", "ofn-empties-cart" => "enterprise", bindonce: true}
+  .highlight-top.row
+    .small-12.medium-7.large-8.columns
+      %h3{"ng-if" => "enterprise.has_shopfront"}
+        %a{"bo-href" => "enterprise.path", "ofn-empties-cart" => "enterprise", bindonce: true}
+          %i{"ng-class" => "enterprise.icon_font"}
+          %span {{ enterprise.name }}
+      %h3{"ng-if" => "!enterprise.has_shopfront"}
         %i{"ng-class" => "enterprise.icon_font"}
         %span {{ enterprise.name }}
-    %h3{"ng-if" => "!enterprise.has_shopfront"}
-      %i{"ng-class" => "enterprise.icon_font"}
-      %span {{ enterprise.name }}
-  %img.hero-img{"ng-src" => "{{enterprise.promo_image}}"} 
+    .small-12.medium-5.large-4.columns.text-right.small-only-text-left
+    %p.right
+      {{ [enterprise.address.city, enterprise.address.state_name] | printArray}}

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

@@ -11,12 +11,16 @@
   @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25))
 
 .hero-img
-  border-bottom: 1px solid $disabled-bright
+  outline: 1px solid $disabled-bright
+  border-color: transparent
+  @include box-shadow(none)
   width: 100%
-  min-height: 56px
+  min-height: 80px
   height: inherit
   max-height: 260px
   overflow: hidden
+  @media all and (max-width: 640px)
+    min-height: 68px
 
 .hero-img-small
   background-color: #333

app/assets/stylesheets/darkswarm/mixins.sass

@@ -16,6 +16,20 @@
   -webkit-box-shadow: $box-shadow
   box-shadow: $box-shadow
 
+@mixin elipse-shadow($elipse-shadow)
+  content: ""
+  position: absolute
+  z-index: -1
+  -webkit-box-shadow: $elipse-shadow
+  box-shadow: $elipse-shadow
+  bottom: -12%
+  left: 10%
+  right: 10%
+  width: 80%
+  height: 10%
+  -moz-border-radius: 100%
+  border-radius: 100%
+
 @mixin border-radius($border-radius)
   -webkit-border-radius: $border-radius
   border-radius: $border-radius

app/assets/stylesheets/darkswarm/modal-enterprises.css.sass

@@ -25,19 +25,27 @@
   position: relative
 
 .highlight-top
-  padding: 0.75rem 0.9375rem
-  width: 100%
-  overflow: hidden
+  padding-top: 0.75rem
+  padding-bottom: 0.75rem
   background-color: rgba(255,255,255,0.65)
   position: absolute
   bottom: 0
+  width: 100%
+  border: 0
+  outline: 0
+  @media only screen and (max-width: 640px)
+    padding-top: 0.5rem
+    padding-bottom: 0.35rem  
+
   h3, p
     margin-top: 0
     margin-bottom: 0
     padding-bottom: 0
     line-height: 1
   p
-    line-height: 2
+    line-height: 2.4
+    @media all and (max-width: 640px)
+      line-height: 1.4
 
   h3 a:hover span
     border-bottom: 1px solid $clr-brick-bright

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

@@ -4,8 +4,14 @@
 dialog, .reveal-modal
   border: none
   outline: none
-  padding: 1rem 
+  padding: 30px 20px 0 20px 
+  border-bottom: 30px solid white
   overflow-y: scroll
+  overflow-x: hidden
+  // Not working yet - want a nice gradient shadow when there is overflow - needs JS too
+  // &:after
+  //   @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8))
+
 
   // Reveal.js break point:
   // @media only screen and (max-width: 40.063em)
@@ -25,14 +31,18 @@ dialog, .reveal-modal
     max-height: 80%
 
 .reveal-modal-bg
-  background-color: rgba(0,0,0,0.65)
+  background-color: rgba(0,0,0,0.85)
 
 dialog .close-reveal-modal, .reveal-modal .close-reveal-modal
-  right: 0.4rem
-  background-color: rgba(235,235,235,0.85)
+  right: 0.25rem
+  top: 0.25rem
+  background-color: rgba(205,205,205,0.65)
   text-shadow: none
-  padding: 0.3rem
+  font-size: 2rem
+  padding: 0.45rem
+  color: #666
+  z-index: 9999999
   @include border-radius(999999rem)
   &:hover, &:active, &:focus
-    background-color: rgba(235,235,235,1)
+    background-color: rgba(205,205,205,1)
     color: #333

app/views/home/_hubs.html.haml

@@ -2,16 +2,10 @@
 #hubs.hubs{"ng-controller" => "HubsCtrl"}
   .row
     .small-12.columns
-      %h1 Shop your local area
-      / %div 
-      /   Shop a 
-      /   %ofn-modal{title: "food hub"}
-      /     = render partial: "modals/food_hub"
-      /   from the list below:
+      %h1 Shop in your local area
 
   #active-table-search.row.pad-top
     .small-12.columns
-      / %i.ofn-i_020-search
       %input{type: :text, 
       "ng-model" => "query",
       placeholder: "Search by name or suburb...",