From 867143e8712f5b0c30e92f251d9557f83c50deb7 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 23 Jun 2017 10:53:24 +0100
Subject: [PATCH] =?UTF-8?q?Center-align=20pill=20text=20when=20there?=
 =?UTF-8?q?=E2=80=99s=20no=20big=20number?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the text is left aligned it looks messy because the spacing is so
uneven and there are no big numbers to give it some rhythm.
---
 app/assets/stylesheets/components/pill.scss | 5 +++++
 app/templates/components/pill.html          | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index be3619984..0877d6752 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -58,6 +58,11 @@
     }
 
   }
+
+  &-centered-item {
+    text-align: center;
+  }
+
 }
 
 .pill-separate {
diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
index 9456309ee..bcbb5408b 100644
--- a/app/templates/components/pill.html
+++ b/app/templates/components/pill.html
@@ -10,7 +10,7 @@
     {% for label, option, link, count in items %}
       {% if current_value == option %}
         <li aria-selected='true' role='tab'>
-          <div class='pill-selected-item' tabindex='0'>
+          <div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0'>
       {% else %}
         <li aria-selected='false' role='tab'>
           <a href="{{ link }}">
@@ -18,7 +18,7 @@
         {% if show_count %}
             {{ big_number(count, **big_number_args) }}
         {% endif %}
-            <div class="pill-label">{{ label }}</div>
+            <div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
       {% if current_value == option %}
           </div>
       {% else %}