Fix popup for bigger fonts/longer translations.

EFForg · Jun 20, 2017 · 6c0c3ae · 6c0c3ae
1 parent 6ef5870
commit 6c0c3ae
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -281,7 +281,10 @@ function refreshPopup(tabId) {
   //TODO this is calling get action and then being used to call get Action
   var origins = badger.getAllOriginsForTab(tabId);
   if (!origins || origins.length === 0) {
-    $("#blockedResources").html(i18n.getMessage("popup_blocked"));
+    $("#blockedResources").replaceWith($('<div></div>', {
+      id: "noThirdPartyResources",
+      text: i18n.getMessage("popup_blocked")
+    }));
     $('#number_trackers').text('0');
     return;
   }

diff --git a/src/skin/popup.css b/src/skin/popup.css
@@ -29,6 +29,10 @@ body {
   overflow-y: hidden;
   overflow-x: hidden;
   width: 400px;
+
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
 }
 
 a { text-decoration: none }
@@ -160,8 +164,9 @@ left: 0;
   display: none;
 }
 #privacyBadgerHeader{
-color: #505050;
-font-size: 16px;
+  color: #505050;
+  font-size: 16px;
+  flex: none;
 }
 #privacyBadgerHeader h2{
   margin: 5px;
@@ -190,8 +195,38 @@ font-size: 16px;
 .ui-slider .ui-slider-handle {
   cursor: move;
 }
+
 #siteControls {
   margin-bottom: 5px;
+  flex: none;
+}
+
+#blockedResourcesContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+#blockedResourcesHeader {
+  flex: none;
+}
+
+#blockedResources {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+#blockedResourcesInner {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+#noThirdPartyResources {
+  flex: none;
 }
 
 #firstRun {
@@ -215,8 +250,7 @@ font-size: 16px;
   color: #333;
 }
 .clickerContainer {
-  max-height: 290px;
-  overflow-y: auto;
+  height: 100%;
   background-color: #E8E9EA;
 }
 .key {

diff --git a/src/skin/popup.html b/src/skin/popup.html
@@ -69,10 +69,13 @@ <h1 id="report_title" class="i18n_report_title"></h1>
   <div class='clear'></div>
   <div id="subtitle"><span id="version" class="i18n_version"></span></div>
 </div>
+
 <div id="blockedResourcesContainer">
-  <p id="pbInstructions"> <span class="i18n_pb_detected"></span> <span id='number_trackers'></span> <span class="i18n_popup_instructions"></span></p>
-  <div class="spacer"></div>
-  <div id="blockedResources"><span class="options_loading"></span></div>
+    <div id="blockedResourcesHeader">
+        <p id="pbInstructions"> <span class="i18n_pb_detected"></span> <span id='number_trackers'></span> <span class="i18n_popup_instructions"></span></p>
+        <div class="spacer"></div>
+    </div>
+    <div id="blockedResources"><span class="options_loading"></span></div>
 </div>
 
 <div id="siteControls">
@@ -81,6 +84,7 @@ <h1 id="report_title" class="i18n_report_title"></h1>
   <center><button id="error" class="pbButton" style="display:block" target="blank"><span class="i18n_report_broken_site"></span></button></center>
   <center><button id="donate" class="pbButton" style="display:block" target="blank"><span class="i18n_donate_to_eff"></span></button></center>
 </div>
+
 <div class='clear'></div>
 </body>
 </html>