From 8a21371deb38d7849672ce363115e9c0715a6085 Mon Sep 17 00:00:00 2001
From: Max Goodman <c@chromakode.com>
Date: Tue, 15 Apr 2014 00:25:29 -0700
Subject: [PATCH] Ugly hacks to make trending subreddits align with links.

---
 r2/r2/public/static/css/reddit.less        | 22 ++++++++++++++++++----
 r2/r2/templates/linklisting.html           |  7 ++-----
 r2/r2/templates/trendingsubredditsbar.html | 18 +++++++++++-------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less
index 71b6d4df7..c1f91b8e3 100755
--- a/r2/r2/public/static/css/reddit.less
+++ b/r2/r2/public/static/css/reddit.less
@@ -1855,6 +1855,14 @@ a.star { text-decoration: none; color: #ff8b60 }
     text-align: right;
 }
 
+.rank-spacer {
+    font-size: medium;
+}
+
+.midcol-spacer {
+    font-size: small;
+}
+
 .link.compressed { margin-bottom: 5px; }
 .link.compressed .rank { margin-top: 10px; }
 .link.compressed .title { margin: -2px 0 3px }
@@ -8337,8 +8345,6 @@ body.with-listing-chooser {
 }
 
 .trending-subreddits {
-    // required so that ex units are in sync with .midcol
-    font-size: small;
     margin-top: -4px;
     line-height: 1.75em;
 
@@ -8349,8 +8355,16 @@ body.with-listing-chooser {
         padding-left: 15px;
     }
 
-    strong, ul, a {
-        font-size: x-small;
+    // hax to align trending subreddits list with links/thumbnails
+    // this uses the overflow:hidden trick to create a block formatting context
+    // to shift the left edge of the trending subreddits list over
+    .rank-spacer, .midcol-spacer {
+        float: left;
+        height: 1px;
+    }
+
+    .trending-subreddits-content {
+        overflow: hidden;
     }
 
     strong {
diff --git a/r2/r2/templates/linklisting.html b/r2/r2/templates/linklisting.html
index f327ff245..511cbad51 100644
--- a/r2/r2/templates/linklisting.html
+++ b/r2/r2/templates/linklisting.html
@@ -23,14 +23,11 @@
 ## a kooky hack to make ranks and voting arrows in the spotlight box line up
 ## without late rendering or blasting style attributes everywhere
 <style>
-  body > .content .link .rank {
+  body > .content .link .rank, .rank-spacer {
     width: ${thing.rank_width}ex
   }
-  body > .content .link .midcol {
+  body > .content .link .midcol, .midcol-spacer {
     width: ${thing.midcol_width}ex
   }
-  .content .trending-subreddits {
-    padding-left: ${thing.midcol_width}ex
-  }
 </style>
 <%include file="listing.html"/>
diff --git a/r2/r2/templates/trendingsubredditsbar.html b/r2/r2/templates/trendingsubredditsbar.html
index 5c8da14fa..c7b35a0c9 100644
--- a/r2/r2/templates/trendingsubredditsbar.html
+++ b/r2/r2/templates/trendingsubredditsbar.html
@@ -21,11 +21,15 @@
 ###############################################################################
 
 <div class="trending-subreddits">
-  <strong>${_('trending subreddits')}</strong>
-  <ul>
-  %for subreddit_name in thing.subreddit_names:
-    <li><a href="/r/${subreddit_name}" target="_blank">/r/${subreddit_name}</a></li>
-  %endfor
-  </ul>
-  <a href="${thing.comment_url}" class="${thing.comment_label_cls}">${thing.comment_label}</a>
+  <div class="rank-spacer"></div>
+  <div class="midcol-spacer"></div>
+  <div class="trending-subreddits-content">
+    <strong>${_('trending subreddits')}</strong>
+    <ul>
+    %for subreddit_name in thing.subreddit_names:
+      <li><a href="/r/${subreddit_name}" target="_blank">/r/${subreddit_name}</a></li>
+    %endfor
+    </ul>
+    <a href="${thing.comment_url}" class="${thing.comment_label_cls}">${thing.comment_label}</a>
+  </div>
 </div>