Added toggle to collapse sidebar (without old code this time)

code/boot.js

@@ -154,6 +154,27 @@ window.setupPlayerStat = function() {
   );
 }
 
+window.setupSidebarToggle = function() {
+  var toggle = $('#sidebartoggle');
+  var sidebar = $('#sidebar');
+  toggle.text('▶');
+  toggle.css('right', SIDEBAR_WIDTH+2+'px');
+  toggle.on('click', function() {
+    if(sidebar.is(':visible')) {
+      sidebar.hide();
+      $('#map').css('margin-right','0');
+      toggle.text('◀');
+      toggle.css('right', '0');
+    } else {
+      sidebar.show();
+      $('#map').css('margin-right', SIDEBAR_WIDTH+2+'px');
+      toggle.text('▶');
+      toggle.css('right', SIDEBAR_WIDTH+2+'px');
+    }
+    window.map.invalidateSize(false);
+  });
+}
+
 
 // BOOTING ///////////////////////////////////////////////////////////
 
@@ -164,6 +185,7 @@ function boot() {
   window.setupGeosearch();
   window.setupRedeem();
   window.setupLargeImagePreview();
+  window.setupSidebarToggle();
   window.updateGameScore();
   window.setupPlayerStat();
   window.chat.setup();

main.js

@@ -58,6 +58,7 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '  <div id="chatautomated"></div>'
   + '</div>'
   + '<form id="chatinput" style="display:none"><time></time><span>tell faction:</span><input type="text"/></form>'
+  + '<a id="sidebartoggle"></a>'
   + '<div id="scrollwrapper">' // enable scrolling for small screens
   + '  <div id="sidebar" style="display: none">'
   + '    <div id="playerstat">t</div>'

style.css

@@ -35,6 +35,19 @@ body {
   overflow-x:hidden;
 }
 
+#sidebartoggle {
+  display: block;
+  padding: 5px;
+  position: absolute;
+  top: 50%;
+  z-index: 3000;
+  background-color: rgba(8, 48, 78, 0.9);
+  color: #FFCE00;
+  border: 1px solid #20A8B1;
+  border-right: none;
+  border-radius: 5px 0 0 5px;
+  text-decoration: none;
+}
 
 .enl {
   color: #03fe03 !important;