From a5efe4906b036095e2d21a64a2f7e78065df9f0d Mon Sep 17 00:00:00 2001
From: Logan Hanks <logan@reddit.com>
Date: Thu, 8 Sep 2011 14:52:49 -0700
Subject: [PATCH] Add scrolling and ordering to flair selector.

---
 r2/r2/lib/pages/pages.py           |  3 ++-
 r2/r2/public/static/css/reddit.css |  5 +++++
 r2/r2/public/static/js/flair.js    |  9 ++++++---
 r2/r2/templates/flairselector.html | 30 ++++++++++++++++--------------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/r2/r2/lib/pages/pages.py b/r2/r2/lib/pages/pages.py
index fec289442..a6671f234 100644
--- a/r2/r2/lib/pages/pages.py
+++ b/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
diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css
index 380f96c83..06886cad5 100644
--- a/r2/r2/public/static/css/reddit.css
+++ b/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 {
diff --git a/r2/r2/public/static/js/flair.js b/r2/r2/public/static/js/flair.js
index ec91599dd..25485c037 100644
--- a/r2/r2/public/static/js/flair.js
+++ b/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) {
diff --git a/r2/r2/templates/flairselector.html b/r2/r2/templates/flairselector.html
index 4fa34db06..3cb84ef71 100644
--- a/r2/r2/templates/flairselector.html
+++ b/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">