Add scrolling and ordering to flair selector.

r2/r2/lib/pages/pages.py

@@ -2563,7 +2563,8 @@ class FlairSelector(CachedTemplate):
         css_class = getattr(c.user, attr_pattern % 'css_class', '')
 
         ids = FlairTemplateBySubredditIndex.get_template_ids(c.site._id)
-        templates = FlairTemplate._byID(ids).values()
+        template_dict = FlairTemplate._byID(ids)
+        templates = [template_dict[i] for i in ids]
         for template in templates:
             if template.covers((text, css_class)):
                 matching_template = template._id

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

@@ -702,6 +702,11 @@ ul.flat-vert {text-align: left;}
 
 .flairselector .error { text-align: center; }
 
+.flairselector > div {
+    height: 200px;
+    overflow: auto;
+}
+
 .flairselector ul { float: left; width: 200px; }
 
 .flairselector .selected, .flairselector.active li {

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

@@ -59,11 +59,14 @@ $(function() {
         var button = this;
 
         function columnize(col) {
-            var min_cols = 2;
+            var min_cols = 1;
+            var max_cols = 3;
             var max_col_height = 10;
             var length = $(col).children().length;
             var num_cols =
-                Math.max(min_cols, Math.ceil(length / max_col_height));
+                Math.max(
+                    min_cols,
+                    Math.min(max_cols, Math.ceil(length / max_col_height)));
             var height = Math.ceil(length / num_cols);
             var num_short_cols = num_cols * height - length;
 
@@ -77,7 +80,7 @@ $(function() {
                 var tail = $(col).children().slice(start).detach();
                 $(col).after($("<ul>").append(tail));
             }
-            return num_cols * 200;
+            return num_cols * 200 + 50;
         }
 
         function handleResponse(r) {

r2/r2/templates/flairselector.html

@@ -22,20 +22,22 @@
 
 <h2>${_("select flair")}</h2>
 %if thing.choices and c.site.flair_self_assign_enabled:
-  <ul>
-    %for choice in thing.choices:
-      <%
-        li_class = 'flairsample-%s' % thing.position
-        if choice.flair_text_editable:
-            li_class += ' texteditable'
-        if choice.flair_template_id == thing.matching_template:
-            li_class += ' selected'
-      %>
-      <li class="${li_class}" id="${choice.flair_template_id}">
-        ${choice}
-      </li>
-    %endfor
-  </ul>
+  <div>
+    <ul>
+      %for choice in thing.choices:
+        <%
+          li_class = 'flairsample-%s' % thing.position
+          if choice.flair_text_editable:
+              li_class += ' texteditable'
+          if choice.flair_template_id == thing.matching_template:
+              li_class += ' selected'
+        %>
+        <li class="${li_class}" id="${choice.flair_template_id}">
+          ${choice}
+        </li>
+      %endfor
+    </ul>
+  </div>
   <form action="/post/selectflair" method="post">
     <div class="flairselection"></div>
     <input type="hidden" name="flair_template_id">