mirror of https://github.com/gorhill/uBlock.git
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:
parent
ae884ca7b8
commit
fd1390713a
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue