Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: pages/uninstalled.tmpl

Issue 29611624: Issue 6047 - Updated templates and uninstalled pages (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Changed document macro in html-attribute include, removed simple template, and removed temporary/unused resources include Created Nov. 25, 2017, 1:35 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
1 title=Adblock Plus has been uninstalled 1 title=Adblock Plus has been uninstalled
2 template=simple 2 template=minimal
ire 2017/11/27 19:48:21 Suggestion: This page could have a similar to desi
juliandoucette 2017/12/04 13:34:05 I agree and I've tried this already myself; unsucc
ire 2017/12/05 10:28:00 Here's my attempt - https://codereview.adblockplus
juliandoucette 2017/12/06 16:30:52 That's a good start.
3 3
4 {% set reasons = [ 4 {% set reasons = [
5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""), 5 ("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""),
6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""), 6 ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""),
7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", " "), 7 ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", " "),
8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""), 8 ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""),
9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A dBlock", "uBlock", "uBlock Origin", "Ghostery"]), 9 ("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["A dBlock", "uBlock", "uBlock Origin", "Ghostery"]),
10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.", ""), 10 ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.", ""),
11 ("7v0", "reason-difficult", "I find it difficult to use Adblock Plus.", ""), 11 ("7v0", "reason-difficult", "I find it difficult to use Adblock Plus.", ""),
12 ] %} 12 ] %}
13 13
14 <head> 14 <head>
15 <meta name="robots" content="noindex" /> 15 <meta name="robots" content="noindex" />
16 <script type="text/javascript"> 16 <link rel="stylesheet" href="/css/uninstalled.css" type="text/css" media="all" >
ire 2017/11/27 19:48:22 NIT: media="all" is the default, I don't think you
juliandoucette 2017/12/04 13:34:04 I must have copy/pasted :(
juliandoucette 2017/12/06 16:30:53 Done.
17 (function()
18 {
19 var adblockersList = null;
20 function toggleView(element)
21 {
22 var targetId = element.getAttribute("data-toggle-view");
23 if (targetId)
24 document.getElementById(targetId).classList.toggle("hidden");
25 }
26
27 function checkSelectedAdblocker()
28 {
29 var selectedOption = adblockersList[adblockersList.selectedIndex];
30 var element = selectedOption.getAttribute("data-show-element");
31 if (element)
32 document.getElementById(element).classList.remove("hidden");
33 else
34 {
35 element = selectedOption.getAttribute("data-hide-element");
36 document.getElementById(element).classList.add("hidden");
37 }
38 }
39
40 function init()
41 {
42 var form = document.getElementById("reasons-form");
43
44 // Create hidden input for GET parameters
45 window.location.search.substr(1).split("&").forEach(function(param)
46 {
47 if (!/.=./.test(param))
48 return;
49
50 var paramSplit = param.split("=");
51 var input = document.createElement("input");
52 input.setAttribute("type", "hidden");
53 input.setAttribute("name", decodeURIComponent(paramSplit[0]));
54 input.setAttribute("value", decodeURIComponent(paramSplit[1]));
55 form.appendChild(input);
56 });
57
58 // Randomly add reasons
59 var reasonsContainer = document.getElementById("reasons");
60 var reasons = document.querySelectorAll("#reasons > li");
61 reasons = Array.prototype.slice.call(reasons);
62 reasonsContainer.innerHTML = "";
63 while (reasons.length)
64 {
65 var randomIndex = Math.floor(Math.random() * (reasons.length -1));
66 var reasonElement = reasons.splice(randomIndex, 1)[0];
67 reasonsContainer.appendChild(reasonElement);
68 var checkbox = reasonElement.querySelector("input[type=checkbox]");
69 if (checkbox.checked)
70 toggleView(checkbox);
71
72 checkbox.addEventListener("change", function(event)
73 {
74 toggleView(event.target);
75 }, false);
76 }
77
78 adblockersList = document.querySelector("#adblockers select");
79 adblockersList.addEventListener("change", function()
80 {
81 checkSelectedAdblocker();
82 }, false);
83 checkSelectedAdblocker();
84
85 var reasonOtherInput = document.getElementById("reason-other-input");
86 var maxLength = reasonOtherInput.getAttribute("maxlength");
87 var charCounter = document.getElementById("characters-countdown");
88 charCounter.textContent = maxLength;
89 reasonOtherInput.addEventListener("keyup", function()
90 {
91 charCounter.textContent = maxLength - reasonOtherInput.value.length;
92 }, false);
93
94 var submitButton = document.getElementById("submit-form");
95 submitButton.addEventListener("click", function(event)
96 {
97 if (!document.querySelector("ul input:checked"))
98 {
99 event.preventDefault();
100 form.setAttribute("class", "error");
101 }
102 else
103 {
104 form.submit();
105 }
106 }, false);
107 }
108 document.addEventListener("DOMContentLoaded", init, false);
109 })();
110 </script>
111 </head> 17 </head>
112 18
113 <div class="notification"> 19 <section id="uninstall-reasons">
114 <strong>{{"Did you uninstall Adblock Plus by accident?"|translate("reinstall-h eadline", "Text next to the Reinstallation button")}}</strong> 20 <div class="container content">
115 {{"index"|linkify}}{{"Reinstall Now"|translate("reinstall", "Reinstall button text")}}</a> 21 <h1>{{ title | translate("title") }}</h1>
116 </div> 22 <p class="lead">{{ "Please select the reason(s) why you uninstalled Adblock Plus:" | translate("reasons-header", "Form heading") }}</p>
117 <section class="highlighted"> 23 <form id="reasons-form" action="uninstalled-submit" method="get">
118 <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translat e("reasons-header", "Form heading")}}</h1> 24 <fieldset>
119 <form id="reasons-form" action="uninstalled-submit" method="get"> 25 <ul id="reasons" class="unstyled">
120 <fieldset> 26 {%- for reasonId, stringId, value, adblockers in reasons %}
121 <ul id="reasons"> 27 <li>
122 {%- for reasonId, stringId, value, adblockers in reasons %} 28 <label>
123 <li> 29 <input type="checkbox" name="reason" {% if adblockers %} data-to ggle-view="adblockers" {% endif %} value="{{ reasonId }}" />
124 <label> 30 {{ value | translate(stringId, "Uninstallation reason") }}
125 <input type="checkbox" name="reason" {% if adblockers %} data-toggle -view="adblockers" {% endif %} value="{{reasonId}}" /> 31 </label>
126 {{value|translate(stringId, "Uninstallation reason")}} 32 {%- if adblockers %}
127 </label> 33 <fieldset class="hidden" id="adblockers">
128 {%- if adblockers %} 34 <select name="otherAdblockerPredefined">
ire 2017/11/27 19:48:21 This select is also unstyled like the textarea. Th
juliandoucette 2017/12/06 16:30:53 Done. Good catch.
129 <fieldset class="hidden" id="adblockers"> 35 {%- for adblocker in adblockers %}
130 <select name="otherAdblockerPredefined"> 36 <option data-hide-element="other-adblocker" value="{{ adbl ocker }}">{{ adblocker }}</option>
131 {%- for name in adblockers %} 37 {%- endfor %}
132 <option data-hide-element="other-adblocker" value="{{name}}">{{nam e}}</option> 38 <option data-show-element="other-adblocker" value="Other">{{ "Other" | translate("other", "Option in list of Adblockers") }}</option>
133 {%- endfor %} 39 </select>
134 <option data-show-element="other-adblocker" value="Other">{{"Other "|translate("other", "Option in list of Adblockers")}}</option> 40 <input id="other-adblocker" class="hidden" type="text" name="o therAdblocker" />
135 </select> 41 </fieldset>
136 <input id="other-adblocker" class="hidden" type="text" name="otherAd blocker" /> 42 {%- endif %}
137 </fieldset> 43 </li>
138 {%- endif %} 44 {%- endfor %}
139 </li> 45 <li>
140 {%- endfor %} 46 <label>
141 <li> 47 <input id="reason-other" data-toggle-view="reason-other-container" type="checkbox" name="reason" value="0v0" />
142 <label> 48 {{ "Other, namely..." | translate("reason-other", "Last uninstalla tion reason") }}
143 <input id="reason-other" data-toggle-view="reason-other-container" t ype="checkbox" name="reason" value="0v0" /> 49 </label>
144 {{"Other, namely..."|translate("reason-other", "Last uninstallation reason")}} 50 <fieldset id="reason-other-container" class="hidden">
145 </label> 51 <textarea
ire 2017/11/27 19:48:21 The textarea has a fixed width so doesn't fit the
ire 2017/11/27 19:48:21 There is no border around this textarea, and since
juliandoucette 2017/12/06 16:30:53 Done. Good catch.
ire 2017/12/07 12:36:26 This hasn't been fixed yet.
juliandoucette 2017/12/14 18:35:22 Done.
146 <fieldset id="reason-other-container" class="hidden"> 52 id="reason-other-input"
147 <textarea id="reason-other-input" name="reasonOther" maxlength="300" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate ("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea> 53 name="reasonOther"
148 <div> 54 cols="60"
149 {{"Characters remaining:"|translate("countdown-text", "Text of ch aracter limit counter appears after selecting 'Other, namely...' option")}} 55 rows="4"
150 <span id="characters-countdown"></span> 56 maxlength="300"
151 </div> 57 placeholder="{{ "Please explain why you are uninstalling Adblock Plus" | translate("reason-other-placeholder", "Textarea placeholder text, appea rs after selecting 'Other, namely...' option") }}"></textarea>
152 </fieldset> 58 <div>
153 </li> 59 {{ "Characters remaining:" | translate("countdown-text", "Text o f character limit counter appears after selecting 'Other, namely...' option") }}
154 </ul> 60 <span id="characters-countdown"></span>
155 </fieldset> 61 </div>
156 <button id="submit-form">{{"Submit"|translate("submit", "Submit button text" )}}</button> 62 </fieldset>
157 <span class="error-label">{{"Please select at least one of the options above "|translate("error-msg", "Error message, is being shown after submission if no i tem selected")}}</span> 63 </li>
158 </form> 64 </ul>
159 <p class="disclaimer"> 65 </fieldset>
160 {{"By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Discla imer below form")}} 66 <p id="reason-error">{{ "Please select at least one of the options above" | translate("error-msg", "Error message, is being shown after submission if no i tem selected")}}</p>
161 </p> 67 <p>
68 <button class="button primary">{{ "Submit" | translate("submit", "Submit button text") }}</button>
69 </p>
70 </form>
71 <p class="disclaimer">
72 <small>{{ "By clicking Submit, you are sending your response to Adblock Pl us. Please see our <a href='/privacy'>privacy policy</a>." | translate("disclaim er", "Disclaimer below form") }}</small>
73 </p>
74 </div>
162 </section> 75 </section>
76
77 <aside id="reinstall" class="bg-accent" >
78 <div class="container content">
79 <p class="lead">
80 {{ "Did you uninstall Adblock Plus by accident?" | translate("reinstall-head line", "Text next to the Reinstallation button") }}
81 {{ "index" | linkify(class="button secondary") }}{{ "Reinstall Now" | transl ate("reinstall", "Reinstall button text") }}</a>
ire 2017/11/27 19:48:21 The text in this button is not aligned center (see
juliandoucette 2017/12/06 16:30:53 Done. Good catch.
82 </div>
83 </aside>
84
85 <script src="/js/uninstalled.js"></script>
OLDNEW
« no previous file with comments | « pages/index.tmpl ('k') | pages/uninstalled-submit.html » ('j') | pages/uninstalled-submit.html » ('J')

Powered by Google App Engine
This is Rietveld