Accessibility: Removes hard-coded columns in home facet lists

config/vufind/facets.ini

@@ -328,7 +328,7 @@ translated_facets[] = language:ISO639-3
 callnumber-first = "Call Number"
 language         = Language
 format           = Format
-;hierarchy_top_title   = Collections
+hierarchy_top_title   = Collections
 
 ; These settings affect the way the [HomePage] facets are displayed.
 ; NOTE: To make changes take effect immediately, you may need to clear VuFind's
@@ -338,6 +338,10 @@ format           = Format
 ; of the homepage facet lists, we may not display all loaded values for every facet
 facet_limit      = 20
 
+; Comma-separated list of facet *fields* to render in two columns on the homepage facet list:
+; Example: two_column_facets = "callnumber-first"
+; two_column_facets = "callnumber-first"
+
 ; By default, the New Items screen will use the [Advanced] and [Advanced_Settings]
 ; sections above, but you can override this by uncommenting the sections below as
 ; needed. New Items facets also need to be enabled in searches.ini for this to work.

module/VuFind/src/VuFind/ContentBlock/FacetList.php

@@ -119,7 +119,41 @@ public function setConfig($settings)
         $this->searchClassId = empty($parts[0]) ? $this->searchClassId : $parts[0];
         $this->columnSize = $parts[1] ?? $this->columnSize;
     }
-
+
+  /**
+   * Get list of facet fields that should be displayed in two columns on the homepage
+   * (configured via facets.ini -> [HomePage_Settings] -> two_column_facets).
+   *
+   * @param Config $facetConfig Facet configuration object.
+   *
+   * @return string[]
+   */
+  protected function getTwoColumnFacets(Config $facetConfig): array
+  {
+    $raw = null;
+
+    if (isset($facetConfig->HomePage_Settings)
+      && isset($facetConfig->HomePage_Settings['two_column_facets'])
+    ) {
+      $raw = $facetConfig->HomePage_Settings['two_column_facets'];
+    }
+
+    if (null === $raw) {
+      return [];
+    }
+
+    // Laminas config may return string or array depending on ini syntax; normalize:
+    if (is_array($raw)) {
+      $items = $raw;
+    } else {
+      $items = preg_split('/\s*,\s*/', (string)$raw) ?: [];
+    }
+
+    $items = array_map('trim', $items);
+    $items = array_filter($items, fn ($v) => $v !== '');
+
+    return array_values(array_unique($items));
+  }
     /**
      * Return context variables used for rendering the block's template.
      *
@@ -138,6 +172,7 @@ public function getContext()
             'hierarchicalFacets' => $this->getHierarchicalFacets($facetConfig),
             'hierarchicalFacetSortOptions' =>
                 $this->getHierarchicalFacetSortSettings($facetConfig),
+            'twoColumnFacets' => $this->getTwoColumnFacets($facetConfig),
             'results' => $results,
         ];
     }

themes/bootstrap5/scss/components/search.scss

@@ -103,12 +103,82 @@ input[type="search"]::-webkit-search-decoration {
   }
 }
 
-.searchHomeContent { @include clearfix(); }
+.searchHomeContent {
+  @include clearfix();
+}
+
+.home-facet {
+  @media (min-width: 768px) {
+    flex: 0 1 100%;
+  }
+}
+
+.search-home-facets,
+.home-facet-container {
+  @media (min-width: 768px) {
+    display: flex;
+  }
+}
+
+.home-facet-container {
+  padding-right: $home-facet-container-right-padding; // Defines padding for better visual division
+  padding-left: $home-facet-container-left-padding; // Defines padding for better visual division
+
+  @media (min-width: 768px) {
+    height: $home-facet-container-height; // determines the height of the visual division line (see variables.scss for more info)
+    margin-bottom: $home-facet-container-bottom-margin; // determines the bottom margin
+  }
+}
+
+// Defines the layout of all uls with class 'home-facet-list'; variables can be overwritten in 'variables.scss':
 .home-facet-list {
-  padding-left: 0;
-  padding-right: 1rem;
-  list-style: none;
+  list-style: $home-facet-list-list-style; // Defines the list style (default = 'none')
+  overflow: $home-facet-list-column-overflow; // Defines what's to be done if there are more entries than fit the columns
+  padding-left: $home-facet-list-left-padding; // Overwrites default left-padding for <ul>s
+  padding-right: $home-facet-list-right-padding; // Defines right padding for better visual division
+
+  @media (min-width: 768px) {
+    border-right: $home-facet-list-border-right-style; // Defines visual division between 'home-facet-list ' containers for devices >=768px (containers are stacked on smaller devices)
+    height: $home-facet-list-column-height; // Defines the height of each list column, see variables.scss; The number of entries per <ul> is currently defined in module/VuFind/src/VuFind/ContentBlock/FacetList.php (e.g.: '$columnSize = 10')
+  }
+
+  // Defines the number of columns of default/normal 'ul.home-facet-list' elements; variables can be overwritten in 'variables.scss':
+  .home-facet:not(.two-columns) & {
+    column-count: $home-facet-list-column-count-default; // This is the default
+    width: $home-facet-list-column-width-default; // Makes sure single column has same width as double column (required for border)
+  }
+
+  // When 'two-columns' is used, the affected 'home-facet-list' gets a default column-count of 2 on devices >=992px; these values can be overwritten in 'variables.scss':
+  .home-facet.two-columns & {
+    column-count: $home-facet-list-non-default-column-count; // Defines maximum number of cols to be used on devices >=1200px; see variables.scss
+    column-fill: $home-facet-list-column-fill; // Defines, how the columns will be filled: 'auto' fills up to max height and the breaks into new column, 'balance' attempts to distribute available entries evenly across the max. number of columns; value is set in variables.scss
+    column-gap: $home-facet-list-column-gap; // Defines the gap between the columns, if more than one
+    column-rule: $home-facet-list-non-default-column-rule; // Defines column rule between the <li> columns for non-default facet lists, such as '.callnumber-first' on devices >=992px
+
+    @media (max-width: 767px) {
+      column-count: $home-facet-list-column-count-xs; // Defaults to '1'; can be defined in 'variables.scss'
+    }
+
+    @media (min-width: 768px) {
+      flex: 0 1 100%;
+    }
+
+    @media (min-width: 768px) and (max-width: 991px) {
+      column-count: $home-facet-list-column-count-sm; // Defaults to '1'; can be defined in 'variables.scss'
+    }
+
+    @media (min-width: 992px) and (max-width: 1199px) {
+      column-count: $home-facet-list-column-count-md; // Defaults to '2'; can be defined in 'variables.scss'
+      column-rule: $home-facet-list-column-rule-md; // Defaults to '1 px solid grey'; can be defined in 'variables.scss'
+    }
+  }
 }
+
+.search-home-facets .home-facet:last-of-type {
+  border-right: $home-facet-list-last-of-type-border-right-style; // removes visual division between containers for last container
+}
+
+
 // Reset styling of hierarchical facets on the home page:
 .home-facet.facet-tree li {
   line-height: inherit;

themes/bootstrap5/scss/variables.scss

@@ -16,3 +16,37 @@ $nav-link-hover-bg:       $gray-lighter !default;
 
 $alert-default-bg: #f5f5f5 !default;
 $alert-default-border-color: darken($alert-default-bg, 7%) !default;
+
+// HOME FACET LAYOUT
+// The following variables are used to define the layout of the outer facet container ('.home-facet-container') on the home page:
+// Defines the visual division of facet container columns
+$home-facet-container-left-padding: .25rem !default; // Defines left padding for better visual division
+$home-facet-container-right-padding: 1rem !default; // Defines right padding for better visual division
+
+$home-facet-container-height: 95% !default; // Set this to 100% to make visual division line between the containers go full height, when a ul split into two columns has the setting 'column-fill: balance;'; reduce as needed
+$home-facet-container-bottom-margin: 1rem !default; // Defines the container bottom margin; might be used to prevent divisions between 'home-facet-list' elements from running onto the content below
+
+// The following variables are used to define the layout of ul lists ('ul.home-facet-list') inside the '.home-facet-container' elements:
+$home-facet-list-border-right-style: 1px solid $gray-dark !default; // Defines the border between the facet list containers
+$home-facet-list-last-of-type-border-right-style: 0 !default; // Defines the border of the last facet list container
+
+$home-facet-list-column-count-default: 1; // Defines the default number of columns into which a default 'ul.home-facet-list' will be split for devices
+$home-facet-list-column-width-default: 100%; // Defines the width of a default 'ul.home-facet-list'; e.g.: 100% makes sure single column has same width as double column, such as e.g.: '.callnumber-first'
+
+$home-facet-list-column-count-md: 2 !default; // Defines the maximum number of columns into which a facet list can be split for MD sized devices
+$home-facet-list-column-rule-md: 1px dotted grey !default;
+$home-facet-list-column-count-sm: 1 !default; // Defines the maximum number of columns into which a facet list can be split for SM sized devices
+$home-facet-list-column-count-xs: 1 !default; // Defines the maximum number of columns into which a facet list can be split for XS sized devices
+
+$home-facet-list-non-default-column-count: 2 !default; // Defines the maximum number of columns into which a non-default facet list, such as '.callnumber-first' will be split for devices >=992px
+$home-facet-list-non-default-column-rule: 1px dotted grey !default; // Defines column rule between the <li> columns for non-default facet lists, such as '.callnumber-first' on devices >=992px
+
+$home-facet-list-column-fill: balance !default; // Set this to 'balance' to distribute available <li>entries evenly across the max. number of columns, set this to 'auto' for distribution that fills first column and places remaining entries in 2nd column etc.
+
+$home-facet-list-column-gap: 1rem !default; // Defines the gap between <li>columns if more than one
+$home-facet-list-column-height: auto !default; // Defines the height of each <li>column before the column breaks, 1rem should roughly equal one line
+$home-facet-list-column-overflow: clip !default; // Defines what's to be done if there are more <li>entries than fit the columns
+
+$home-facet-list-left-padding: 0 !default; // Overwrites the default left padding for uls (2rem)
+$home-facet-list-list-style: none !default; // Removes list style bullets from <li>
+$home-facet-list-right-padding: 1rem !default; // Adds greater visual separation

themes/bootstrap5/templates/ContentBlock/FacetList.phtml

@@ -9,9 +9,12 @@
 <?php if (!empty($facetList)): ?>
   <div class="search-home-facets">
     <?php foreach ($facetList as $field => $details): ?>
-      <?php $isHierarchy = in_array($field, $hierarchicalFacets ?? []); ?>
+      <?php
+        $isHierarchy = in_array($field, $hierarchicalFacets ?? []);
+        $useTwoColumns = in_array($field, $twoColumnFacets ?? [], true);
+      ?>
       <?php $labelHeading = $this->transEsc('home_browse_by_facet', ['%%facet%%' => $this->translate($details['label'])]); ?>
-      <div class="home-facet <?=$this->escapeHtmlAttr($field) ?><?=$isHierarchy ? ' facet-tree' : ''?>">
+      <div class="home-facet <?=$this->escapeHtmlAttr($field) ?><?=$isHierarchy ? ' facet-tree' : ''?><?=$useTwoColumns ? ' two-columns' : ''?>">
         <h2><?=$labelHeading?></h2>
         <div class="home-facet-container">
           <ul class="home-facet-list">
@@ -27,9 +30,9 @@
               <?php
                 $sortedList = $this->sortFacetList($results, $field, $details['list'], $basicSearch, $format);
 
-                // Special case: two columns for LC call numbers...
-                $maxListLength = $field == 'callnumber-first'
-                  ? $columnSize * 2 : $columnSize;
+                // Two-column facets (configured in facets.ini: [HomePage_Settings] two_column_facets):
+                //$useTwoColumns = in_array($field, $twoColumnFacets ?? [], true);
+                $maxListLength = $useTwoColumns ? $columnSize * 2 : $columnSize;
 
                 // Special case: custom URLs for collections...
                 $moreUrl = $field == 'hierarchy_top_title'
@@ -56,8 +59,6 @@
                 <?php if ($i >= $maxListLength): // list too long? show more link! ?>
                   <li><a href="<?=$moreUrl?>"><strong><?=$this->transEsc('more_options_ellipsis')?></strong></a></li>
                   <?php break; ?>
-                <?php elseif ($i % $columnSize === 0): // end of column? insert break! ?>
-                  </ul><ul class="home-facet-list">
                 <?php endif; ?>
               <?php endforeach; ?>
             <?php endif; ?>