Merge fullscreen_map feature

4 files changed, 59 insertions, 4 deletions

diff --git a/app/assets/javascripts/tools.coffee b/app/assets/javascripts/tools.coffee
index b30eb6f15..9274e57e9 100644
--- a/app/assets/javascripts/tools.coffee
+++ b/app/assets/javascripts/tools.coffee
@@ -1,6 +1,29 @@
 (($) ->
   $ ->
     $('.ce-hide').removeClass 'ce-hide'
+    $('#map').before('<button id="ce-SidebarNavBlock" class="hide"><i class="fa fa-bars"></i></button>')
+    $('[data-ce-action]').click ->
+      action = $(this).data('ce-action')
+      id = $(this).data('ce-id')
+      $map = $('#'+id)
+      if (action == 'map-fullscreen')
+        if $map.hasClass('ce-isExpanded')
+          $map.removeClass('ce-isExpanded')
+          $map.css('width', '')
+          $map.css('height', '')
+        else
+          offset_top = $map.offset().top + 2
+          height = $(window).height() - offset_top
+          $map.addClass('ce-isExpanded')
+          $map.css('height', height).css('width', '100%')
+        $('#sidebar').toggleClass('hide')
+        $('#sidebar').toggleClass('ce-SidebarFloatBlock')
+        $('#ce-SidebarNavBlock').toggleClass('hide')
+        $map.closest('.col-md-9, .col-md-12').toggleClass('col-md-9 col-md-12')
+        $map.find('i').toggleClass('fa-expand fa-compress')
+        map.updateSize()
+      $('#ce-SidebarNavBlock').click ->
+        $('.ce-SidebarFloatBlock').toggleClass('hide')
     return
   return
 ) jQuery
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss
index aac5846c5..cd1cea37e 100644
--- a/app/assets/stylesheets/main/layout.scss
+++ b/app/assets/stylesheets/main/layout.scss
@@ -22,6 +22,7 @@ ol.breadcrumb{
 }
 
 #middle{
+    position: relative;
     min-height: 500px;
     -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
     box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
@@ -41,7 +42,15 @@ ol.breadcrumb{
         height: 100%;
         padding-top: 20px;
         border-left: 1px solid $gray-lighter;
-        
+
+        &.ce-SidebarFloatBlock {
+          position: absolute;
+          height: auto;
+          right: 0;
+          background-color: #fff;
+          top: 45px;
+        }
+
         label {
             color: #555555;
             font-weight: normal;
diff --git a/app/assets/stylesheets/vendor/map_layers.scss b/app/assets/stylesheets/vendor/map_layers.scss
index 835417ddc..70394ac57 100644
--- a/app/assets/stylesheets/vendor/map_layers.scss
+++ b/app/assets/stylesheets/vendor/map_layers.scss
@@ -3,8 +3,31 @@ p.after_map {
 }
 
 #map {
+    position: relative;
     float: right;
     width: 400px;
     height: 400px;
-    border: 1px solid gray; 
-}
\ No newline at end of file
+    border: 1px solid gray;
+    margin-bottom: 20px !important;
+}
+.ce-MapExpandBlock {
+  position: absolute;
+  top: -22px;
+  background-color: $brand-primary;
+  border: none;
+  height: 21px;
+  right: -1px;
+  color: white;
+}
+#ce-SidebarNavBlock {
+  position: absolute;
+  top: 0;
+  right: 15px;
+  font-size: 20px;
+  height: 35px;
+  line-height: 35px;
+  padding: 0 10px;
+  border: none;
+  color: #fff;
+  background-color: $brand-primary;
+}
diff --git a/app/maps/application_map.rb b/app/maps/application_map.rb
index f6765dc2d..6de0ff8c2 100644
--- a/app/maps/application_map.rb
+++ b/app/maps/application_map.rb
@@ -73,7 +73,7 @@ class ApplicationMap
 
   def to_html(options = {})
     if not respond_to?(:ready?) or ready?
-      "<div id=\"#{id}\" class=\"#{default_class}\"></div> #{map.to_html(options)}".html_safe
+      "<div id=\"#{id}\" class=\"#{default_class}\"><button data-ce-id=\"#{id}\" data-ce-action=\"map-fullscreen\" class=\"ce-MapExpandBlock\"><i class=\"fa fa-expand\"></i></button></div> #{map.to_html(options)}".html_safe
     end
   end