From c5678abbf074d415e598e9a18a1381005833836b Mon Sep 17 00:00:00 2001
From: Alexander Purr <purr@ub.uni-leipzig.de>
Date: Thu, 22 Dec 2022 11:04:36 +0100
Subject: [PATCH] refs #22869 [finc] use always mobile variant for hiding
applied filters by default
* saves space
* consistent behavior
* dropping html (former desktop view)
* change order of show-all-filter-toggler and reset-all-filters-button by change floating scss variables
* add variables for floating-settings of reset-all-filters-button and show-all-filterd-toggler
** order can be changed in instances
* show-all-filterd-toggler more accessible (tabbing) than before
* read .collapsed class on show-all-filter-toggler
* accidently deleted before
* unify active filter container and advanced search information container (terms + links)
* introduce new finc variables for container boxes
* active filter container & and advanced search information container inherits from finc
* can be overridden in instances
* highly customizable
** padding, border & background
* if there are more than 3 selected filters of the same filter group they will be shown in a dropdown
* back to vufind standard
* now enough space for many filters
co-authored by: Claas Kazzer <kazzer@uni-leipzig.de>
* reset filters
* adds background to filters block + variables
* active filters final touches
* adjusts design to adv search terms
---
themes/finc/scss/_customVariables.scss | 46 +++++++++++++++++--
.../components/_header-active-filters.scss | 28 ++++++++---
themes/finc/scss/components/_search.scss | 9 ++--
.../search/advanced-search-information.phtml | 32 ++++++-------
themes/finc/templates/search/filters.phtml | 33 +++----------
5 files changed, 90 insertions(+), 58 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 025f14fca52..9b4a9707045 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -40,6 +40,11 @@ $black: #000 !default;
$red: #f00 !default;
+// Reset filters button, this color is hard-coded into Bootstrap for '.toolbar-btn',
+// '.record-nav .cart-add', '.record-nav .cart-remove', '.reset-filters-btn' and the bulk action buttons
+$lightgrey-transparent: rgba(0, 0, 0, .05);
+
+
// *****************************************************************
// ************ Theme basic colors *********************************
// *****************************************************************
@@ -787,6 +792,22 @@ $search-form-advanced-search-button-border: 1px solid $oil !default;
+// *****************************************************************
+// ************ Content box ****************************************
+// *****************************************************************
+
+// currently reused:
+// * avanced search term
+// * active filters
+
+$content-box-display: block !default;
+$content-box-margin-bottom: 1rem !default;
+$content-box-padding: 1rem !default;
+$content-box-border: 1px solid $brand-primary !default;
+$content-box-background-color: inherit !default;
+
+
+
// *****************************************************************
// ************ Advanced Search ************************************
// *****************************************************************
@@ -821,6 +842,12 @@ $adv-search-links-anchor-display-sm-up: inline !default;
$adv-search-links-anchor-padding-right-sm-up: .5em !default;
$adv-search-links-sm-to-md-max-max-width: 470px !default;
+// Advanced Search Box Container in Result List
+$adv-search-box-display: flex;
+$adv-search-box-margin-bottom: $content-box-margin-bottom;
+$adv-search-box-padding: $content-box-padding;
+$adv-search-box-border: $content-box-border;
+$adv-search-box-backgroud-color: $content-box-background-color;
@@ -828,20 +855,29 @@ $adv-search-links-sm-to-md-max-max-width: 470px !default;
// ************ Active filters in header ***************************
// *****************************************************************
// Outer container for filter names and reset button;
-// we overwrite BS value 'display: flex;' so filters' container will fit
// in searchbox without squashing right-hand menu;
-// Set this to 'flex' to maintain BS-theme behaviour
-$active-filters-outer-container-display: unset !default;
-// Remove left-padding of outer filters' container for alignment under 'Remove all' button
-$active-filters-outer-filters-container-padding-left: 0 !default;
+$active-filters-outer-container-display: $content-box-display;
+$active-filters-outer-container-margin-bottom: $content-box-margin-bottom;
+$active-filters-outer-container-padding: $content-box-padding;
+
+$active-filters-outer-container-border: $content-box-border;
+$active-filters-outer-container-backgroud-color: $content-box-background-color;
+
+
+// Define padding of filters' container for better alignment
+$active-filters-filter-padding-left: 0 !default;
+
// Variables for 'Active filters' and 'Remove all filters' in Header
// Use orange and black for sufficient color contrast
$search-filter-remove-all-color: $black !default;
$search-filter-remove-all-bg: $brand-warning !default;
+$search-filter-remove-all-float: right !default;
$search-filter-text-decoration: none !default;
+// show-all-filters-toggler
+$search-filter-all-filters-toggle: left !default;
// Give these the same look on focus/hover as 'Remove all'
$search-filter-remove-hover-bg: $search-filter-remove-all-bg !default;
diff --git a/themes/finc/scss/components/_header-active-filters.scss b/themes/finc/scss/components/_header-active-filters.scss
index c60fcb6286a..d5a7a2a72ff 100644
--- a/themes/finc/scss/components/_header-active-filters.scss
+++ b/themes/finc/scss/components/_header-active-filters.scss
@@ -2,10 +2,16 @@
// The structure is like so:
// <!-- Outer container -->
// <div class="active-filters">
-// <!-- Reset all button -->
-// <a class="reset-filters-btn" ....
+// <!-- vertical bar for Reset all button and Show-all-filters-toggler
+// <div class="filters-toggle-bar">
+// <!-- Reset all button -->
+// <a class="reset-filters-btn" ....
+// <!-- Show-all-filters-toggler -->
+// <a class="filters-toggle" data-target="#active-filters-mobile" > ..
+// <div class="clearfix"></div>
+// </div>
// <!-- Outer container for all individual filters -->
-// <div class="filters">
+// <div id="active-filters-mobile" class="filters filters-bar">
// <div class="title-value-pair">
// <!-- Filtergroup title -->
// <span class="filters-title">
@@ -23,14 +29,18 @@
}
.active-filters {
- // Outer container for all filters and reset button
+ // Outer container for all filters, reset button and show-all-filters-toggler
// overwrite BS values where necessary
+ border: $active-filters-outer-container-border;
+ background-color: $active-filters-outer-container-backgroud-color;
display: $active-filters-outer-container-display;
+ margin-bottom: $active-filters-outer-container-margin-bottom;
+ padding: $active-filters-outer-container-padding;
- // Outer container for all individual filters
+ // Outer container for all _individual_ filters
.filters {
- padding-left: $active-filters-outer-filters-container-padding-left;
+ padding-left: $active-filters-filter-padding-left;
// Individual filters' outer container
// Make this the same height as .reset-filters-btn and other navigation elements
@@ -68,6 +78,11 @@
.search-filter-dropdown .dropdown-menu .filter-value a {
width: 100%;
}
+
+ // show-all-filters-toggler
+ .filters-toggle {
+ float: $search-filter-all-filters-toggle;
+ }
}
@@ -75,6 +90,7 @@
.reset-filters-btn {
background-color: $search-filter-remove-all-bg;
color: $search-filter-remove-all-color;
+ float: $search-filter-remove-all-float;
&:focus,
&:hover {
diff --git a/themes/finc/scss/components/_search.scss b/themes/finc/scss/components/_search.scss
index e8d525172fb..05b91cb9ca6 100644
--- a/themes/finc/scss/components/_search.scss
+++ b/themes/finc/scss/components/_search.scss
@@ -338,9 +338,12 @@
// <-- REMOVE TO HERE
// NEW VERSION
-
-.search-results-col .panel-body {
- display: flex;
+.adv-search-box {
+ border: $adv-search-box-border;
+ background-color: $adv-search-box-backgroud-color;
+ display: $adv-search-box-display;
+ margin-bottom: $adv-search-box-margin-bottom;
+ padding: $adv-search-box-padding;
}
.adv-terms-label {
diff --git a/themes/finc/templates/search/advanced-search-information.phtml b/themes/finc/templates/search/advanced-search-information.phtml
index 10a492af96e..23ddf424dad 100644
--- a/themes/finc/templates/search/advanced-search-information.phtml
+++ b/themes/finc/templates/search/advanced-search-information.phtml
@@ -36,25 +36,23 @@ $hiddenFilterParams = $this->searchTabs()->getCurrentHiddenFilterParams($this->s
<?=$tabs ?><div class="clearfix">
<?php endif; ?>
<?php */ ?>
- <div class="panel panel-primary">
- <div class="panel-body">
- <div class="adv-terms">
- <span class="adv-terms-label"><?=$this->transEsc("Advanced Search")?>:</span>
- <a class="adv-edit" href="<?= $this->url($advSearch) ?>?edit=<?= $this->escapeHtmlAttr($this->searchId) ?>">
- <i class="fa fa-pencil"></i>
- <span class="hidden-xs"><?= $this->transEsc("Edit") ?>: </span>
- <strong><?= $this->escapeHtml($this->lookfor) ?></strong>
- </a>
- </div>
- <div class="adv-delete">
- <a class="btn btn-danger" href="<?= $this->url($advSearch) . $hiddenFilterParams ?>">
- <i class="fa fa-times" aria-hidden="true"></i>
- <span class="hidden-xs"><?= $this->transEsc("Delete") ?></span>
- </a>
- </div>
+ <div class="adv-search-box">
+ <div class="adv-terms">
+ <span class="adv-terms-label"><?=$this->transEsc("Advanced Search")?>:</span>
+ <a class="adv-edit" href="<?= $this->url($advSearch) ?>?edit=<?= $this->escapeHtmlAttr($this->searchId) ?>">
+ <i class="fa fa-pencil"></i>
+ <span class="hidden-xs"><?= $this->transEsc("Edit") ?>: </span>
+ <strong><?= $this->escapeHtml($this->lookfor) ?></strong>
+ </a>
+ </div>
+ <div class="adv-delete">
+ <a class="btn btn-danger" href="<?= $this->url($advSearch) . $hiddenFilterParams ?>">
+ <i class="fa fa-times" aria-hidden="true"></i>
+ <span class="hidden-xs"><?= $this->transEsc("Delete") ?></span>
+ </a>
</div>
-
</div>
+
<?php /* Disable search tabs on advanced search terms - refs #22361
* uncomment following block for using search tabs again
*/ ?>
diff --git a/themes/finc/templates/search/filters.phtml b/themes/finc/templates/search/filters.phtml
index 0a5a63cce45..89b844628f3 100644
--- a/themes/finc/templates/search/filters.phtml
+++ b/themes/finc/templates/search/filters.phtml
@@ -50,12 +50,7 @@
<?php foreach ($filterList as $field => $data): ?>
<div class="title-value-pair">
<span class="filters-title"><?=$this->transEsc($field)?>:</span>
- <?php /* finc: set number of filters from one group for display in dropdown to '> 1'
- so 2 and more filters from one group will be presented in a dropdown rather
- than as a long chain of terms -
- bootstrap3 has '<?php if (count($data) > 3): ?>'
- CK */ ?>
- <?php if (count($data) > 1): ?>
+ <?php if (count($data) > 3): ?>
<div class="search-filter-dropdown dropdown">
<?php $dropdown = true; ?>
<?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?>
@@ -128,25 +123,8 @@
: $this->searchMemory()->getEditLink($this->searchClassId, 'removeAllFilters', 1);
}
?>
- <?php // Normal view ?>
- <div class="active-filters hidden-xs">
- <?php if ($resetLink && !empty($value) && $options->getRetainFilterSetting()): ?>
- <?php /* finc adds verbose reload warning via aria-label */ ?>
- <a class="reset-filters-btn" href="<?=$resetLink?>"
- aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>"
- >
- <?=$this->transEsc('reset_filters_button') ?>
- </a>
- <?php elseif ($advancedSearch): ?>
- <p class="adv_search_filters"><?=$this->transEsc('adv_search_filters')?>:</p>
- <?php endif; ?>
- <div class="filters">
- <?=$filters ?>
- </div>
- <div class="clearfix"></div>
- </div>
- <?php // Narrow view ?>
- <div class="active-filters visible-xs">
+ <?php // Narrow view - for all sizes by default - refs #22869 */ ?>
+ <div class="active-filters">
<div class="filters-toggle-bar">
<?php if ($resetLink && !empty($value) && $options->getRetainFilterSetting()): ?>
<?php /* finc adds verbose reload warning via aria-label */ ?>
@@ -155,9 +133,10 @@
<?=$this->transEsc('reset_filters_button')?>
</a>
<?php endif; ?>
- <div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile">
+ <?php // make toggler accessible for tabbing - refs #22869 ?>
+ <a class="filters-toggle collapsed" data-toggle="collapse" href="#active-filters-mobile">
<?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?>
- </div>
+ </a>
<div class="clearfix"></div>
</div>
<div id="active-filters-mobile" class="filters filters-bar collapse">
--
GitLab