Fix some more flair-related cosmetic issues.

r2/r2/controllers/api.py

@@ -2095,9 +2095,8 @@ class ApiController(RedditController):
                 FlairTemplateEditor(empty_template).render(style='html'))
             form.set_html('.status', _('saved'))
         else:
-            form.set_html('.flaircell:first',
-                          FlairTemplateEditor(flair_template)
-                              .render(style='html'))
+            jquery('#%s' % flair_template._id).html(
+                FlairTemplateEditor(flair_template).render(style='html'))
             form.set_html('.status', _('saved'))
             jquery('input[name="text"]').data('saved', text)
             jquery('input[name="css_class"]').data('saved', css_class)

r2/r2/public/static/css/reddit.css

@@ -653,6 +653,8 @@ a.author { margin-right: 0.5em; }
     margin-top: -1px;
 }
 
+.flair-settings { margin-bottom: 16px; }
+
 .flairlist .flair-jump {
     margin-bottom: 1em;
 }
@@ -672,28 +674,29 @@ a.author { margin-right: 0.5em; }
 .flaircell, .flairlist .header {
     display: inline-block;
     text-align: center;
-    width: 28ex;
+    width: 30ex;
     margin-right: 4ex;
 }
 
+.flair-entry { display: inline-block; }
+
 .flaircell.narrow, .flairlist .header.narrow { width: 14ex; }
 
 .flairsample-left { text-align: right !important; }
 .flairsample-right { text-align: left !important; }
 
-.flairrow .tagline { text-align: left; width:36ex; }
-.flairlist .header { text-align: center; }
+.flairrow .tagline {
+    display: inline-block;
+    margin-bottom: 8px;
+    margin-left: 6px;
+    text-align: left;
+    width: 36ex;
+}
 .flairlist .flaircell input[type="text"] { width: 28ex; }
 .flairrow > form button { display: none; }
 .flairrow .edited button { display: inline-block; }
 
-.flairdeletebtn {
-    color: black;
-    font-weight: bold;
-    opacity: 0.2;
-    text-decoration: none;
-}
-
+.flairrow .flairdeletebtn { display: inline; }
 .flairrow:hover .flairdeletebtn { opacity: 1.0; }
 
 .flairselector {

r2/r2/public/static/js/flair.js

@@ -150,7 +150,7 @@ $(function() {
         }
 
         $(selector)
-            .html('<img src="/static/throbber.gif" />')
+            .html('<img class="flairthrobber" src="/static/throbber.gif" />')
             .addClass("active")
             .height(18).width(18)
             .css("padding-left", 4)

r2/r2/templates/flairlist.html

@@ -22,9 +22,7 @@
 
 <%namespace name="utils" file="utils.html"/>
 
-<h2>users with flair</h2>
-
-<div class="flairgrant flairlist pretty-form">
+<div class="flairgrant flairlist">
   <%utils:line_field title="${_('jump to user (or add):')}" css_class="flair-jump">
     <form method="get">
       <% name = thing.user.name if thing.user else thing.name %>
@@ -44,7 +42,7 @@
   <% flair = thing.flair %>
   %if flair:
     <div class="usertable">
-      <span class="header">&nbsp;</span>
+      <span class="header tagline">&nbsp;</span>
       <span class="header">${_('flair text')}</span>
       <span class="header">${_('css class')}</span>
       %for row in flair:

r2/r2/templates/flairlistrow.html

@@ -27,6 +27,10 @@ from r2.lib.pages import WrappedUser
 %>
 
 <div id="flairrow_${thing.user._id36}" class="flairrow">
+  <span class="tagline flaircell">
+    ${unsafe(WrappedUser(thing.user, force_show_flair=True,
+                         include_flair_selector=True).render())}
+  </span>
   <form action="/post/flair" id="flair-${thing.user._id36}" method="post"
         class="medium-text flair-entry">
     <input type="hidden" name="name" value="${thing.user.name}" />
@@ -39,13 +43,9 @@ from r2.lib.pages import WrappedUser
              value="${thing.flair_css_class}" />
     </span>
     <button type="submit">${_('save')}</button>
-    <a class="flairdeletebtn" href="javascript://">X</a>
+    <button class="flairdeletebtn">delete</button>
     <span class="status"></span>
     ${utils.error_field(('BAD_CSS_NAME', 'flair_css_class'), 'name')}
     ${utils.error_field(('TOO_MUCH_FLAIR_CSS', 'flair_css_class'), 'name')}
   </form>
-  <span class="tagline flaircell">
-    ${unsafe(WrappedUser(thing.user, force_show_flair=True,
-                         include_flair_selector=True).render())}
-  </span>
 </div>

r2/r2/templates/flairtemplateeditor.html

@@ -48,7 +48,7 @@
     </span>
     <button type="submit">save</button>
     %if thing.id:
-      <a class="flairdeletebtn" href="javascript://">X</a>
+      <button class="flairdeletebtn">delete</button>
     %endif
     <span class="status"></span>
     ${utils.error_field('BAD_CSS_NAME', 'css_class')}

r2/r2/templates/flairtemplatelist.html

@@ -29,10 +29,12 @@
 %>
 
 <div class="flairlist usertable">
-  <span class="header">&nbsp;</span>
-  <span class="header narrow">${_('user can edit?')}</span>
-  <span class="header">${_('flair text')}</span>
-  <span class="header">${_('css class')}</span>
+  <div class="flairrow">
+    <span class="header tagline">&nbsp;</span>
+    <span class="header narrow">${_('user can edit?')}</span>
+    <span class="header">${_('flair text')}</span>
+    <span class="header">${_('css class')}</span>
+  </div>
   <div class="flairtemplatelist flairlist pretty-form">
     %for flair_template in thing.templates:
       ${flair_template}