Line up rank and midcol elements using a <style> element.

This is a hack to scale the .rank and .midcol elements consistently
across the spotlight box and link listings. We don't know the maximum
link score length until we get to the link listing, at which point we
output a <style> tag to space things globally on the page. It's horribly
ugly, but maybe not as ugly as the style tags and jQuery measurement
hacks it replaces...

r2/r2/lib/pages/things.py

@@ -222,17 +222,12 @@ def default_thing_wrapper(**params):
 # TODO: move this into lib somewhere?
 def wrap_links(links, wrapper = default_thing_wrapper(),
                listing_cls = LinkListing, 
-               num = None, show_nums = False, nextprev = False,
-               num_margin = None, mid_margin = None, **kw):
+               num = None, show_nums = False, nextprev = False, **kw):
     links = tup(links)
     if not all(isinstance(x, basestring) for x in links):
         links = [x._fullname for x in links]
     b = IDBuilder(links, num = num, wrap = wrapper, **kw)
     l = listing_cls(b, nextprev = nextprev, show_nums = show_nums)
-    if num_margin is not None:
-        l.num_margin = num_margin
-    if mid_margin is not None:
-        l.mid_margin = mid_margin
     return l.listing()
 
 

r2/r2/lib/template_helpers.py

@@ -263,31 +263,8 @@ def replace_render(listing, item, render_func):
             replacements['childlisting'] = ''
 
         #only LinkListing has a show_nums attribute
-        if listing:
-            if hasattr(listing, "show_nums"):
-                if listing.show_nums:
-                    num_str = str(item.num)
-                    if hasattr(listing, "num_margin"):
-                        num_margin = str(listing.num_margin)
-                    else:
-                        num_margin = "%.2fex" % (len(str(listing.max_num))*1.1)
-                else:
-                    num_str = ''
-                    num_margin = "0px;display:none"
-
-                replacements["numcolmargin"] = num_margin
-                replacements["num"] = num_str
-
-            if hasattr(listing, "max_score"):
-                mid_margin = len(str(listing.max_score))
-                if hasattr(listing, "mid_margin"):
-                    mid_margin = str(listing.mid_margin)
-                elif mid_margin == 1:
-                    mid_margin = "15px"
-                else:
-                    mid_margin = "%dex" % (mid_margin+1)
-
-                replacements["midcolmargin"] = mid_margin
+        if listing and hasattr(listing, "show_nums"):
+            replacements["num"] = str(item.num) if listing.show_nums else ""
 
         if hasattr(item, "num_comments"):
             com_label, com_cls = comment_label(item.num_comments)

r2/r2/models/link.py

@@ -577,9 +577,7 @@ class Link(Thing, Printable):
             # bits that we will render stubs (to make the cached
             # version more flexible)
             item.num = CachedVariable("num")
-            item.numcolmargin = CachedVariable("numcolmargin")
             item.commentcls = CachedVariable("commentcls")
-            item.midcolmargin = CachedVariable("midcolmargin")
             item.comment_label = CachedVariable("numcomments")
             item.lastedited = CachedVariable("lastedited")
 

r2/r2/public/static/js/spotlight.js

@@ -142,13 +142,6 @@ r.spotlight._advance = function(dir) {
         $nextprev.removeClass('working')
         listing.removeClass('loading')
 
-        // size the rank element so that spotlight box
-        // items line up with the main page listing
-        $next
-            .find('.rank')
-            .width($('#siteTable .rank').width())
-            .end()
-
         // match the listing background to that of the displayed thing
         listing.css('background-color', $next.css('background-color'))
 

r2/r2/templates/link.html

@@ -34,7 +34,7 @@
  
 <%def name="numcol()">
   <% num = thing.num %>
-  <span class="rank" style="width:${thing.numcolmargin};">
+  <span class="rank">
     %if thing.num > 0:
       ${thing.num}
     %endif
@@ -175,11 +175,7 @@ ${parent.thing_data_attributes(what)} data-ups="${what.upvotes}" data-downs="${w
 </%def>
 
 <%def name="midcol(display=True, cls = '')">
-  %if thing.pref_compress:
     <div class="midcol ${cls}"
-  %else:
-    <div class="midcol ${cls}" style="width:${thing.midcolmargin};" 
-  %endif
        ${not display and "style='display:none'" or ''}>
     ${self.arrow(thing, 1, thing.likes)}
     %if thing.pref_compress:

r2/r2/templates/linklisting.html

@@ -0,0 +1,33 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be
+## consistent with Exhibit B.
+##
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+##
+## The Original Code is reddit.
+##
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is reddit Inc.
+##
+## All portions of the code written by reddit are Copyright (c) 2006-2013
+## reddit Inc. All Rights Reserved.
+###############################################################################
+
+## 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 .rank {
+    width: ${len(str(thing.max_num)) * 1.1}ex
+  }
+  body > .content .midcol {
+    width: ${max(len(str(thing.max_score)), 2) + 1.1}ex
+  }
+</style>
+<%include file="listing.html"/>