Top facets: Move x outside of badge and contain within a box. (#1287)

themes/bootstrap3/less/components/sidebar.less

@@ -40,7 +40,8 @@
   .badge {
     flex-shrink: 0;
     max-height: 19px;
-    line-height: 1.1rem;
+    line-height: 1.2;
+    vertical-align: baseline;
   }
 
   .exclude {
@@ -60,10 +61,6 @@
   text-align: inherit;
 }
 
-.top-facets {
-  margin-left: -.5rem;
-  margin-right: -.5rem;
-}
 .top-facets .facet,
 .top-facets .narrow-toggle,
 .top-facets > strong {
@@ -74,6 +71,11 @@
   white-space: nowrap;
 }
 .top-facets .narrow-toggle { text-decoration: underline; }
+.top-facets .top-facet {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  border: 1px solid @list-group-border;
+}
 
 .checkbox-filter {
   display: block;

themes/bootstrap3/templates/Recommend/TopFacets.phtml

@@ -17,7 +17,7 @@
       <div class="collapse in" id="top_<?=$this->escapeHtml($title) ?>">
         <?php $limit = $topFacetSettings['rows'] * $topFacetSettings['cols']; ?>
         <?php foreach($cluster['list'] as $index => $thisFacet): ?>
-          <span class="facet <?=$index > $limit ? $moreClass : '' ?>">
+          <span class="facet top-facet <?=$index > $limit ? $moreClass : '' ?>">
             <?php if ($thisFacet['isApplied']):
               if (isset($thisFacet['specialType']) && $thisFacet['specialType'] == 'keyword') {
                 $removeLink = $this->currentPath() . $results->getUrlQuery()->replaceTerm($thisFacet['value'], '');
@@ -31,11 +31,10 @@
               <a href="<?=$this->currentPath() . $results->getUrlQuery()->addFacet($title, $thisFacet['value'], $thisFacet['operator'])?>">
                 <?=$this->escapeHtml($thisFacet['displayText'])?><!--
            --></a>
-              <span class="badge"><?=$this->localizedNumber($thisFacet['count']) ?>
-                <?php if ($allowExclude): ?>
-                  <a href="<?=$this->currentPath() . $results->getUrlQuery()->addFacet($title, $thisFacet['value'], 'NOT')?>" title="<?=$this->transEsc('exclude_facet')?>"><i class="fa fa-times" aria-hidden="true"></i></a>
-                <?php endif; ?>
-              </span>
+              <span class="badge"><?=$this->localizedNumber($thisFacet['count']) ?></span>
+              <?php if ($allowExclude): ?>
+                <a href="<?=$this->currentPath() . $results->getUrlQuery()->addFacet($title, $thisFacet['value'], 'NOT')?>" title="<?=$this->transEsc('exclude_facet')?>"><i class="fa fa-times" aria-hidden="true"></i></a>
+              <?php endif; ?>
             <?php endif; ?>
           </span>
           <?php /* More link */ ?>