diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/css/dyna-rules.css | 33 | ||||
-rw-r--r-- | src/dyna-rules.html | 11 | ||||
-rw-r--r-- | 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 35bb548..3460555 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 <br>. @@ -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 409c9fb..435dd1d 100644 --- a/src/dyna-rules.html +++ b/src/dyna-rules.html @@ -14,22 +14,25 @@ <p data-i18n="rulesFormatHint"></p> <div id="diff"> <div class="pane left"> - <div> + <div class="ruleActions"> <h2 data-i18n="rulesPermanentHeader"></h2> <button type="button" id="exportButton" data-i18n="rulesExport"></button> <button type="button" id="revertButton" data-i18n="rulesRevert"></button> - </div> + </div> + <div class="rulesContainer"> <ul></ul> </div> + </div> <div class="pane right"> - <div> + <div class="ruleActions"> <h2 data-i18n="rulesTemporaryHeader"></h2> <button type="button" id="commitButton" data-i18n="rulesCommit"></button> <button type="button" id="editEnterButton" data-i18n="rulesEdit"></button> <button type="button" id="editStopButton" data-i18n="rulesEditSave"></button> <button type="button" id="editCancelButton" data-i18n="rulesEditDiscard"></button> <button type="button" id="importButton" data-i18n="rulesImport"></button> - </div> + </div> + <div class="rulesContainer"> <textarea spellcheck="false"></textarea> <ul></ul> </div> diff --git a/src/js/dyna-rules.js b/src/js/dyna-rules.js index 24a476f..b6bacb2 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); }; |