Add a way to collapse sidebar

3 files changed, 34 insertions, 3 deletions

diff --git a/app/assets/javascripts/tools.js.coffee b/app/assets/javascripts/tools.js.coffee
index e88c81efa..9274e57e9 100644
--- a/app/assets/javascripts/tools.js.coffee
+++ b/app/assets/javascripts/tools.js.coffee
@@ -1,19 +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)
-      height = $(window).height()
       if (action == 'map-fullscreen')
-        if parseInt($map.css('height')) == height
+        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.css.scss b/app/assets/stylesheets/main/layout.css.scss
index aac5846c5..cd1cea37e 100644
--- a/app/assets/stylesheets/main/layout.css.scss
+++ b/app/assets/stylesheets/main/layout.css.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.css.scss b/app/assets/stylesheets/vendor/map_layers.css.scss
index 0fe9e8151..70394ac57 100644
--- a/app/assets/stylesheets/vendor/map_layers.css.scss
+++ b/app/assets/stylesheets/vendor/map_layers.css.scss
@@ -19,3 +19,15 @@ p.after_map {
   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;
+}