From 25d06114fea90c9dd9c30bc8170f642259868eee Mon Sep 17 00:00:00 2001
From: Chris <chris@chrismatic.io>
Date: Sat, 11 Apr 2015 02:03:57 -0600
Subject: [PATCH] Completes UI fixes for #1235

---
 src/3p-filters.html    | 10 +++++-----
 src/css/3p-filters.css |  9 +++++----
 src/css/dashboard.css  |  3 ++-
 src/js/3p-filters.js   |  5 ++++-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/3p-filters.html b/src/3p-filters.html
index 44efb92ad..9c1c7ed47 100644
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@@ -22,11 +22,6 @@
 </ul>
 <ul id="lists"></ul>
 
-<div id="externalListsDiv">
-<p data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></p>
-<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
-<p style="margin: 0.25em 0 0 0"><button id="externalListsApply" disabled="true" data-i18n="3pExternalListsApply"></button></p>
-</div>
 
 <div id="busyOverlay">
     <div></div>
@@ -50,6 +45,11 @@
          --><span class="status purge" style="display: none;" data-i18n="3pExternalListPurge"></span>
             </li>
         </ul>
+        <div id="externalListsDiv">
+        <p data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></p>
+        <textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
+        <p style="margin: 0.25em 0 0 0"><button id="externalListsApply" disabled="true" data-i18n="3pExternalListsApply"></button></p>
+        </div>
     </div>
 
 <script src="js/vapi-common.js"></script>
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 65bc06e79..8d2e129b1 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -6,7 +6,7 @@ ul {
     margin-bottom: 0.5em;
     }
 #lists {
-    margin: 0.5em 0 0 0;
+    margin: 0.5em 0 4em 0;
     padding-left: 1em;
     padding-right: 0em;
     }
@@ -37,7 +37,8 @@ body[dir=rtl] #lists {
 #lists > .groupEntry > ul {
     margin: 0.25em 0 0 0;
     }
-#lists > .groupEntry.collapsed > ul {
+#lists > .groupEntry.collapsed > ul,
+#lists > .groupEntry.collapsed > div {
     display: none;
     }
 li.listEntry {
@@ -139,10 +140,10 @@ span.new {
     background-color: hsl(36, 100%, 75%);
     }
 #externalListsDiv {
-    margin: 2em auto 2em 2em;
+    margin: 2em auto 0 2em;
     }
 body[dir=rtl] #externalListsDiv {
-    margin: 2em 2em 2em;
+    margin: 2em 2em 0;
     }
 #externalLists {
     box-sizing: border-box;
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 8c1971325..e8f87aecd 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -12,6 +12,7 @@ html, body {
     }
 body {
     padding:8px;
+    box-sizing: border-box;
     }
 #dashboard-nav {
     margin: 0;
@@ -62,7 +63,7 @@ iframe {
     border: 0;
     padding: 0;
     background-color: transparent;
-    width: calc(100% - 16px);
+    width: 100%;
     }
 
 @media (max-width: 600px) {
diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js
index 6d2e3de36..9a89fd690 100644
--- a/src/js/3p-filters.js
+++ b/src/js/3p-filters.js
@@ -162,6 +162,9 @@ var renderFilterLists = function() {
 
     var liFromListGroup = function(groupKey, listKeys) {
         var liGroup = listGroupTemplate.clone();
+        if(groupKey === 'custom') {
+            liGroup.append(uDom('#externalListsDiv'));
+        }
         var groupName = vAPI.i18n('3pGroup' + groupKey.charAt(0).toUpperCase() + groupKey.slice(1));
         if ( groupName !== '' ) {
             liGroup.descendants('span.geName').text(groupName);
@@ -245,6 +248,7 @@ var renderFilterLists = function() {
         uDom('#autoUpdate').prop('checked', listDetails.autoUpdate === true);
         uDom('#parseCosmeticFilters').prop('checked', listDetails.cosmetic === true);
 
+        renderExternalLists();
         renderWidgets();
         renderBusyOverlay(details.manualUpdate, details.manualUpdateProgress);
     };
@@ -539,7 +543,6 @@ uDom.onLoad(function() {
     uDom('#lists').on('click', '.groupEntry > span', groupEntryClickHandler);
 
     renderFilterLists();
-    renderExternalLists();
 });
 
 /******************************************************************************/