From ae884ca7b894df651de2667766011b58d47e4fbe Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 11 Feb 2015 11:13:04 -0700 Subject: [PATCH 1/4] CSS typo: box-border to border-box --- src/css/dyna-rules.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index b8c813aca..35bb5482b 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -18,7 +18,7 @@ code { } #diff > .pane { border: 0; - box-sizing: box-border; + box-sizing: border-box; display: inline-block; font: 12px/1.8 monospace; margin: 0; From fd1390713a66b446c99028b37cec2cb7d6f51b2d Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 11 Feb 2015 11:50:44 -0700 Subject: [PATCH 2/4] CSS cleanup: dynamic rules tab (My rules) For comparison, before: http://chrisly.me/image/1g01441z0F2c and after: http://chrisly.me/image/1v160U0P2i07 Also: * give good class names to some element in dyna-rules.html * select the ul more generically in dyna-rules.js (since a container was added) --- src/css/dyna-rules.css | 33 +++++++++++++++++++-------------- src/dyna-rules.html | 11 +++++++---- src/js/dyna-rules.js | 8 ++++---- 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index 35bb5482b..346055539 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -15,8 +15,9 @@ code { margin: 0; padding: 0.5em 0 0 0; white-space: nowrap; + font-size: 0; /* otherwise spaces between inline-blocks will be rendered */ } -#diff > .pane { +#diff .pane { border: 0; box-sizing: border-box; display: inline-block; @@ -25,15 +26,16 @@ code { padding: 0; position: relative; white-space: normal; - width: calc(50% - 2px); + width: 50%; } -#diff > .pane > div { +#diff .pane .rulesContainer { + position: relative; + min-height: 150px; /* too short is confusing */ + } +#diff .ruleActions { padding: 0 0 1em 0; text-align: center; } -#diff > .pane > div > span { - float: left; - } body[dir="ltr"] #revertButton:after { content: '\2009\f061'; font-family: FontAwesome; @@ -105,19 +107,20 @@ body[dir="rtl"] #commitButton:before { visibility: hidden; } #diff .left { - padding: 0 0 0 0; + border-right: 1px solid #eee; } #diff .right > ul { color: #888; } #diff li { - background-color: white; + background-color: #ddd; direction: ltr; padding: 0; text-align: left; white-space: nowrap; + padding-left: 3px; /* a bit of padding; must also be in textarea */ } -#diff li:nth-of-type(2n+0) { +#diff li:nth-child(even) { background-color: #eee; } #diff .right li { @@ -137,17 +140,20 @@ body[dir="rtl"] #commitButton:before { #diff textarea { background-color: #f8f8ff; border: 0; + margin: 0; border-top: 1px solid #eee; direction: ltr; font: 12px monospace; - height: 100%; - left: 0; line-height: 1.8; - margin: 0; overflow: hidden; overflow-y: auto; - padding: 1em 0 0 0; + padding: 1em 0 0 3px; /* same left and top padding as ul/li */ position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; resize: none; visibility: hidden; white-space: pre; /* this imples nowrap; break only on \n and
. @@ -155,7 +161,6 @@ body[dir="rtl"] #commitButton:before { respect \n's (example: Safari) per the CSS spec: http://www.w3.org/wiki/CSS/Properties/white-space */ word-wrap: normal; - width: 100%; } #diff.edit textarea { visibility: visible; diff --git a/src/dyna-rules.html b/src/dyna-rules.html index 409c9fbbf..435dd1d5c 100644 --- a/src/dyna-rules.html +++ b/src/dyna-rules.html @@ -14,22 +14,25 @@

-
+

-
+
+
    +
    -
    +

    -
    +
    +
      diff --git a/src/js/dyna-rules.js b/src/js/dyna-rules.js index 24a476fe4..b6bacb267 100644 --- a/src/js/dyna-rules.js +++ b/src/js/dyna-rules.js @@ -81,10 +81,10 @@ var renderRules = function(details) { } } - uDom('#diff > .left > ul > li').remove(); - uDom('#diff > .left > ul').html(permanentList.join('')); - uDom('#diff > .right > ul > li').remove(); - uDom('#diff > .right > ul').html(sessionList.join('')); + uDom('#diff > .left ul > li').remove(); + uDom('#diff > .left ul').html(permanentList.join('')); + uDom('#diff > .right ul > li').remove(); + uDom('#diff > .right ul').html(sessionList.join('')); uDom('#diff').toggleClass('dirty', details.sessionRules !== details.permanentRules); }; From 8051b8d60443a75b83ad6aa5f8ed3ca6f0c84155 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 11 Feb 2015 12:32:34 -0700 Subject: [PATCH 3/4] Highlight differences between temporary and permanent dyna. rules Screenshots: * After editing temporary (haven't committed to permanent yet): http://chrisly.me/image/3T2R0e2c1b20 * After committing (so temporary is same as permanenet) : http://chrisly.me/image/2I2l0Z1N1A2b --- src/css/dyna-rules.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index 346055539..ded7c319e 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -124,11 +124,14 @@ body[dir="rtl"] #commitButton:before { background-color: #eee; } #diff .right li { + opacity: 0.5; } #diff .right li:hover { } #diff .right li.notLeft { color: #000; + background: lightgreen; + opacity: 1; } #diff .right li.notRight { color: #000; @@ -136,6 +139,8 @@ body[dir="rtl"] #commitButton:before { #diff .right li.toRemove { color: #000; text-decoration: line-through; + background: lightpink; + opacity: 1; } #diff textarea { background-color: #f8f8ff; From 622829cc68c43fd4a9dbae6fafdc92ef7959bb2b Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 11 Feb 2015 12:42:27 -0700 Subject: [PATCH 4/4] No colors for highlights; just faded and linethrough --- src/css/dyna-rules.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index ded7c319e..c592bf44a 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -130,7 +130,6 @@ body[dir="rtl"] #commitButton:before { } #diff .right li.notLeft { color: #000; - background: lightgreen; opacity: 1; } #diff .right li.notRight { @@ -139,7 +138,6 @@ body[dir="rtl"] #commitButton:before { #diff .right li.toRemove { color: #000; text-decoration: line-through; - background: lightpink; opacity: 1; } #diff textarea {