Issue 4920 - Add "Ready for Windows" section to adblockplus.org

includes/index.tmpl

 title=Adblock Plus - Surf the web without annoying ads!
 noheading=True
 localefile=index
 
 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-2017 eyeo GmbH
  #
  # Adblock Plus is free software: you can redistribute it and/or modify
  # it under the terms of the GNU General Public License version 3 as
@@ skipping 17 matching lines @@
 <link href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" rel="chrome-webstore-item">
 <meta content="product" property="og:type">
 <meta content="https://adblockplus.org/img/adblockplus_promo.png" property="og:image">
 <meta content="https://adblockplus.org/" property="og:url">
 <meta content="{{"Adblock Plus - Surf the web without annoying ads!"|translate("s1")}}" name="title">
 <meta content="{{"<fix>Adblock Plus</fix> is the most popular ad blocker available for <fix>Firefox</fix>, <fix>Chrome</fix>, <fix>Opera</fix>, <fix>Safari</fix>, <fix>Android</fix> and <fix>Internet Explorer</fix>. Block all annoying ads all over the web: remove video ads on <fix>YouTube</fix>, block <fix>Facebook</fix> ads, get rid of pop-ups and much more. On <fix>Google Chrome</fix>, <fix>Adblock Plus</fix> is one of the fastest growing extensions ever. <fix>Adblock Plus</fix> is used on over <fix>100</fix> million devices. Download online for free now!"|translate("s2")}}" name="description">
 <meta content="{{"Adblock Plus - Surf the web without annoying ads!"|translate("s1")}}" property="og:title">
 <meta content="{{"<fix>Adblock Plus</fix> is the most popular ad blocker available for <fix>Firefox</fix>, <fix>Chrome</fix>, <fix>Opera</fix>, <fix>Safari</fix>, <fix>Android</fix> and <fix>Internet Explorer</fix>. Block all annoying ads all over the web: remove video ads on <fix>YouTube</fix>, block <fix>Facebook</fix> ads, get rid of pop-ups and much more. On <fix>Google Chrome</fix>, <fix>Adblock Plus</fix> is one of the fastest growing extensions ever. <fix>Adblock Plus</fix> is used on over <fix>100</fix> million devices. Download online for free now!"|translate("s2")}}" property="og:description">
 </head>
 
-<div id="abb-banner">
+<div id="abb-banner" class="notice">
   <h2>{{"Want to block ads on your smartphone or tablet?"|translate("abb-banner-headline")}}</h2>
   <img src="/img/abb-promo-image.png" alt="{{"Adblock Browser promotional image"|translate("abb-promotion-alt")}}" />
   <a id="abb-android-download" href="https://adblockplus.org/redirect?link=adblock_browser_android_store">{{"Download Adblock Browser"|translate("abb-banner-button-text")}}</a>
   <a id="abb-ios-download" href="https://adblockplus.org/redirect?link=adblock_browser_ios_store">{{"Download Adblock Browser"|translate("abb-banner-button-text")}}</a>
 </div>
 <div itemscope="itemscope" itemtype="http://schema.org/SoftwareApplication">
   <section id="main">
     <div id="summary">
       <h1 itemprop="name">{{"Adblock Plus"|translate("s5")}}</h1>
       <h2 itemprop="description">{{"Surf the web without annoying ads!"|translate("s6")}}</h2>
@@ skipping 110 matching lines @@
 
   <section>
     <div class="sprite" id="facts-privacy"></div>
     <h1>{{"Privacy Guaranteed"|translate("s48")}}</h1>
     <p>
       {{"Adblock Plus will never collect your <a href=\"privacy\">personal data</a>."|translate("privacy-policy-note")}}
     </p>
 
   </section>
 </div>
 

[juliandoucette, 2017/06/07 17:48:11]

I know that I told you that you could show/hide based on a class applied to the
body. Alternatively (it just occurred to me - sorry), you could test the page
name in a conditional template tag.

{% if page == "internet-explorer" %}
bla bla bla
{% endif %}

[ire, 2017/06/08 13:41:26]

Okay. I like that better than hiding with CSS so I'll refactor 

[juliandoucette, 2017/06/16 18:19:02]

:+1: 

Note: I asked Ollie if this applies to Edge too JIC.
https://issues.adblockplus.org/ticket/4920#comment:19

-<div id="ready-for-windows-note">

[juliandoucette, 2017/06/07 17:48:11]

Why not place the `id` on the `<p>` and drop the `<div>`?

[juliandoucette, 2017/06/07 17:48:11]

NIT: I don't think "note" is descriptive (Ack: You probably got the idea from
the paragraph above). Perhaps "alert" (aka
https://v4-alpha.getbootstrap.com/components/alerts/
http://foundation.zurb.com/sites/docs/v/5.5.3/components/alert_boxes.html ) or
"notice".

[ire, 2017/06/08 13:41:26]

Okay, I'll go with "ready-for-windows-notice".

[ire, 2017/06/08 13:41:26]

Will do.

-  <p>{{"Adblock Plus for Internet Explorer is supported by eyeo GmbH on the following editions of Windows 10 – Windows 10 Pro, Windows 10 Education and Windows 10 Enterprise. Adblock Plus for Internet Explorer is supported on the in-market supported servicing branches of Windows 10 including - Current Branch, Current Branch for Business and the following Long-Term Servicing branch: Windows 10."|translate("ready-for-windows-note")}}</p>

[juliandoucette, 2017/06/07 17:48:11]

Don't forget to `<fix>` product / brand names.

[ire, 2017/06/08 13:41:26]

Okay. I mentioned this in the translation string doc, but is this a rule we
have? And which product names apply? Does "Windows 10 Pro" need to be fixed, or
just "Windows"? How about "Internet Explorer"?

[juliandoucette, 2017/06/08 21:12:30]

Good questions. 

I know we fix all of "Internet Explorer" and I think we fix all of "Windows 10
Pro". 

Can you confirm this @Tamara?

[juliandoucette, 2017/06/16 18:16:16]

(Moving the discussion that was in reply back to review)

Considering the lack of fix tags in the existing content, our current process,
and the discussion going on in
https://codereview.adblockplus.org/29422615/#msg14 I think we can safely ignore
fix tags in this change. 

-</div>
+{% if page == "internet-explorer" %}
+<p id="ready-for-windows-notice" class="notice">
+  {{"Adblock Plus for Internet Explorer is supported by eyeo GmbH on the following editions of Windows 10 – Windows 10 Pro, Windows 10 Education and Windows 10 Enterprise. Adblock Plus for Internet Explorer is supported on the in-market supported servicing branches of Windows 10 including - Current Branch, Current Branch for Business and the following Long-Term Servicing branch: Windows 10."|translate("ready-for-windows-notice")}}
+</p>
+{% endif %}
 
 <hr>
 <div id="footnote">
   [1] {{"The following rules <strong>have</strong> and <strong>always will</strong> apply to everyone, without exception:"|translate("footnote-headline")}}
   <ul>
     <li>
       {{"Participants cannot pay to avoid the <a href=\"acceptable-ads#criteria-general\">criteria</a>. Every ad must comply."|translate("footnote-must-comply")}}
     </li>
     <li>
       {{"For transparency, we add all Acceptable Ads to our <a href=\"https://adblockplus.org/forum/viewforum.php?f=12\">forum</a> so that our community of users can provide feedback."|translate("footnote-forum")}}
@@ skipping 188 matching lines @@
       <h2>{{"Be notified when Adblock Plus for Microsoft Edge is available!"|translate("abp-for-edge-be-notified")}}</h2>
 
       <p>
         {{"Microsoft Edge <a href='https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508820-javascript-browser-extensions'>does not yet support extensions</a>. However, you can be sure that a version of Adblock Plus for Microsoft Edge will be released as soon as possible. While you're waiting, you may want to try the latest version of Adblock Plus for Internet Explorer."|translate("ms-edge-description")}}
       </p>
     </div>
   </div>
 </section>
 
 <script src="/js/index.js"></script>