Made toggle arrow longer & removed unneeded DOM manipulations

This commit is contained in:
Cameron Moon
2013-02-11 09:42:18 +11:00
parent 2647d58e60
commit 9c56d64447
3 changed files with 11 additions and 10 deletions

View File

@ -35,6 +35,7 @@ window.setupStyles = function() {
'#chat { height: '+CHAT_SHRINKED+'px; } ', '#chat { height: '+CHAT_SHRINKED+'px; } ',
'#updatestatus { width:'+(SIDEBAR_WIDTH-2*4)+'px; } ', '#updatestatus { width:'+(SIDEBAR_WIDTH-2*4)+'px; } ',
'#sidebar { width:'+(SIDEBAR_WIDTH + HIDDEN_SCROLLBAR_ASSUMED_WIDTH + 2 /*border*/)+'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 } ', '#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 input, h2, #updatestatus { width:'+(SIDEBAR_WIDTH - 2*4)+'px !important } ',
'#sidebar > *, #gamestat span, .imgpreview img { width:'+SIDEBAR_WIDTH+'px; }'].join("\n") '#sidebar > *, #gamestat span, .imgpreview img { width:'+SIDEBAR_WIDTH+'px; }'].join("\n")
@ -155,21 +156,19 @@ window.setupPlayerStat = function() {
} }
window.setupSidebarToggle = function() { window.setupSidebarToggle = function() {
var toggle = $('#sidebartoggle'); $('#sidebartoggle').on('click', function() {
var sidebar = $('#sidebar'); var toggle = $('#sidebartoggle');
toggle.text('▶'); var sidebar = $('#sidebar');
toggle.css('right', SIDEBAR_WIDTH+2+'px');
toggle.on('click', function() {
if(sidebar.is(':visible')) { if(sidebar.is(':visible')) {
sidebar.hide(); sidebar.hide();
$('#map').css('margin-right','0'); $('#map').css('margin-right','0');
toggle.text(''); toggle.html('◢<br>◥');
toggle.css('right', '0'); toggle.css('right', '0');
} else { } else {
sidebar.show(); sidebar.show();
$('#map').css('margin-right', SIDEBAR_WIDTH+2+'px'); $('#map').css('margin-right', SIDEBAR_WIDTH+2+'px');
toggle.text(''); toggle.html('◣<br>◤');
toggle.css('right', SIDEBAR_WIDTH+2+'px'); toggle.css('right', SIDEBAR_WIDTH+'px');
} }
window.map.invalidateSize(false); window.map.invalidateSize(false);
}); });

View File

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

View File

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