Add link flair to the compact and mobile views.

kbrower · Apr 17, 2012 · 71fbe5c · 71fbe5c
1 parent 336ce57
commit 71fbe5c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/r2/r2/public/static/css/compact.css b/r2/r2/public/static/css/compact.css
@@ -552,4 +552,6 @@ body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }
 
 a.author { margin-right: 0.5em; }
 
-.flair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }
+.flair, .linkflair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }
+
+.linkflair { font-weight: normal; }
diff --git a/r2/r2/public/static/css/mobile.css b/r2/r2/public/static/css/mobile.css
@@ -147,5 +147,6 @@ ul {
 .md img { display: none }
 .md ol, .md ul { margin: 10px 2em; }
 .md pre { margin: 10px; }
-.flair { color: #545454; background-color: #F5F5F5; border: 1px solid #DEDEDE; }
-a.author, .flair { margin-right: 0.5em }
+.flair, .linkflair { color: #545454; background-color: #F5F5F5; border: 1px solid #DEDEDE; }
+.linkflair { font-size: small; }
+a.author, .flair, .linkflair { margin-right: 0.5em }
diff --git a/r2/r2/templates/link.compact b/r2/r2/templates/link.compact
@@ -61,13 +61,19 @@
     else:
         url = thing.url
   %>
+  %if c.site.link_flair_position == 'left' and thing.flair_text:
+    <span class="linkflair">${thing.flair_text}</span>
+  %endif
   %if thing.has_thumbnail and thing.thumbnail:
     <a href="${url}" class="thumbnail">
       <img src="${s3_https_if_secure(thing.thumbnail)}" alt=""/>
      </a>
   %endif
     <p class="title">
     <a href="${url}">${thing.title}</a>
+    %if c.site.link_flair_position == 'right' and thing.flair_text:
+      <span class="linkflair">${thing.flair_text}</span>
+    %endif
     <span class="domain">
     %if thing.is_self:
         (self)

diff --git a/r2/r2/templates/link.mobile b/r2/r2/templates/link.mobile
@@ -40,11 +40,17 @@
        com_label = _("comment") 
  %>
   <div class="link">
+     %if c.site.link_flair_position == 'left' and thing.flair_text:
+       <span class="linkflair">${thing.flair_text}</span>
+     %endif
      %if thing.is_self:
        <a class="title" href="${add_sr(thing.href_url)}">${thing.title}</a>
      %else:
       <a class="title" href="${thing.url}">${thing.title}</a>
      %endif
+     %if c.site.link_flair_position == 'right' and thing.flair_text:
+       <span class="linkflair">${thing.flair_text}</span>
+     %endif
     <p class="byline">&#32;${thing.score}&#32;${ungettext("point", "points", thing.score)}
     %if thing.num_comments or thing.is_self:
        ## the comments link only shows the link, the selftext, and the