Issue 3097 - Refactored subscriptions list table on adblockplus.org/en/subscriptions

includes/subscriptionList.tmpl

 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-2016 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
  # published by the Free Software Foundation.
  #
  # Adblock Plus is distributed in the hope that it will be useful,
  # but WITHOUT ANY WARRANTY; without even the implied warranty of
  # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  # GNU General Public License for more details.
  #
  # You should have received a copy of the GNU General Public License
  # along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  #}
 
 {%- macro process_subscription(subscription, parent=None) %}
   <li>
     <article class="subscription {% if subscription["deprecated"] %}deprecated{% endif %}">
       <div class="subscription-content">
         <div class="subscription-summary">
           <h1>{{ subscription["name"] }}</h1>
           <p>
-            <span class="sr-only">{{ "Specialization"|translate("specialization") }}:</span>

[Thomas Greiner, 2016/07/15 16:07:53]

Detail: Not sure what "sr-only" means but it's not being used for styling so it
looks like you can remove the `<span>` around the text entirely.

[juliandoucette, 2016/07/19 22:29:17]

My mistake.

"sr" stands for "screen reader".

I forgot to add styles for this class.

+            {{ "Specialization"|translate("specialization") }}:
             {{ subscription["specialization"] }}
           </p>
           {%- if subscription["supplements"] %}
-          <p>{{ "supplement for"|translate("supplements_prefix") }} {{ ' / '.join(subscription["supplements"]) }} {{ " "|translate("supplements_suffix") }}.</p>

[Thomas Greiner, 2016/07/15 16:07:53]

Detail: Mind splitting this content (and the content from other paragraphs) up
into multiple code lines to make it easier to read? Because I noticed you did
that in the one above and it shouldn't have any impact on how the text is
displayed on the page.

[juliandoucette, 2016/07/19 22:29:16]

Done.

+          <p>
+            {{ "supplement for"|translate("supplements_prefix") }}
+            {{ ' / '.join(subscription["supplements"]) }}
+            {{ " "|translate("supplements_suffix") }}.
+          </p>
           {%- endif %}
         </div>
       </div>
       <footer class="subscription-details">
         <div class="subscription-authors">

[Thomas Greiner, 2016/07/15 16:07:53]

Detail: Since you've decided to use `<footer>` for containing the filter list
meta data, what about using `<address>` instead of this `<div>` here?

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

[juliandoucette, 2016/07/19 22:29:16]

Good idea.

           {%- if subscription["maintainer"] %}
-          <p>{{ "by"|translate("maintainer_prefix") }} {{ subscription["maintainer"] }} {{ " "|translate("maintainer_suffix") }}</p>
+          <address>
+            {{ "by"|translate("maintainer_prefix") }}
+            {{ subscription["maintainer"] }}
+            {{ " "|translate("maintainer_suffix") }}
+          </address>
           {%- endif %}
           {%- set is_first = True %}
           <p>
           {% for key, default in (('homepage', 'Homepage'), ('forum', 'Forum'), ('contact', 'Contact page'), ('faq', 'FAQ'), ('blog', 'Blog'), ('changelog', 'Changelog'), ('policy', 'Policy')) -%}
           {%- set url = subscription[key] -%}
             {%- if url -%}
               {%- if not is_first %}, {% endif -%}
               {%- set is_first = False -%}
               <a href="{{ url }}">{{ default|translate(key) }}</a>
             {%- endif %}
           {%- endfor %}
           </p>
         </div>
         <div class="subscription-links">
           {%- if subscription["deprecated"] %}
-          <p><strong>{{ "Note: This list is not optimized for Adblock Plus and may slow down your browsing experience."|translate("deprecation_warning") }}</strong></p>
+          <p>
+            <strong>{{ "Note: This list is not optimized for Adblock Plus and may slow down your browsing experience."|translate("deprecation_warning") }}</strong>
+          </p>
           {%- endif %}
           <p>
-          {{ "Subscribe:"|translate("subscribe") }}{{ ' ' }}
+            {{ "Subscribe:"|translate("subscribe") }}{{ ' ' }}
             {%- for title, url, complete in subscription["variants"] -%}
             <a href="abp:subscribe?location={{ url|urlencode }}&amp;title={{ title|urlencode }}
               {%- if parent and not complete -%}
                 {%- set main_title, main_url, main_complete = parent.variants[0] -%}
                 &amp;requiresLocation={{ main_url|urlencode }}&amp;requiresTitle={{ main_title|urlencode }}
               {%- endif -%}
             ">{{ title }}</a>{%- if not loop.last %}, {% endif -%}
             {%- endfor %}
           </p>
         </div>
@@ skipping 21 matching lines @@
 
   <ul class="subscriptions-list">
       {%- endif -%}
     {%- endif -%}
     {%- if subscription["type"] not in subscription["supplementsType"] -%}
       {{ process_subscription(subscription) }}
     {%- endif -%}
   {%- endfor %}
   </ul>
 {% endmacro %}