From 7d04d7309f872dca337c8a648aff9f1aee5cd370 Mon Sep 17 00:00:00 2001 From: John McLear Date: Thu, 6 Nov 2014 14:32:20 +0000 Subject: [PATCH 1/5] reflow buttons based on browser size, much better --- src/static/css/pad.css | 43 +++++++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 599b9fd4..228c035f 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; @@ -843,12 +850,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 +905,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 +932,8 @@ input[type=checkbox] { #editorcontainer { margin-bottom: 33px } + .toolbar ul.menu_left { + } .toolbar ul.menu_right { background: #f7f7f7; background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); @@ -1076,4 +1093,4 @@ input[type=checkbox] { text-shadow: none; } -/* End of gritter stuff */ \ No newline at end of file +/* End of gritter stuff */ From 9170effb27dee076ac7401a34f0e857be50330eb Mon Sep 17 00:00:00 2001 From: John McLear Date: Thu, 6 Nov 2014 15:09:44 +0000 Subject: [PATCH 2/5] working redraw and draw on startup --- src/static/js/pad.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 73fcd3d6..5292e75d 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -370,6 +370,18 @@ function handshake() $('#readonlyinput').on('click',function(){ padeditbar.setEmbedLinks(); }); + // 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(){ + redrawEditbar(); + }); + redrawEditbar(); +} + +var redrawEditbar = function(){ + var height = $('.menu_left').height() + 4 + "px"; + $('#editbar').css("height", height); + $('#editorcontainer').css("top", height); } $.extend($.gritter.options, { @@ -937,4 +949,3 @@ exports.handshake = handshake; exports.pad = pad; exports.init = init; exports.alertBar = alertBar; - From 96d6e7c1b7df59e96c394608a343cb698c848576 Mon Sep 17 00:00:00 2001 From: John McLear Date: Thu, 6 Nov 2014 15:12:40 +0000 Subject: [PATCH 3/5] cleaner reflow --- src/static/js/pad.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 5292e75d..6a3a2e0e 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -379,9 +379,10 @@ function handshake() } var redrawEditbar = function(){ - var height = $('.menu_left').height() + 4 + "px"; - $('#editbar').css("height", height); - $('#editorcontainer').css("top", height); + var editbarHeight = $('.menu_left').height() + 2 + "px"; + var containerTop = $('.menu_left').height() + 5 + "px"; + $('#editbar').css("height", editbarHeight); + $('#editorcontainer').css("top", containerTop); } $.extend($.gritter.options, { From 0685e563ed947a42377fe1a5eb6fca10f3e8e833 Mon Sep 17 00:00:00 2001 From: John McLear Date: Thu, 6 Nov 2014 15:43:21 +0000 Subject: [PATCH 4/5] working on resize --- src/static/css/pad.css | 1 + src/static/js/pad.js | 13 ------------- src/static/js/pad_editbar.js | 15 ++++++++++++++- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 228c035f..11705e06 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -933,6 +933,7 @@ input[type=checkbox] { margin-bottom: 33px } .toolbar ul.menu_left { + right:0px; } .toolbar ul.menu_right { background: #f7f7f7; diff --git a/src/static/js/pad.js b/src/static/js/pad.js index 6a3a2e0e..649d8c82 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -370,19 +370,6 @@ function handshake() $('#readonlyinput').on('click',function(){ padeditbar.setEmbedLinks(); }); - // 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(){ - redrawEditbar(); - }); - redrawEditbar(); -} - -var redrawEditbar = function(){ - var editbarHeight = $('.menu_left').height() + 2 + "px"; - var containerTop = $('.menu_left').height() + 5 + "px"; - $('#editbar').css("height", editbarHeight); - $('#editorcontainer').css("top", containerTop); } $.extend($.gritter.options, { diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 6352b129..c067bbba 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,8 @@ var padeditbar = (function() }); }); + this.redrawHeight(); + registerDefaultCommands(self); hooks.callAll("postToolbarInit", { @@ -170,6 +177,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) From d13b6162f0b7869942ec4bcb6ab7b5267b448b86 Mon Sep 17 00:00:00 2001 From: John McLear Date: Thu, 6 Nov 2014 15:50:55 +0000 Subject: [PATCH 5/5] this looks way better --- src/static/css/pad.css | 3 +++ src/static/js/pad_editbar.js | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 11705e06..91c97c5e 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -182,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 */ diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index c067bbba..d39bfecd 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -154,6 +154,8 @@ var padeditbar = (function() }); }); + $('#editbar').show(); + this.redrawHeight(); registerDefaultCommands(self);