diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 599b9fd41..91c97c5e1 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -59,7 +59,7 @@ a img { height: 32px; } .toolbar ul { - position: relative; + position: absolute; list-style: none; padding-right: 3px; padding-left: 1px; @@ -67,9 +67,6 @@ a img { overflow: hidden; float: left } -.toolbar ul.menu_right { - float: right -} .toolbar ul li { float: left; margin-left: 2px; @@ -84,6 +81,7 @@ a img { visibility: hidden; width: 0px; padding: 5px; + height:20px; } .toolbar ul li a:hover { text-decoration: none; @@ -164,6 +162,15 @@ a img { border: 1px solid #ccc; outline: none; } +.toolbar ul.menu_left { + left:0px; + right:250px; +} + +.toolbar ul.menu_right { + right:0px; +} + li[data-key=showusers] > a { min-width: 30px; text-align: left; @@ -175,6 +182,9 @@ li[data-key=showusers] > a #online_count { top: 2px; padding-left: 2px; } +#editbar{ + display:none; +} #editorcontainer { position: absolute; top: 37px; /* + 1px border */ @@ -843,12 +853,16 @@ input[type=checkbox] { width: 185px !important; } @media screen and (max-width: 600px) { - .toolbar ul li.separator { - display: none; - } - .toolbar ul li a { - padding: 4px 1px - } + .toolbar ul li.separator { + display: none; + } + .toolbar ul li a { + padding: 4px 1px + } + .toolbar ul.menu_left { + left:0px; + right:150px; + } } @media all and (max-width: 400px){ #gritter-notice-wrapper{ @@ -894,9 +908,13 @@ input[type=checkbox] { #editbar { height: 62px; } + .toolbar ul.menu_left { + left:0px; + right:100px; + } + .toolbar ul.menu_right { - float: left; - margin-top:2px; + right:0px; } .popup { width:100%; @@ -917,6 +935,9 @@ input[type=checkbox] { #editorcontainer { margin-bottom: 33px } + .toolbar ul.menu_left { + right:0px; + } .toolbar ul.menu_right { background: #f7f7f7; background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); @@ -1076,4 +1097,4 @@ input[type=checkbox] { text-shadow: none; } -/* End of gritter stuff */ \ No newline at end of file +/* End of gritter stuff */ diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 73fcd3d6b..649d8c825 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -937,4 +937,3 @@ exports.handshake = handshake; exports.pad = pad; exports.init = init; exports.alertBar = alertBar; - diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 6352b1296..d39bfecd7 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -140,7 +140,12 @@ var padeditbar = (function() init: function() { var self = this; self.dropdowns = []; - + // Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute + // A CSS fix for this would be nice but I'm not sure how we'd do it. + $(window).resize(function(){ + self.redrawHeight(); + }); + $("#editbar .editbarbutton").attr("unselectable", "on"); // for IE $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar"); $("#editbar [data-key]").each(function () { @@ -149,6 +154,10 @@ var padeditbar = (function() }); }); + $('#editbar').show(); + + this.redrawHeight(); + registerDefaultCommands(self); hooks.callAll("postToolbarInit", { @@ -170,6 +179,12 @@ var padeditbar = (function() this.commands[cmd] = callback; return this; }, + redrawHeight: function(){ + var editbarHeight = $('.menu_left').height() + 2 + "px"; + var containerTop = $('.menu_left').height() + 5 + "px"; + $('#editbar').css("height", editbarHeight); + $('#editorcontainer').css("top", containerTop); + }, registerDropdownCommand: function (cmd, dropdown) { dropdown = dropdown || cmd; self.dropdowns.push(dropdown)