From 516afc7fa8b6acb21c30e043f0c8926a3fd28da9 Mon Sep 17 00:00:00 2001
From: Viola Elsenhans <elsenhans@ub.uni-leipzig.de>
Date: Thu, 4 May 2023 12:02:40 +0200
Subject: [PATCH] refs #23846 [finc] styling for applied filters
* change applied filters to list
---
themes/finc/scss/_customVariables.scss | 7 +++--
themes/finc/scss/components/_sidebar.scss | 27 +++++++++++++++++--
.../templates/search/advanced/layout.phtml | 9 ++++---
3 files changed, 36 insertions(+), 7 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 93dd626ecae..d285d9791c0 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -1184,6 +1184,8 @@ $sidebar-exclude-facet-padding-left: 1em !default;
$sidebar-facet-title-padding: 0 !default;
$sidebar-facet-title-background-color: $brand-secondary !default;
$sidebar-facet-title-background-color-focus-hover: $button-title-hover-bg !default;
+$sidebar-facet-title-color: $link-color !default;
+$sidebar-facet-title-color-focus-hover: $link-hover-color !default;
// '.badge' in My Account requires a different right and top-padding from standard badges as in facets
$sidebar-my-account-lists-badge-right-padding: 0 !default;
@@ -1194,9 +1196,10 @@ $sidebar-my-account-danger-success-warning-background: transparent !default;
$sidebar-my-account-danger-success-warning-padding: 0 !default;
// Sidebar item hover effect (doesn't exist in VF out-of-the-box); active is for selected facets
+$sidebar-item-color: $link-color !default;
$sidebar-item-hover-color: $link-hover-color !default;
-$sidebar-item-hover-bg: transparentize($brand-secondary, .9) !default;
-$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;
+$sidebar-item-hover-bg: $brand-secondary !default;
+$sidebar-item-active-hover-bg: $brand-primary !default;
// Text alignment 'more'-toggles in sidebar;
diff --git a/themes/finc/scss/components/_sidebar.scss b/themes/finc/scss/components/_sidebar.scss
index c0f84e83742..b8b43ab4da3 100644
--- a/themes/finc/scss/components/_sidebar.scss
+++ b/themes/finc/scss/components/_sidebar.scss
@@ -129,8 +129,9 @@
a,
.text,
.badge,
- .title,
- .help-link {
+ .checkbox,
+ .help-link,
+ .title {
// Add facet item padding to items
padding: $sidebar-item-padding;
}
@@ -139,12 +140,14 @@
// Focus and hover behaviour for facet titles
.title {
background-color: $sidebar-facet-title-background-color;
+ color: $sidebar-facet-title-color;
&:hover,
&:focus {
@include outline($outline-default-size);
background-color: $sidebar-facet-title-background-color-focus-hover;
+ color: $sidebar-facet-title-color-focus-hover;
}
}
@@ -171,11 +174,31 @@
}
}
}
+
+ ul {
+ border-left: 1px solid $list-group-border;
+ border-right: 1px solid $list-group-border;
+ }
+}
+
+// just for applied filters in advanced search
+.template-name-advanced {
+ .facet-group {
+ label.facet {
+ padding-left: 2.8rem;
+ }
+
+ input[type="checkbox"] {
+ height: unset;
+ }
+ }
}
// Create hover-effect
.facet,
.facet a {
+ color: $sidebar-item-color;
+
&:hover:not(.button),
&:focus:not(.button) {
background: $sidebar-item-hover-bg;
diff --git a/themes/finc/templates/search/advanced/layout.phtml b/themes/finc/templates/search/advanced/layout.phtml
index b9906dc7fa7..8f9acb29b10 100644
--- a/themes/finc/templates/search/advanced/layout.phtml
+++ b/themes/finc/templates/search/advanced/layout.phtml
@@ -202,17 +202,20 @@
<?php if (!empty($searchFilters)): ?>
<h2><?=$this->transEsc("adv_search_filters")?></h2>
<div class="facet-group">
- <label class="checkbox">
+ <?php /* finc: add class facet for consistent styling #23846 */ ?>
+ <label class="facet checkbox">
<input type="checkbox" checked="checked" class="checkbox-select-all"/>
<?=$this->transEsc("adv_search_select_all")?>
</label>
</div>
<?php foreach ($searchFilters as $field => $data): ?>
<div class="facet-group">
- <div class="title"><?=$this->transEsc($field)?></div>
+ <h3 class="title"><?=$this->transEsc($field)?></h3>
+ <ul>
<?php foreach ($data as $value): ?>
- <label class="facet checkbox"><input class="checkbox-select-item" type="checkbox" checked="checked" name="filter[]" value='<?=$this->escapeHtmlAttr($value['field'])?>:"<?=$this->escapeHtmlAttr($value['value'])?>"' /> <?=$this->escapeHtml($value['displayText'])?></label>
+ <li><label class="facet checkbox"><input class="checkbox-select-item" type="checkbox" checked="checked" name="filter[]" value='<?=$this->escapeHtmlAttr($value['field'])?>:"<?=$this->escapeHtmlAttr($value['value'])?>"' /> <?=$this->escapeHtml($value['displayText'])?></label></li>
<?php endforeach; ?>
+ </ul>
</div>
<?php endforeach; ?>
<?php endif; ?>
--
GitLab