Skip to content

Commit b929914

Browse files
ghostwordsghostwords
committed
Use flexible table layout to support larger fonts.
And longer translations.
1 parent ce74946 commit b929914

File tree

8 files changed

+156
-78
lines changed

8 files changed

+156
-78
lines changed

‎src/js/htmlutils.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -111,17 +111,12 @@ var htmlUtils = exports.htmlUtils = {
111111
if (tabId === undefined) {
112112
tabId = "000";
113113
}
114-
var trackerHtml = '' +
114+
115+
var trackerHtml = '<div class="body-content-inner-wrapper">' +
115116
'<div id="associatedTab" data-tab-id="' + tabId + '"></div>' +
116-
'<div class="keyContainer">' +
117-
'<div class="key">' +
118-
'<img class="tooltip" src="/icons/UI-icons-red.svg" tooltip="' + i18n.getMessage("tooltip_block") + '">' +
119-
'<img class="tooltip" src="/icons/UI-icons-yellow.svg" tooltip="' + i18n.getMessage("tooltip_cookieblock") + '">' +
120-
'<img class="tooltip" src="/icons/UI-icons-green.svg" tooltip="' + i18n.getMessage("tooltip_allow") + '">' +
121-
'<div class="tooltipContainer"></div>' +
122-
'</div></div>' +
123-
'<div class="spacer"></div>' +
124-
'<div id="blockedResourcesInner" class="clickerContainer"></div>';
117+
'<div id="blockedResourcesInner" class="body-content clickerContainer"></div>' +
118+
'</div>';
119+
125120
return trackerHtml;
126121
},
127122

‎src/js/options.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,16 @@ function loadOptions() {
5757

5858
// Add event listeners for origins container.
5959
$(function () {
60-
$('#blockedResourcesContainer').on('change', 'input:radio', updateOrigin);
61-
$('#blockedResourcesContainer').on('mouseenter', '.tooltip', displayTooltip);
62-
$('#blockedResourcesContainer').on('mouseleave', '.tooltip', hideTooltip);
63-
$('#blockedResourcesContainer').on('click', '.userset .honeybadgerPowered', revertDomainControl);
64-
$('#blockedResourcesContainer').on('click', '.removeOrigin', removeOrigin);
60+
$('#blockedResourcesContainer')
61+
.on('mouseenter', '.tooltip', displayTooltip)
62+
.on('mouseleave', '.tooltip', hideTooltip)
63+
.on('change', 'input:radio', updateOrigin)
64+
.on('click', '.userset .honeybadgerPowered', revertDomainControl)
65+
.on('click', '.removeOrigin', removeOrigin);
66+
67+
$('.keyContainer')
68+
.on('mouseenter', '.tooltip', displayTooltip)
69+
.on('mouseleave', '.tooltip', hideTooltip);
6570
});
6671

6772
// Display jQuery UI elements
@@ -360,6 +365,7 @@ function refreshFilterPage() {
360365
$("#count").text(allTrackingDomains.length);
361366

362367
// Display tracker tooltips.
368+
$(".keyContainer").removeClass("hidden");
363369
$("#blockedResources")[0].innerHTML = htmlUtils.getTrackerContainerHtml();
364370

365371
// Display tracking domains.

‎src/js/popup.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,15 @@ function init() {
9090
closeOverlay();
9191
});
9292
$(document).ready(function () {
93-
$('#blockedResourcesContainer').on('change', 'input:radio', updateOrigin);
94-
$('#blockedResourcesContainer').on('mouseenter', '.tooltip', displayTooltip);
95-
$('#blockedResourcesContainer').on('mouseleave', '.tooltip', hideTooltip);
96-
$('#blockedResourcesContainer').on('click', '.userset .honeybadgerPowered', revertDomainControl);
93+
$('#blockedResourcesContainer')
94+
.on('mouseenter', '.tooltip', displayTooltip)
95+
.on('mouseleave', '.tooltip', hideTooltip)
96+
.on('change', 'input:radio', updateOrigin)
97+
.on('click', '.userset .honeybadgerPowered', revertDomainControl);
98+
99+
$('.keyContainer')
100+
.on('mouseenter', '.tooltip', displayTooltip)
101+
.on('mouseleave', '.tooltip', hideTooltip);
97102
});
98103

99104
//toggle activation buttons if privacy badger is not enabled for current url
@@ -288,6 +293,7 @@ function refreshPopup(tabId) {
288293
}
289294

290295
// Display tracker tooltips.
296+
$(".keyContainer").removeClass("hidden");
291297
$("#blockedResources")[0].innerHTML = htmlUtils.getTrackerContainerHtml(tabId);
292298

293299
var printable = [];

‎src/skin/options-layout.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ button
2929
bottom: 27px;
3030
}
3131

32-
#pbInstructions{
33-
width:450px;
32+
#pbInstructions {
33+
margin: 5px 0 15px;
34+
width: 450px;
3435
}
3536

3637
#rawFilters {
@@ -78,7 +79,7 @@ button
7879
width: 0;
7980
}
8081

81-
#blockedResourcesContainer{
82+
#blockedResourcesContainer, #trackingDomainSearch {
8283
width: 390px;
8384
}
8485

@@ -94,3 +95,9 @@ a, a:hover, a:active, a:visited{
9495
color: #00aaaa;
9596
text-decoration: underline;
9697
}
98+
99+
.clickerContainer {
100+
background-color: #e8e9ea;
101+
max-height: 290px;
102+
overflow-y: auto;
103+
}

‎src/skin/options.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,30 @@ <h1><span class="i18n_options_title"></span></h1>
5454
</ul>
5555

5656
<div id="tab-pb-status">
57-
<p class=""></p>
58-
<div id="blockedResourcesContainer">
59-
<p id="pbInstructions">
57+
58+
<p id="pbInstructions">
6059
<span class="i18n_options_pb_has_detected"></span>
6160
<span id='count'>0</span>
6261
<span class="i18n_options_potential"></span>
6362
<a target=_blank tabindex=-1 title="What is a tracker?" href="https://www.eff.org/privacybadger#faq-What-is-a-third-party-tracker?"><span class="i18n_options_tracking_domains"></span></a>
6463
<span class="i18n_options_so_far"></span>
65-
</p>
66-
<div class="spacer"></div>
67-
<input id="trackingDomainSearch" type="text" value="" style="width:100%">
68-
<div id="blockedResources"><span class="i18n_options_loading"></span></div>
64+
</p>
65+
66+
<input id="trackingDomainSearch" type="text" value="">
67+
68+
<div class="keyContainer hidden">
69+
<div class="key">
70+
<img class="tooltip" src="/icons/UI-icons-red.svg" tooltip="i18n_tooltip_block"><img class="tooltip" src="/icons/UI-icons-yellow.svg" tooltip="i18n_tooltip_cookieblock"><img class="tooltip" src="/icons/UI-icons-green.svg" tooltip="i18n_tooltip_allow">
71+
<div class="tooltipContainer"></div>
72+
</div>
6973
</div>
74+
75+
<div id="blockedResourcesContainer">
76+
<div id="blockedResources">
77+
<span class="i18n_options_loading"></span>
78+
</div>
79+
</div>
80+
7081
</div>
7182

7283

‎src/skin/popup-layout.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
overflow: hidden;
3+
margin: 8px 8px 0;
4+
padding: 0 7px;
5+
}
6+
7+
.table {
8+
display: table;
9+
}
10+
11+
.table-row {
12+
display: table-row;
13+
}
14+
15+
.table-cell {
16+
display: table-cell;
17+
}
18+
19+
.container {
20+
height: 38em;
21+
}
22+
23+
.header {
24+
}
25+
26+
.body {
27+
height: 100%;
28+
}
29+
30+
.body-content-outer-wrapper {
31+
height: 100%;
32+
33+
vertical-align: middle;
34+
}
35+
36+
.body-content-inner-wrapper {
37+
height: 100%;
38+
position: relative;
39+
overflow: auto;
40+
41+
background-color: #e8e9ea;
42+
}
43+
44+
.body-content {
45+
position: absolute;
46+
top: 0;
47+
bottom: 0;
48+
left: 0;
49+
right: 0;
50+
}

‎src/skin/popup.css‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,6 @@ a:hover { color: #ec9329 }
5959
padding: .6em 1em;
6060
}
6161

62-
.spacer {
63-
height: 7px;
64-
width: 5px;
65-
display: block;
66-
clear: both;
67-
}
68-
6962
.click-nav ul {position:relative;font-weight:900;list-style-type:none;}
7063
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
7164
.click-nav ul li ul {position:relative;}
@@ -218,31 +211,23 @@ font-size: 16px;
218211
background-color: #EC9329;
219212
color: #333;
220213
}
221-
.clickerContainer {
222-
max-height: 290px;
223-
overflow-y: auto;
224-
background-color: #E8E9EA;
225-
position: relative;
226-
}
214+
227215
.key {
228-
position: absolute;
229-
height: 25px;
230-
left: 0;
231-
right: 0;
232-
z-index: 30;
233-
background: #fefefe;
234-
padding-top: 4px;
235-
padding-left: 215px;
216+
position: relative;
217+
padding: 4px 0 5px 215px;
236218
}
237-
.key img{
238-
margin-left: 19px;
219+
220+
.key img {
221+
margin-left: 19px;
239222
}
240-
.key .tooltipContainer{
241-
position: absolute;
242-
left: 3px;
243-
top:-1;
244-
box-shadow: 0px 5px 5px #000;
223+
224+
.key .tooltipContainer {
225+
position: absolute;
226+
left: 3px;
227+
top: -1px;
228+
box-shadow: 0px 5px 5px #000;
245229
}
230+
246231
#instruction-outer {
247232
display: none;
248233
position: fixed;
@@ -285,9 +270,6 @@ font-size: 16px;
285270
padding-right: 5px;
286271
padding-top: 7px;
287272
}
288-
.clickerContainer{
289-
margin-top: 25px;
290-
}
291273
#pbInstructions{
292274
color: #505050;
293275
font-size: 16px;

‎src/skin/popup.html‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<link type="text/css" href="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css" rel="stylesheet" />
2727
<link type="text/css" href="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" rel="stylesheet" />
2828
<link type="text/css" media="screen" href="/skin/popup.css" rel="stylesheet" />
29+
<link type="text/css" media="screen" href="/skin/popup-layout.css" rel="stylesheet" />
2930
<link type="text/css" media="screen" href="/skin/toggle-switch.css" rel="stylesheet" />
3031
<script type="text/javascript" src="/lib/vendor/jquery-2.2.4.min.js"></script>
3132
<script type="text/javascript" src="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
@@ -62,25 +63,45 @@ <h1 id="report_title" class="i18n_report_title"></h1>
6263
</div>
6364
<div id="mustReloadMsg" style="display:none"><span class="i18n_new_filters_added"></span></div>
6465

65-
<div id='privacyBadgerHeader'>
66-
<a id="options" title="options" href='/skin/options.html' class="control-button grey-button" style="display:block" target="_blank"><img src='/icons/options.svg'></a>
67-
<a id="help" title="help" href='/skin/firstRun.html' class="control-button grey-button" style="display:block" target="_blank"><img src='/icons/help.svg'></a>
68-
<div id='title'><img src='/icons/badger-48.png'> <h2><span class="i18n_privacy_badger"></span></h2></div>
69-
<div class='clear'></div>
70-
<div id="subtitle"><span id="version" class="i18n_version"></span></div>
71-
</div>
72-
<div id="blockedResourcesContainer">
73-
<p id="pbInstructions"> <span class="i18n_pb_detected"></span> <span id='number_trackers'></span> <span class="i18n_popup_instructions"></span></p>
74-
<div class="spacer"></div>
75-
<div id="blockedResources"><span class="options_loading"></span></div>
76-
</div>
66+
<!-- flexible div layout from https://stackoverflow.com/a/28634506 -->
67+
<div class="table container">
68+
<div class="table-row header">
69+
70+
<div id='privacyBadgerHeader'>
71+
<a id="options" title="options" href='/skin/options.html' class="control-button grey-button" style="display:block" target="_blank"><img src='/icons/options.svg'></a>
72+
<a id="help" title="help" href='/skin/firstRun.html' class="control-button grey-button" style="display:block" target="_blank"><img src='/icons/help.svg'></a>
73+
<div id="title">
74+
<img src="/icons/badger-48.png">
75+
<h2><span class="i18n_privacy_badger"></span></h2>
76+
</div>
77+
<div class='clear'></div>
78+
<div id="subtitle"><span id="version" class="i18n_version"></span></div>
79+
</div>
7780

78-
<div id="siteControls">
79-
<center><button id="deactivate_site_btn" class="pbButton" style="display:block"><span class="i18n_popup_disable_for_site"></span></button></center>
80-
<center><button id="activate_site_btn" class="pbButton" style="display:none"> <span class="i18n_popup_enable_for_site"></span></button></center>
81-
<center><button id="error" class="pbButton" style="display:block" target="blank"><span class="i18n_report_broken_site"></span></button></center>
82-
<center><button id="donate" class="pbButton" style="display:block" target="blank"><span class="i18n_donate_to_eff"></span></button></center>
81+
<p id="pbInstructions"> <span class="i18n_pb_detected"></span> <span id='number_trackers'></span> <span class="i18n_popup_instructions"></span></p>
82+
83+
<div class="keyContainer hidden">
84+
<div class="key">
85+
<img class="tooltip" src="/icons/UI-icons-red.svg" tooltip="i18n_tooltip_block"><img class="tooltip" src="/icons/UI-icons-yellow.svg" tooltip="i18n_tooltip_cookieblock"><img class="tooltip" src="/icons/UI-icons-green.svg" tooltip="i18n_tooltip_allow">
86+
<div class="tooltipContainer"></div>
87+
</div>
88+
</div>
89+
90+
</div>
91+
92+
<div id="blockedResourcesContainer" class="table-row body">
93+
<div id="blockedResources" class="table-cell body-content-outer-wrapper">
94+
<span class="options_loading"></span>
95+
</div>
96+
</div>
97+
98+
<div id="siteControls" class="table-row">
99+
<center><button id="deactivate_site_btn" class="pbButton" style="display:block"><span class="i18n_popup_disable_for_site"></span></button></center>
100+
<center><button id="activate_site_btn" class="pbButton" style="display:none"> <span class="i18n_popup_enable_for_site"></span></button></center>
101+
<center><button id="error" class="pbButton" style="display:block" target="blank"><span class="i18n_report_broken_site"></span></button></center>
102+
<center><button id="donate" class="pbButton" style="display:block" target="blank"><span class="i18n_donate_to_eff"></span></button></center>
103+
</div>
83104
</div>
84-
<div class='clear'></div>
105+
85106
</body>
86107
</html>

0 commit comments

Comments
 (0)