From c060019873f7f90acfa5307f8810d1bee6c4e07d Mon Sep 17 00:00:00 2001
From: Will Marshall <will@willmarshall.me>
Date: Wed, 23 Apr 2014 16:48:53 +1000
Subject: [PATCH] Adding a learn more modal, restructuring partials

---
 .../darkswarm/directives/modal.js.coffee      | 13 ++++++
 .../stylesheets/darkswarm/hubs.css.sass       |  3 ++
 app/views/darkswarm/_hubs.html.haml           | 34 ++++++++++++++++
 app/views/darkswarm/index.html.haml           | 40 ++-----------------
 app/views/modals/_learn_more.html.haml        |  3 ++
 5 files changed, 57 insertions(+), 36 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/modal.js.coffee
 create mode 100644 app/assets/stylesheets/darkswarm/hubs.css.sass
 create mode 100644 app/views/darkswarm/_hubs.html.haml

diff --git a/app/assets/javascripts/darkswarm/directives/modal.js.coffee b/app/assets/javascripts/darkswarm/directives/modal.js.coffee
new file mode 100644
index 0000000000..aa89df309d
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/modal.js.coffee
@@ -0,0 +1,13 @@
+Darkswarm.directive "ofnModal", ($modal)->
+  restrict: 'E'
+  replace: true
+  transclude: true
+  template: "<a>{{title}}</a>"
+
+  link: (scope, elem, attrs, ctrl, transclude)->
+    scope.title = attrs.title
+    scope.cancel = ->
+      scope.modalInstance.dismiss("cancel")
+
+    elem.on "click", ->
+      scope.modalInstance = $modal.open(template: transclude())
diff --git a/app/assets/stylesheets/darkswarm/hubs.css.sass b/app/assets/stylesheets/darkswarm/hubs.css.sass
new file mode 100644
index 0000000000..f8339755e0
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/hubs.css.sass
@@ -0,0 +1,3 @@
+#hubs
+  padding-top: 60px
+  padding-bottom: 100px
diff --git a/app/views/darkswarm/_hubs.html.haml b/app/views/darkswarm/_hubs.html.haml
new file mode 100644
index 0000000000..ad7c6bc293
--- /dev/null
+++ b/app/views/darkswarm/_hubs.html.haml
@@ -0,0 +1,34 @@
+#hubs{"ng-controller" => "HubsCtrl"}
+  :javascript
+    angular.module('Darkswarm').value('hubs', #{render "json/hubs"})
+
+  .row
+    .small-12.columns.text-center
+      %h1 Ready to shop?
+      %p 
+        Select a 
+        %a food hub (modal)
+        from the list below:
+  #hub-search.row
+    .small-9.columns
+      %input{type: :text, 
+      "ng-model" => "query", 
+      placeholder: "Search postcode, suburb or hub name...",
+      "ng-debounce" => "150",
+      "ofn-disable-enter" => true}
+    .small-3.columns.advanced
+      Advanced search
+
+  .row{bindonce: true}
+    .small-12.columns
+      .active_table
+        %hub.row{"ng-repeat" => "hub in filteredHubs = (hubs | filterHubs:query)",
+        "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !hub.active}",
+        "ng-controller" => "HubNodeCtrl",
+        id: "{{hub.path}}"} 
+          .small-12.columns
+            = render partial: 'darkswarm/skinny'
+            = render partial: 'darkswarm/fat'
+      .row{"ng-show" => "filteredHubs.length == 0"}
+        .columns.small-12.text-center
+          No results
diff --git a/app/views/darkswarm/index.html.haml b/app/views/darkswarm/index.html.haml
index 17faff2d1f..b41a133186 100644
--- a/app/views/darkswarm/index.html.haml
+++ b/app/views/darkswarm/index.html.haml
@@ -3,40 +3,8 @@
     .small-12.text-center.columns
       %h1 Open Food Network
       %h2 An open marketplace that makes it easy to find, buy, sell and move sustainable local food.
-      %a Learn more (modal)
+      
+      %ofn-modal{title: "Learn more"}
+        = render partial: "modals/learn_more"
 
-
-#hubs{"ng-controller" => "HubsCtrl"}
-  :javascript
-    angular.module('Darkswarm').value('hubs', #{render "json/hubs"})
-
-  .row
-    .small-12.columns.text-center
-      %h1 Ready to shop?
-      %p 
-        Select a 
-        %a food hub (modal)
-        from the list below:
-  #hub-search.row
-    .small-9.columns
-      %input{type: :text, 
-      "ng-model" => "query", 
-      placeholder: "Search postcode, suburb or hub name...",
-      "ng-debounce" => "150",
-      "ofn-disable-enter" => true}
-    .small-3.columns.advanced
-      Advanced search
-
-  .row{bindonce: true}
-    .small-12.columns
-      .active_table
-        %hub.row{"ng-repeat" => "hub in filteredHubs = (hubs | filterHubs:query)",
-        "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !hub.active}",
-        "ng-controller" => "HubNodeCtrl",
-        id: "{{hub.path}}"} 
-          .small-12.columns
-            = render partial: 'darkswarm/skinny'
-            = render partial: 'darkswarm/fat'
-      .row{"ng-show" => "filteredHubs.length == 0"}
-        .columns.small-12.text-center
-          No results
+= render partial: "darkswarm/hubs"
diff --git a/app/views/modals/_learn_more.html.haml b/app/views/modals/_learn_more.html.haml
index e69de29bb2..4b543e8f5c 100644
--- a/app/views/modals/_learn_more.html.haml
+++ b/app/views/modals/_learn_more.html.haml
@@ -0,0 +1,3 @@
+%h3 I'm a modal!
+CONTENT!
+%a.close-reveal-modal{"ng-click" => "cancel()"} &#215;