Index: pages/uninstalled.tmpl |
=================================================================== |
--- a/pages/uninstalled.tmpl |
+++ b/pages/uninstalled.tmpl |
@@ -1,162 +1,85 @@ |
title=Adblock Plus has been uninstalled |
-template=simple |
+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.
|
{% set reasons = [ |
("1v0", "reason-not-installed", "I didn't install Adblock Plus.", ""), |
("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser.", ""), |
("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program.", ""), |
("4v0", "reason-see-ads", "Adblock Plus didn't block all ads.", ""), |
("5v0", "reason-better-adblocker", "I found better ad blocking software.", ["AdBlock", "uBlock", "uBlock Origin", "Ghostery"]), |
("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.", ""), |
("7v0", "reason-difficult", "I find it difficult to use Adblock Plus.", ""), |
] %} |
<head> |
<meta name="robots" content="noindex" /> |
- <script type="text/javascript"> |
- (function() |
- { |
- var adblockersList = null; |
- function toggleView(element) |
- { |
- var targetId = element.getAttribute("data-toggle-view"); |
- if (targetId) |
- document.getElementById(targetId).classList.toggle("hidden"); |
- } |
- |
- function checkSelectedAdblocker() |
- { |
- var selectedOption = adblockersList[adblockersList.selectedIndex]; |
- var element = selectedOption.getAttribute("data-show-element"); |
- if (element) |
- document.getElementById(element).classList.remove("hidden"); |
- else |
- { |
- element = selectedOption.getAttribute("data-hide-element"); |
- document.getElementById(element).classList.add("hidden"); |
- } |
- } |
- |
- function init() |
- { |
- var form = document.getElementById("reasons-form"); |
- |
- // Create hidden input for GET parameters |
- window.location.search.substr(1).split("&").forEach(function(param) |
- { |
- if (!/.=./.test(param)) |
- return; |
- |
- var paramSplit = param.split("="); |
- var input = document.createElement("input"); |
- input.setAttribute("type", "hidden"); |
- input.setAttribute("name", decodeURIComponent(paramSplit[0])); |
- input.setAttribute("value", decodeURIComponent(paramSplit[1])); |
- form.appendChild(input); |
- }); |
- |
- // Randomly add reasons |
- var reasonsContainer = document.getElementById("reasons"); |
- var reasons = document.querySelectorAll("#reasons > li"); |
- reasons = Array.prototype.slice.call(reasons); |
- reasonsContainer.innerHTML = ""; |
- while (reasons.length) |
- { |
- var randomIndex = Math.floor(Math.random() * (reasons.length -1)); |
- var reasonElement = reasons.splice(randomIndex, 1)[0]; |
- reasonsContainer.appendChild(reasonElement); |
- var checkbox = reasonElement.querySelector("input[type=checkbox]"); |
- if (checkbox.checked) |
- toggleView(checkbox); |
- |
- checkbox.addEventListener("change", function(event) |
- { |
- toggleView(event.target); |
- }, false); |
- } |
- |
- adblockersList = document.querySelector("#adblockers select"); |
- adblockersList.addEventListener("change", function() |
- { |
- checkSelectedAdblocker(); |
- }, false); |
- checkSelectedAdblocker(); |
- |
- var reasonOtherInput = document.getElementById("reason-other-input"); |
- var maxLength = reasonOtherInput.getAttribute("maxlength"); |
- var charCounter = document.getElementById("characters-countdown"); |
- charCounter.textContent = maxLength; |
- reasonOtherInput.addEventListener("keyup", function() |
- { |
- charCounter.textContent = maxLength - reasonOtherInput.value.length; |
- }, false); |
- |
- var submitButton = document.getElementById("submit-form"); |
- submitButton.addEventListener("click", function(event) |
- { |
- if (!document.querySelector("ul input:checked")) |
- { |
- event.preventDefault(); |
- form.setAttribute("class", "error"); |
- } |
- else |
- { |
- form.submit(); |
- } |
- }, false); |
- } |
- document.addEventListener("DOMContentLoaded", init, false); |
- })(); |
- </script> |
+ <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.
|
</head> |
-<div class="notification"> |
- <strong>{{"Did you uninstall Adblock Plus by accident?"|translate("reinstall-headline", "Text next to the Reinstallation button")}}</strong> |
- {{"index"|linkify}}{{"Reinstall Now"|translate("reinstall", "Reinstall button text")}}</a> |
-</div> |
-<section class="highlighted"> |
- <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translate("reasons-header", "Form heading")}}</h1> |
- <form id="reasons-form" action="uninstalled-submit" method="get"> |
- <fieldset> |
- <ul id="reasons"> |
- {%- for reasonId, stringId, value, adblockers in reasons %} |
- <li> |
- <label> |
- <input type="checkbox" name="reason" {% if adblockers %} data-toggle-view="adblockers" {% endif %} value="{{reasonId}}" /> |
- {{value|translate(stringId, "Uninstallation reason")}} |
- </label> |
- {%- if adblockers %} |
- <fieldset class="hidden" id="adblockers"> |
- <select name="otherAdblockerPredefined"> |
- {%- for name in adblockers %} |
- <option data-hide-element="other-adblocker" value="{{name}}">{{name}}</option> |
- {%- endfor %} |
- <option data-show-element="other-adblocker" value="Other">{{"Other"|translate("other", "Option in list of Adblockers")}}</option> |
- </select> |
- <input id="other-adblocker" class="hidden" type="text" name="otherAdblocker" /> |
- </fieldset> |
- {%- endif %} |
- </li> |
- {%- endfor %} |
- <li> |
- <label> |
- <input id="reason-other" data-toggle-view="reason-other-container" type="checkbox" name="reason" value="0v0" /> |
- {{"Other, namely..."|translate("reason-other", "Last uninstallation reason")}} |
- </label> |
- <fieldset id="reason-other-container" class="hidden"> |
- <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> |
- <div> |
- {{"Characters remaining:"|translate("countdown-text", "Text of character limit counter appears after selecting 'Other, namely...' option")}} |
- <span id="characters-countdown"></span> |
- </div> |
- </fieldset> |
- </li> |
- </ul> |
- </fieldset> |
- <button id="submit-form">{{"Submit"|translate("submit", "Submit button text")}}</button> |
- <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 item selected")}}</span> |
- </form> |
- <p class="disclaimer"> |
- {{"By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Disclaimer below form")}} |
- </p> |
+<section id="uninstall-reasons"> |
+ <div class="container content"> |
+ <h1>{{ title | translate("title") }}</h1> |
+ <p class="lead">{{ "Please select the reason(s) why you uninstalled Adblock Plus:" | translate("reasons-header", "Form heading") }}</p> |
+ <form id="reasons-form" action="uninstalled-submit" method="get"> |
+ <fieldset> |
+ <ul id="reasons" class="unstyled"> |
+ {%- for reasonId, stringId, value, adblockers in reasons %} |
+ <li> |
+ <label> |
+ <input type="checkbox" name="reason" {% if adblockers %} data-toggle-view="adblockers" {% endif %} value="{{ reasonId }}" /> |
+ {{ value | translate(stringId, "Uninstallation reason") }} |
+ </label> |
+ {%- if adblockers %} |
+ <fieldset class="hidden" id="adblockers"> |
+ <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.
|
+ {%- for adblocker in adblockers %} |
+ <option data-hide-element="other-adblocker" value="{{ adblocker }}">{{ adblocker }}</option> |
+ {%- endfor %} |
+ <option data-show-element="other-adblocker" value="Other">{{ "Other" | translate("other", "Option in list of Adblockers") }}</option> |
+ </select> |
+ <input id="other-adblocker" class="hidden" type="text" name="otherAdblocker" /> |
+ </fieldset> |
+ {%- endif %} |
+ </li> |
+ {%- endfor %} |
+ <li> |
+ <label> |
+ <input id="reason-other" data-toggle-view="reason-other-container" type="checkbox" name="reason" value="0v0" /> |
+ {{ "Other, namely..." | translate("reason-other", "Last uninstallation reason") }} |
+ </label> |
+ <fieldset id="reason-other-container" class="hidden"> |
+ <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.
|
+ id="reason-other-input" |
+ name="reasonOther" |
+ cols="60" |
+ rows="4" |
+ 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> |
+ <div> |
+ {{ "Characters remaining:" | translate("countdown-text", "Text of character limit counter appears after selecting 'Other, namely...' option") }} |
+ <span id="characters-countdown"></span> |
+ </div> |
+ </fieldset> |
+ </li> |
+ </ul> |
+ </fieldset> |
+ <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 item selected")}}</p> |
+ <p> |
+ <button class="button primary">{{ "Submit" | translate("submit", "Submit button text") }}</button> |
+ </p> |
+ </form> |
+ <p class="disclaimer"> |
+ <small>{{ "By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>." | translate("disclaimer", "Disclaimer below form") }}</small> |
+ </p> |
+ </div> |
</section> |
+ |
+<aside id="reinstall" class="bg-accent" > |
+ <div class="container content"> |
+ <p class="lead"> |
+ {{ "Did you uninstall Adblock Plus by accident?" | translate("reinstall-headline", "Text next to the Reinstallation button") }} |
+ {{ "index" | linkify(class="button secondary") }}{{ "Reinstall Now" | translate("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.
|
+ </div> |
+</aside> |
+ |
+<script src="/js/uninstalled.js"></script> |