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

pages/subscriptions.tmpl

 title=Known Adblock Plus subscriptions
 {#
  # 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/>.
  #}
 
 
 <style type="text/css">
-.subscriptions
+.screen-reader-text
 {
-  border-collapse: collapse;
-  width: 100%;
+  clip: rect(1px, 1px, 1px, 1px);

[Thomas Greiner, 2016/07/27 09:42:10]

According to https://developer.mozilla.org/en-US/docs/Web/CSS/clip this property
has been deprecated so it'd be great if we could avoid using it.

I'm just wondering why we need special treatment for this element in the first
place. If it's helpful for visually impaired visitors it's probably also good
for the rest, right?

I'm ignoring the fact that this text doesn't exist in the current version and
hasn't been mentioned in the ticket either.

[juliandoucette, 2016/07/27 12:11:01]

I agree. 

I vote: Leave the text and remove the class + definition.

Is that ok with you?

[Thomas Greiner, 2016/07/27 13:25:48]

Yep, sounds good. :)

[juliandoucette, 2016/07/28 21:34:01]

Done.

+  position: absolute;
 }
 
-.subscriptions td
+.subscriptions-list,
+.supplemented-subscriptions-list
 {
+  margin: 0px;
+  list-style: none;
+}
+
+.subscriptions-list
+{
+  padding: 0px;
+}
+
+.supplemented-subscriptions-list
+{
+  padding: 0px 0px 0px 30px;

[Thomas Greiner, 2016/07/27 09:42:10]

Note that since you're using `[dir="rtl"]` below feel free to use `padding-left`
here since this is just the shorthand syntax for that. Of course you can just
leave it like that if you prefer this syntax. :)

[juliandoucette, 2016/07/27 12:11:01]

I switched it to short hand to avoid defining a padding-left AND padding-right
in rtl OR defining padding-left ltr only. 

+}
+
+[dir="rtl"] .supplemented-subscriptions-list
+{
+  padding: 0px 30px 0px 0px;
+}
+
+.subscription
+{
+  position: relative;
+  overflow: auto;
+  /* Using outline and margin instead of border to prevent overlapping
+     and missing connections in hierarchy */
+  outline: 1px dashed #000;
+  margin-left: -1px;
+  margin-top: 1px;
+}
+
+#content .subscription h1
+{
+  margin: 0px;
+  font-size: 16px;
+}
+
+.subscription p
+{
+  margin: 0px;
+}
+
+.subscription-summary,
+.subscription-authors,
+.subscription-links
+{
+  padding: 5px;
+}
+
+.subscription-content,
+.subscription-details
+{
+  float: left;
   width: 50%;
 }
 
-.subscriptions td, .subscriptions th
+[dir="rtl"] .subscription-content,
+[dir="rtl"] .subscription-details
 {
-  vertical-align: top;
-  border: 1px dashed black;
-  padding: 5px;
+  float: right;
 }
 
-.subscriptions .dummy
+.subscription-authors,
+.subscription-links
 {
-  border-style: none;
-  width: 20px;
-  min-width: 20px;
+  border-left: 1px dashed #000;
+}
+
+[dir="rtl"] .subscription-authors,
+[dir="rtl"] .subscription-links
+{
+  border-left: none;
+  border-right: 1px dashed #000;
+}
+
+.subscription-links
+{
+  border-top: 1px dashed #000;
 }
 
 .subscriptions .deprecated
 {
   opacity: 0.5;
 }
 </style>
 
 <p>{{"This is a list of the actively maintained filter subscriptions we're aware of. You can subscribe to any of them by simply clicking its \"Subscribe\" link and confirming your decision. The filters will be added to Adblock Plus and updated automatically. Note that <a href=\"getting_started#subscription\">you shouldn't add too many filter subscriptions</a>."|translate("s1")}}</p>
 
 
 {% from "includes/subscriptionList" import display_subscriptions %}
 
 {{ display_subscriptions(get_subscriptions()) }}
 
 
 <p>{{"Can't see your filter list here? <a href=\"mailto:subscriptionlist@adblockplus.org\">Send</a> the information you would like to be displayed here. Please note that in order to be included in this list your subscription must contain a comment at the beginning describing the origin of the filter list and the preferred way of contacting you if problems with your list occur. You should also be certain that when these issues arise you will be able to fix them in a reasonable amount of time."|translate("s2")}}</p>
 
 <p>
 {{"Please note that all of these filter lists are being maintained by third parties. Eyeo, the company behind Adblock Plus, has no control over them.\nWe are only listing them to help you find lists that could be useful to you.\nIn no case shall Eyeo be held liable towards you or any other third party for any loss or damage (including but not limited to loss of chances and of business) deriving directly or indirectly from your use of these lists."|translate("s3")}}
 </p>