Merge pull request #81 from cmrn/collapsable-sidebar

Collapsable sidebar (patch by cmrn)

README.md

@@ -75,6 +75,7 @@ Contributors
 ------------
 
 [Bananeweizen](https://github.com/Bananeweizen),
+[cmrn](https://github.com/cmrn),
 [epf](https://github.com/epf),
 [integ3r](https://github.com/integ3r),
 [JasonMillward](https://github.com/JasonMillward),

code/boot.js

@@ -35,6 +35,7 @@ window.setupStyles = function() {
       '#chat { height: '+CHAT_SHRINKED+'px; } ',
       '#updatestatus { width:'+(SIDEBAR_WIDTH-2*4)+'px;  } ',
       '#sidebar { width:'+(SIDEBAR_WIDTH + HIDDEN_SCROLLBAR_ASSUMED_WIDTH + 2 /*border*/)+'px;  } ',
+      '#sidebartoggle { right:'+SIDEBAR_WIDTH+'px;  } ',
       '#scrollwrapper  { width:'+(SIDEBAR_WIDTH + 2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH)+'px; right:-'+(2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH-2)+'px } ',
       '#sidebar input, h2, #updatestatus  { width:'+(SIDEBAR_WIDTH - 2*4)+'px !important } ',
       '#sidebar > *, #gamestat span, .imgpreview img { width:'+SIDEBAR_WIDTH+'px;  }'].join("\n")
@@ -169,6 +170,25 @@ window.setupPlayerStat = function() {
   );
 }
 
+window.setupSidebarToggle = function() {
+  $('#sidebartoggle').on('click', function() {
+    var toggle = $('#sidebartoggle');
+    var sidebar = $('#sidebar');
+    if(sidebar.is(':visible')) {
+      sidebar.hide();
+      $('#map').css('margin-right','0');
+      toggle.html('◢<br>◥');
+      toggle.css('right', '0');
+    } else {
+      sidebar.show();
+      $('#map').css('margin-right', SIDEBAR_WIDTH+2+'px');
+      toggle.html('◣<br>◤');
+      toggle.css('right', SIDEBAR_WIDTH+'px');
+    }
+    window.map.invalidateSize(false);
+  });
+}
+
 
 // BOOTING ///////////////////////////////////////////////////////////
 
@@ -179,6 +199,7 @@ function boot() {
   window.setupGeosearch();
   window.setupRedeem();
   window.setupLargeImagePreview();
+  window.setupSidebarToggle();
   window.updateGameScore();
   window.setupPlayerStat();
   window.chat.setup();

main.js

@@ -71,6 +71,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">◣<br>◤</a>'
   + '<div id="scrollwrapper">' // enable scrolling for small screens
   + '  <div id="sidebar" style="display: none">'
   + '    <div id="playerstat">t</div>'

style.css

@@ -37,7 +37,9 @@ body {
 
 #sidebartoggle {
   display: block;
-  padding: 5px;
+  padding: 10px 5px;
+  margin-top: -31px;
+  line-height: 10px;
   position: absolute;
   top: 50%;
   z-index: 3000;