Merge pull request #2298 from ether/reflow-toolbar-properly

Reflow toolbar properly
This commit is contained in:
John McLear 2014-11-15 15:37:28 +00:00
commit 8d2fa35b3f
3 changed files with 50 additions and 15 deletions

View file

@ -59,7 +59,7 @@ a img {
height: 32px; height: 32px;
} }
.toolbar ul { .toolbar ul {
position: relative; position: absolute;
list-style: none; list-style: none;
padding-right: 3px; padding-right: 3px;
padding-left: 1px; padding-left: 1px;
@ -67,9 +67,6 @@ a img {
overflow: hidden; overflow: hidden;
float: left float: left
} }
.toolbar ul.menu_right {
float: right
}
.toolbar ul li { .toolbar ul li {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
@ -84,6 +81,7 @@ a img {
visibility: hidden; visibility: hidden;
width: 0px; width: 0px;
padding: 5px; padding: 5px;
height:20px;
} }
.toolbar ul li a:hover { .toolbar ul li a:hover {
text-decoration: none; text-decoration: none;
@ -164,6 +162,15 @@ a img {
border: 1px solid #ccc; border: 1px solid #ccc;
outline: none; outline: none;
} }
.toolbar ul.menu_left {
left:0px;
right:250px;
}
.toolbar ul.menu_right {
right:0px;
}
li[data-key=showusers] > a { li[data-key=showusers] > a {
min-width: 30px; min-width: 30px;
text-align: left; text-align: left;
@ -175,6 +182,9 @@ li[data-key=showusers] > a #online_count {
top: 2px; top: 2px;
padding-left: 2px; padding-left: 2px;
} }
#editbar{
display:none;
}
#editorcontainer { #editorcontainer {
position: absolute; position: absolute;
top: 37px; /* + 1px border */ top: 37px; /* + 1px border */
@ -843,12 +853,16 @@ input[type=checkbox] {
width: 185px !important; width: 185px !important;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.toolbar ul li.separator { .toolbar ul li.separator {
display: none; display: none;
} }
.toolbar ul li a { .toolbar ul li a {
padding: 4px 1px padding: 4px 1px
} }
.toolbar ul.menu_left {
left:0px;
right:150px;
}
} }
@media all and (max-width: 400px){ @media all and (max-width: 400px){
#gritter-notice-wrapper{ #gritter-notice-wrapper{
@ -894,9 +908,13 @@ input[type=checkbox] {
#editbar { #editbar {
height: 62px; height: 62px;
} }
.toolbar ul.menu_left {
left:0px;
right:100px;
}
.toolbar ul.menu_right { .toolbar ul.menu_right {
float: left; right:0px;
margin-top:2px;
} }
.popup { .popup {
width:100%; width:100%;
@ -917,6 +935,9 @@ input[type=checkbox] {
#editorcontainer { #editorcontainer {
margin-bottom: 33px margin-bottom: 33px
} }
.toolbar ul.menu_left {
right:0px;
}
.toolbar ul.menu_right { .toolbar ul.menu_right {
background: #f7f7f7; background: #f7f7f7;
background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%);
@ -1076,4 +1097,4 @@ input[type=checkbox] {
text-shadow: none; text-shadow: none;
} }
/* End of gritter stuff */ /* End of gritter stuff */

View file

@ -937,4 +937,3 @@ exports.handshake = handshake;
exports.pad = pad; exports.pad = pad;
exports.init = init; exports.init = init;
exports.alertBar = alertBar; exports.alertBar = alertBar;

View file

@ -140,7 +140,12 @@ var padeditbar = (function()
init: function() { init: function() {
var self = this; var self = this;
self.dropdowns = []; 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 .editbarbutton").attr("unselectable", "on"); // for IE
$("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar"); $("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
$("#editbar [data-key]").each(function () { $("#editbar [data-key]").each(function () {
@ -149,6 +154,10 @@ var padeditbar = (function()
}); });
}); });
$('#editbar').show();
this.redrawHeight();
registerDefaultCommands(self); registerDefaultCommands(self);
hooks.callAll("postToolbarInit", { hooks.callAll("postToolbarInit", {
@ -170,6 +179,12 @@ var padeditbar = (function()
this.commands[cmd] = callback; this.commands[cmd] = callback;
return this; 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) { registerDropdownCommand: function (cmd, dropdown) {
dropdown = dropdown || cmd; dropdown = dropdown || cmd;
self.dropdowns.push(dropdown) self.dropdowns.push(dropdown)