From 55898c13594a6b8bf7608f30ebd840394fd71a64 Mon Sep 17 00:00:00 2001
From: Colm Britton <colmjude@gmail.com>
Date: Tue, 17 Jul 2018 00:20:18 +0800
Subject: [PATCH] Make properties panel collapsible

---
 application/static/stylesheets/main.css | 118 +++++++++++++++++++++++-
 application/templates/publication.html  |  60 +++++++++---
 src/scss/main.scss                      | 107 ++++++++++++++++++++-
 3 files changed, 264 insertions(+), 21 deletions(-)

diff --git a/application/static/stylesheets/main.css b/application/static/stylesheets/main.css
index 0abe55b..fdd521c 100644
--- a/application/static/stylesheets/main.css
+++ b/application/static/stylesheets/main.css
@@ -2564,15 +2564,79 @@ ul.details {
   height: 400px;
 }
 
-.dataset-info-panel {
-  background: #fff;
+.dataset-info-panel-container {
   position: absolute;
-  width: 30%;
+  width: 288px;
   top: 10px;
   right: 10px;
   bottom: 20px;
-  overflow: scroll;
   z-index: 400;
+  overflow: hidden;
+}
+
+.dataset-info-panel-container.flattened {
+  pointer-events: none;
+}
+
+.dataset-info-panel-container.flattened .toggle-panel-button {
+  pointer-events: auto;
+}
+
+.dataset-info-panel-container.flattened .toggle-panel-button:after {
+  content: "\25C0";
+}
+
+.dataset-info-panel {
+  overflow: scroll;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-left: 30px;
+  box-sizing: border-box;
+}
+
+.dataset-info-panel-wrapper {
+  background: #fff;
+  height: 100%;
+}
+
+.toggle-panel-button {
+  height: 31px;
+  width: 30px;
+  background: #0b0c0c;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  text-indent: -99999px;
+}
+
+.toggle-panel-button:after {
+  content: "\25b6";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  line-height: 2em;
+  width: 100%;
+  z-index: 30000;
+  text-indent: 0px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #dee0e2;
+}
+
+.toggle-panel-button:hover {
+  background: #232727;
+}
+
+.toggle-panel-button:hover:after {
+  color: #f8f8f8;
+  cursor: pointer;
+}
+
+.toggle-panel-button:focus {
+  outline: none;
 }
 
 .properties-panel {
@@ -2634,3 +2698,49 @@ ul.details {
   padding-top: 10px;
   padding-bottom: 8px;
 }
+
+.slide-in {
+  animation: slide-in 0.5s forwards;
+  -webkit-animation: slide-in 0.5s forwards;
+}
+
+.slide-out {
+  animation: slide-out 0.5s forwards;
+  -webkit-animation: slide-out 0.5s forwards;
+}
+
+@keyframes slide-in {
+  0% {
+    margin-left: 258px;
+  }
+  100% {
+    margin-left: 0;
+  }
+}
+
+@-webkit-keyframes slide-in {
+  0% {
+    margin-left: 258px;
+  }
+  100% {
+    margin-left: 0;
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: 258px;
+  }
+}
+
+@-webkit-keyframes slide-out {
+  0% {
+    margin-left: 0;
+  }
+  100% {
+    margin-left: 258px;
+  }
+}
diff --git a/application/templates/publication.html b/application/templates/publication.html
index 2526c3a..1150ce4 100644
--- a/application/templates/publication.html
+++ b/application/templates/publication.html
@@ -93,20 +93,26 @@ <h2 class="heading-small">{{ publication.name }}</h2>
         <div class="loader"></div>
         <div class="leaflet-map" id="map" data-publication="{{ publication.publication }}"></div>
 
-        <div class="dataset-info-panel">
-          <div class="amount-showing-panel">
-            <p>Currently showing <span class="features-showing-count">0</span> of {{ feature_count }} features</p>
+        <div class="dataset-info-panel-container">
+          <div class="dataset-info-panel slide-in">
+            <div class="dataset-info-panel-wrapper">
+              <div class="amount-showing-panel">
+                <p>Currently showing <span class="features-showing-count">0</span> of {{ feature_count }} features</p>
+              </div>
+  
+              <div class="properties-panel">
+                <h4 class="heading-medium">Properties</h4>
+                <h4 class="heading-small">Collector properties</h4>
+                <dl class="collector-properties-list"></dl>
+                <hr />
+                <h4 class="heading-small">Feature properties</h4>
+                <dl class="feature-properties-list"></dl>
+              </div>
+            </div>
+            <button class="toggle-panel-button">Toggle</button>
           </div>
-
-          <div class="properties-panel">
-            <h4 class="heading-medium">Properties</h4>
-            <h4 class="heading-small">Collector properties</h4>
-            <dl class="collector-properties-list"></dl>
-            <hr />
-            <h4 class="heading-small">Feature properties</h4>
-            <dl class="feature-properties-list"></dl>
-          </div>
-      </div>
+        </div>
+        
 
       {% endcall %}
 
@@ -309,6 +315,34 @@ <h4 class="heading-small">Feature properties</h4>
       }
 
       var searchControl = L.control.search({}).addTo(map);
+      
+      var $panel = document.querySelector('.dataset-info-panel');
+      var $panelContainer = document.querySelector('.dataset-info-panel-container');
+      var $toggle = document.querySelector('.toggle-panel-button');
+
+      function animationEndHandler() {
+        $panelContainer.classList.add('flattened');
+      }
+
+      $toggle.addEventListener('click', function() {
+          var isOpen = $panel.classList.contains('slide-in');
+
+          if(isOpen) {
+            $panel.classList.remove('slide-in');
+            $panel.classList.add('slide-out');
+            $panel.addEventListener('animationend', animationEndHandler);
+          } else {
+            $panelContainer.classList.remove('flattened');
+            $panel.classList.remove('slide-out');
+            $panel.classList.add('slide-in');
+            $panel.removeEventListener('animationend', animationEndHandler);
+          }
+          //$panel.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
+      });
+
+      function positionToggleButton() {
+        
+      }
 
     </script>
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 430e958..5edccc0 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -82,16 +82,84 @@ $gutter-third: $gutter/3;
   height: 400px;
 }
 
-.dataset-info-panel {
-  background: $page-colour;
+$panel-width: 288px;
+$toggle-width: 30px;
+.dataset-info-panel-container {
   position: absolute;
-  width: 30%;
+  width: $panel-width;
   top: $gutter-third;
   right: $gutter-third;
   bottom: $gutter-third*2;
-  overflow: scroll;
   z-index: 400;
+  overflow: hidden;
+  // won't work in >IE11
+  &.flattened {
+    pointer-events: none;
+    .toggle-panel-button {
+      pointer-events: auto;
+      &:after {
+        content: "\25C0";
+      }
+    }
+  }
+}
+
+.dataset-info-panel {
+  overflow: scroll;
+ // position: absolute;
+  //top: 0;
+ // right: 0;
+ // bottom: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-left: $toggle-width;
+  box-sizing: border-box;
+  &:hover {
+    .toggle-panel-button:after {
+      
+    }
+  }
 }
+.dataset-info-panel-wrapper {
+  background: $page-colour;
+  height: 100%;
+}
+
+.toggle-panel-button {
+  height: 31px;
+  width: $toggle-width;
+  background: $text-colour;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  text-indent: -99999px;
+  &:after {
+    content: "\25b6";
+    position: absolute;
+    top:0; left: 0;
+    height: 100%;
+    line-height: 2em;
+    width: 100%;
+    z-index: 30000;
+    text-indent: 0px;
+    font-size: 16px;
+    font-weight: bold;
+    color: $panel-colour;
+  }
+  &:hover {
+    background: lighten($text-colour, 10);
+    &:after {
+      color: $highlight-colour;
+      cursor: pointer;
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
 .properties-panel {
   padding: 0 $gutter-half $gutter-half;
 
@@ -135,3 +203,34 @@ $gutter-third: $gutter/3;
   }
 }
 
+.slide-in {
+    animation: slide-in 0.5s forwards;
+    -webkit-animation: slide-in 0.5s forwards;
+}
+
+.slide-out {
+    animation: slide-out 0.5s forwards;
+    -webkit-animation: slide-out 0.5s forwards;
+}
+
+$slide-amount: ($panel-width - $toggle-width);
+@keyframes slide-in {
+    0% { margin-left: $slide-amount; }
+    100% { margin-left: 0; }
+}
+
+@-webkit-keyframes slide-in {
+    0% { margin-left: $slide-amount; }
+    100% { margin-left: 0; }
+}
+    
+@keyframes slide-out {
+    0% { margin-left: 0; }
+    100% { margin-left: $slide-amount; }
+}
+
+@-webkit-keyframes slide-out {
+    0% { margin-left: 0; }
+    100% { margin-left: $slide-amount; }
+}
+