From 7261584f0413b10a0ece98be802a6c7099fd53de Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Wed, 16 May 2018 19:42:31 -0700
Subject: [PATCH] Display currently selected facets better, refs #255

---
 datasette/static/app.css       | 10 +++++-----
 datasette/templates/table.html |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 4f2ddad8..04817f38 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -250,10 +250,10 @@ a.not-underlined {
     padding-left: 1.25em;
     margin-bottom: 1em;
 }
-.facet-info-name a:link,
-.facet-info-name a:visited,
-.facet-info-name a:hover,
-.facet-info-name a:focus,
-.facet-info-name a:active {
+.facet-info a.cross:link,
+.facet-info a.cross:visited,
+.facet-info a.cross:hover,
+.facet-info a.cross:focus,
+.facet-info a.cross:active {
     text-decoration: none;
 }
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index 1ba61f87..b7b07718 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -107,12 +107,16 @@
                 <p class="facet-info-name">
                     <strong>{{ facet_info.name }}</strong>
                     {% if facet_hideable(facet_info.name) %}
-                        <a href="{{ path_with_removed_args(request, {'_facet': facet_info['name']}) }}">&#x2716;</a>
+                        <a href="{{ path_with_removed_args(request, {'_facet': facet_info['name']}) }}" class="cross">&#x2716;</a>
                     {% endif %}
                 </p>
                 <ul>
                     {% for facet_value in facet_info.results %}
-                        <li><a href="{{ facet_value.toggle_url }}">{{ facet_value.label }}</a> {{ "{:,}".format(facet_value.count) }}</li>
+                        {% if not facet_value.selected %}
+                            <li><a href="{{ facet_value.toggle_url }}">{{ facet_value.label }}</a> {{ "{:,}".format(facet_value.count) }}</li>
+                        {% else %}
+                            <li>{{ facet_value.label }} &middot; {{ "{:,}".format(facet_value.count) }} <a href="{{ facet_value.toggle_url }}" class="cross">&#x2716;</a></li>
+                        {% endif %}
                     {% endfor %}
                     {% if facet_info.truncated %}
                         <li>...</li>