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)
This commit is contained in:
Chris 2015-02-11 11:50:44 -07:00
parent ae884ca7b8
commit fd1390713a
3 changed files with 30 additions and 22 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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);
};