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

Reflow toolbar properly

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 */
+/* End of gritter stuff */

src/static/js/pad.js

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

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)