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,96 @@
  # 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
+.subscriptions-list,
+.supplemented-subscriptions-list
 {
-  border-collapse: collapse;
-  width: 100%;
+  margin: 0px;
+  list-style: none;
 }
 
-.subscriptions td
+.subscriptions-list
 {
+  padding: 0px;
+}
+
+.supplemented-subscriptions-list
+{
+  padding: 0px 0px 0px 30px;
+}
+
+[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>