Display currently selected facets better, refs #255

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;
 }

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>