From 4d09a8ab50330d9f5968c3b33902542569a132e8 Mon Sep 17 00:00:00 2001
From: Marcelo Munhoz <honocaus@gmail.com>
Date: Wed, 7 Feb 2018 16:35:36 -0200
Subject: [PATCH] Expandable side helper

---
 css/style.css | 22 +++++++++++++++++++++-
 index.html    | 23 +++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 506a69a..dc5b31b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -936,6 +936,7 @@ plate orange:nth-last-child(4)
 .left-col {
   width: calc(100% - 375px);
   text-align: center;
+  transition: width .3s ease-in-out;
   overflow-x: visible;
   position: fixed;
   top: 0;
@@ -948,6 +949,7 @@ plate orange:nth-last-child(4)
 
 .right-col {
   position: fixed;
+  transition: width .3s ease-in-out;
   width: 375px;
   right: 0;
 /*  overflow: auto;*/
@@ -1104,6 +1106,24 @@ plate orange:nth-last-child(4)
   transform: rotate(-45deg);
 }
 
+.button-helper {
+  background: #2e2a23;
+  border-left: 3px solid #1B1813;
+  bottom: 0;
+  color: #1B1813;
+  font-size: 3em;
+  line-height: 1;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.button-helper:hover {
+  background: #30291d;
+  color: #4e483c;
+  cursor: pointer;
+}
+
 .note {
   padding: 20px;
   width: 600px;
@@ -1327,7 +1347,7 @@ tag:after {
   text-align: center;
   text-decoration: none;
   position: relative;
-  top: -20px;
+  top: -55px;
   border: solid 2px rgba(255,255,255,.2);
   box-sizing: border-box;
   width: calc(100% - 40px);
diff --git a/index.html b/index.html
index df4809a..f02bc0d 100644
--- a/index.html
+++ b/index.html
@@ -167,6 +167,8 @@ <h2>Choose a level</h2>
         <div class="level-menu-toggle"></div>
       </div>
 
+      <div class="button-helper active">></div>
+
     </div><!-- /right-col -->
 
   <script>
@@ -181,6 +183,27 @@ <h2>Choose a level</h2>
     } else {
       var ga = false;
     }
+
+    // Expandable side helper
+    $(".button-helper").click(function() {
+      var hDivs = $(".help-wrapper, .level-menu-toggle-wrapper, .level-menu");
+      var lCol = $(".left-col");
+      var rCol = $(".right-col");
+      var hButton = $(".button-helper");
+
+      if ( $(".button-helper.active").length == "1" ) {
+        rCol.css('width', '4%');
+        hDivs.hide();
+        lCol.css('width', '96%');
+        hButton.text('<');
+      } else {
+        rCol.css('width', '375px');
+        hDivs.show();
+        lCol.css('width', 'calc(100% - 375px)');
+        hButton.text('>');
+      }
+      hButton.toggleClass('active');
+    });
   </script>
 
   </body>