From b1b80a1e39ddb54a6bdfcadcd4a5ceac8e9bd208 Mon Sep 17 00:00:00 2001
From: Will Marshall <will@willmarshall.me>
Date: Thu, 5 Jun 2014 16:49:01 +1000
Subject: [PATCH] Automatically resizing to fit

---
 .../darkswarm/controllers/map_controller.js.coffee     |  1 -
 .../darkswarm/directives/fill_vertical.js.coffee       | 10 ++++++++++
 app/assets/stylesheets/darkswarm/map.css.sass          |  6 ++++--
 app/views/map/index.html.haml                          |  9 +++++----
 4 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee

diff --git a/app/assets/javascripts/darkswarm/controllers/map_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/map_controller.js.coffee
index 383aedcee3..7e47c60ded 100644
--- a/app/assets/javascripts/darkswarm/controllers/map_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/map_controller.js.coffee
@@ -6,4 +6,3 @@ Darkswarm.controller "MapCtrl", ($scope, MapConfiguration, OfnMap)->
       longitude: 144.743663
     zoom: 8
     styles: MapConfiguration.options
-
diff --git a/app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee b/app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee
new file mode 100644
index 0000000000..a8a2fbeebc
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee
@@ -0,0 +1,10 @@
+Darkswarm.directive "fillVertical", ($window)->
+  restrict: 'A'
+
+  link: (scope, element, attrs)->
+    setSize = ->
+      element.css "height", ($window.innerHeight - element.offset().top)
+    setSize()
+
+    angular.element($window).bind "resize", ->
+      setSize()
diff --git a/app/assets/stylesheets/darkswarm/map.css.sass b/app/assets/stylesheets/darkswarm/map.css.sass
index fa51344f0f..ba824b3cd0 100644
--- a/app/assets/stylesheets/darkswarm/map.css.sass
+++ b/app/assets/stylesheets/darkswarm/map.css.sass
@@ -1,5 +1,7 @@
 // Place all the styles related to the map controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-.angular-google-map-container
-  height: 600px
+.ofn-map-container
+  map, .angular-google-map-container, google-map, .angular-google-map
+    display: block
+    height: 100%
diff --git a/app/views/map/index.html.haml b/app/views/map/index.html.haml
index efc1752baf..771c9d3ca4 100644
--- a/app/views/map/index.html.haml
+++ b/app/views/map/index.html.haml
@@ -3,10 +3,11 @@
 
 = inject_json "enterprisesForMap" , "enterprises_for_map", collection: @enterprises
 
-%map{"ng-controller" => "MapCtrl"}
-  %google-map{center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
+.ofn-map-container{"fill-vertical" => true}
+  %map{"ng-controller" => "MapCtrl"}
+    %google-map{center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
 
-    %markers{models: "OfnMap.enterprises", fit: "true", 
-    coords: "'self'", icon: "'icon'", click: "'reveal'"} 
+      %markers{models: "OfnMap.enterprises", fit: "true", 
+      coords: "'self'", icon: "'icon'", click: "'reveal'"}