Fix issues with facet badges (#4057)

- Count badges for checkbox facets were on wrong level and not right-aligned properly. - Height and top settings in sandal and sandal5 caused misaligned numbers in badges.
vufind-org · Nov 7, 2024 · d62c062 · d62c062
1 parent 91183b5
commit d62c062
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 41 deletions.
diff --git a/themes/bootprint3/css/compiled.css b/themes/bootprint3/css/compiled.css
diff --git a/themes/bootstrap3/css/compiled.css b/themes/bootstrap3/css/compiled.css
diff --git a/themes/bootstrap3/js/facets.js b/themes/bootstrap3/js/facets.js
@@ -451,7 +451,7 @@ VuFind.register('sideFacets', function SideFacets() {
   function activateSingleAjaxFacetContainer() {
     var $container = $(this);
     var facetList = [];
-    var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkbox-filter[data-facet]');
+    var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkboxFilter [data-facet]');
     $facets.each(function addFacet() {
       if (!$(this).data('loaded')) {
         facetList.push($(this).data('facet'));
@@ -493,7 +493,7 @@ VuFind.register('sideFacets', function SideFacets() {
       .done(function onGetSideFacetsDone(response) {
         $.each(response.data.facets, function initFacet(facet, facetData) {
           var containerSelector = typeof facetData.checkboxCount !== 'undefined'
-            ? '.checkbox-filter' : ':not(.checkbox-filter)';
+            ? '.checkboxFilter ' : '.facet-group ';
           var $facetContainer = $container.find(containerSelector + '[data-facet="' + facet + '"]');
           $facetContainer.data('loaded', 'true');
           if (typeof facetData.checkboxCount !== 'undefined') {

diff --git a/themes/bootstrap3/templates/Recommend/SideFacets/checkbox-filters.phtml b/themes/bootstrap3/templates/Recommend/SideFacets/checkbox-filters.phtml
@@ -5,8 +5,8 @@
       ? $results->getUrlQuery()->removeFilter($current['filter'])
       : $results->getUrlQuery()->addFilter($current['filter']);
   ?>
-  <div class="facet" >
-    <a class="checkbox-filter icon-link<?=$isHidden ? ' hidden' : '' ?>" href="<?=$href ?>" data-facet="<?=$this->escapeHtmlAttr($current['filter'])?>">
+  <div class="facet" data-facet="<?=$this->escapeHtmlAttr($current['filter'])?>">
+    <a class="checkbox-filter icon-link<?=$isHidden ? ' hidden' : '' ?>" href="<?=$href ?>">
       <?php if ($current['selected']): ?>
         <span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
       <?php endif; ?>
@@ -16,10 +16,9 @@
           'data-checked' => $current['selected'] ? 'true' : 'false',
       ]) ?>
       <span class="icon-link__label"><?=$this->transEsc($current['desc']) ?></span>
-
-      <?php if (!$current['selected']): ?>
-        <span class="badge avail-count"></span>
-      <?php endif; ?>
     </a>
+    <?php if (!$current['selected']): ?>
+      <span class="badge avail-count"></span>
+    <?php endif; ?>
   </div>
 <?php endforeach; ?>
diff --git a/themes/bootstrap5/js/facets.js b/themes/bootstrap5/js/facets.js
@@ -451,7 +451,7 @@ VuFind.register('sideFacets', function SideFacets() {
   function activateSingleAjaxFacetContainer() {
     var $container = $(this);
     var facetList = [];
-    var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkbox-filter[data-facet]');
+    var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkboxFilter [data-facet]');
     $facets.each(function addFacet() {
       if (!$(this).data('loaded')) {
         facetList.push($(this).data('facet'));
@@ -493,7 +493,7 @@ VuFind.register('sideFacets', function SideFacets() {
       .done(function onGetSideFacetsDone(response) {
         $.each(response.data.facets, function initFacet(facet, facetData) {
           var containerSelector = typeof facetData.checkboxCount !== 'undefined'
-            ? '.checkbox-filter' : ':not(.checkbox-filter)';
+            ? '.checkboxFilter ' : '.facet-group ';
           var $facetContainer = $container.find(containerSelector + '[data-facet="' + facet + '"]');
           $facetContainer.data('loaded', 'true');
           if (typeof facetData.checkboxCount !== 'undefined') {

diff --git a/themes/bootstrap5/templates/Recommend/SideFacets/checkbox-filters.phtml b/themes/bootstrap5/templates/Recommend/SideFacets/checkbox-filters.phtml
@@ -5,8 +5,8 @@
       ? $results->getUrlQuery()->removeFilter($current['filter'])
       : $results->getUrlQuery()->addFilter($current['filter']);
   ?>
-  <div class="facet" >
-    <a class="checkbox-filter icon-link<?=$isHidden ? ' hidden' : '' ?>" href="<?=$href ?>" data-facet="<?=$this->escapeHtmlAttr($current['filter'])?>">
+  <div class="facet" data-facet="<?=$this->escapeHtmlAttr($current['filter'])?>">
+    <a class="checkbox-filter icon-link<?=$isHidden ? ' hidden' : '' ?>" href="<?=$href ?>">
       <?php if ($current['selected']): ?>
         <span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
       <?php endif; ?>
@@ -16,10 +16,9 @@
           'data-checked' => $current['selected'] ? 'true' : 'false',
       ]) ?>
       <span class="icon-link__label"><?=$this->transEsc($current['desc']) ?></span>
-
-      <?php if (!$current['selected']): ?>
-        <span class="badge avail-count"></span>
-      <?php endif; ?>
     </a>
+    <?php if (!$current['selected']): ?>
+      <span class="badge avail-count"></span>
+    <?php endif; ?>
   </div>
 <?php endforeach; ?>
diff --git a/themes/sandal/css/compiled.css b/themes/sandal/css/compiled.css
diff --git a/themes/sandal/less/sandal.less b/themes/sandal/less/sandal.less
@@ -237,11 +237,6 @@ a:hover .login-dropdown-caret {
     }
   }
 
-  .facet .badge {
-    max-height: 15px;
-    margin-top: 5px;
-  }
-
   .more-btn, .less-btn {
     border: 0;
     border-bottom: 1px solid @list-group-border;

diff --git a/themes/sandal/scss/sandal.scss b/themes/sandal/scss/sandal.scss
@@ -237,11 +237,6 @@ a:hover .login-dropdown-caret {
     }
   }
 
-  .facet .badge {
-    max-height: 15px;
-    margin-top: 5px;
-  }
-
   .more-btn, .less-btn {
     border: 0;
     border-bottom: 1px solid $list-group-border;

diff --git a/themes/sandal5/css/compiled.css b/themes/sandal5/css/compiled.css
diff --git a/themes/sandal5/scss/sandal.scss b/themes/sandal5/scss/sandal.scss
@@ -236,11 +236,6 @@ a:hover .login-dropdown-caret {
     }
   }
 
-  .facet .badge {
-    max-height: 15px;
-    margin-top: 5px;
-  }
-
   .more-btn, .less-btn {
     border: 0;
     border-bottom: 1px solid $list-group-border;