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

pages/subscriptions.tmpl

Index: pages/subscriptions.tmpl
===================================================================
--- a/pages/subscriptions.tmpl
+++ b/pages/subscriptions.tmpl
@@ -13,39 +13,102 @@
  # 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>