diff --git a/themes/finc-accessibility/scss/compiled.scss b/themes/finc-accessibility/scss/compiled.scss index 34fb79fb25c19a390fd7f0c585111bcf613a7776..273b21b9120a8dde635c897a12acaa6b5e0cd3b6 100644 --- a/themes/finc-accessibility/scss/compiled.scss +++ b/themes/finc-accessibility/scss/compiled.scss @@ -114,60 +114,9 @@ $screen-md-max: ($screen-lg-min - 1) !default; } -// Keep Filters elements in header -.reset-filters-btn { - background-color: $brand-warning; - color: $black; - - &:focus, - &:hover { - background: $sidebar-item-active-hover-bg; - color: $sidebar-facet-active-hover-color; - } -} - -.active-filters { - .filters .filter-value:focus, - .filters .filter-value:hover, - .search-filter-remove:visited, - .search-filter-remove:focus, - .search-filter-remove:hover, - .search-filter-remove:visited:focus, - .search-filter-remove:visited:hover { - background: $search-filter-remove-hover-bg; - color: $search-filter-remove-hover-color; - } - - .filters .filter-value:focus, - .filters .filter-value:hover { - .search-filter-remove::after { - color: $red; - } - - .search-filter-remove, - .search-filter-remove:visited { - color: $search-filter-remove-hover-color !important; // keep !important - } - } -} - -.search-filter-remove::after { - content: $search-filter-remove-icon; -} - -// remove filter links styling -a.remove-filter { - display: flex; - width: 100%; -} .record-tab.active { .load-tab-content { display: none; } } - -// overwrite vertical align -#dropdown-toggle-Format { - vertical-align: unset; -} diff --git a/themes/finc-accessibility/templates/search/filters.phtml b/themes/finc-accessibility/templates/search/filters.phtml deleted file mode 100644 index d30559c7b49f9fa3deb2c5e383a02415e8b49324..0000000000000000000000000000000000000000 --- a/themes/finc-accessibility/templates/search/filters.phtml +++ /dev/null @@ -1,169 +0,0 @@ -<!-- finc-accessibility - search - filters --> -<?php - if (!isset($this->params)) { - // No current search, use last search in memory - $params = $this->searchMemory()->getLastSearchParams($this->searchClassId); - } else { - // clone params so that the manipulation doesn't cause trouble e.g. for facets - $params = clone $this->params; - } - - $lastSort = $this->searchMemory()->getLastSort($this->searchClassId); - $options = $this->searchOptions($this->searchClassId); - $hasDefaultsApplied = $params->hasDefaultsApplied(); - $filterCount = $this->searchbox()->getFilterCount($checkboxFilters, $filterList); - - // Determine whether the only filters applied are the default ones; this controls - // when we display or hide the reset button: - $defaultFilters = $options->getDefaultFilters(); - $onlyDefaultsApplied = count($defaultFilters) == $filterCount; - foreach ($defaultFilters as $currentDefault) { - if (!$params->hasFilter($currentDefault)) { - $onlyDefaultsApplied = false; - break; - } - } - - $advancedSearch = $this->searchType === 'advanced'; -?> -<?php ob_start(); ?> - <?php foreach ($checkboxFilters as $filter): ?> - <?php if ($filter['selected']): ?> - <span class="filter-value"> - <?php - $removeLink = isset($urlQuery) - ? $urlQuery->removeFilter($filter['filter']) - : $this->searchMemory()->getEditLink( - $this->searchClassId, 'removeFilter', $filter['filter'] - ); - $desc = $this->translate($filter['desc']); - $ariaLabel = $this->translate('Remove filter') . ' ' . $this->escapeHtmlAttr($desc); - ?> - <?=$desc?> - <?php if($removeLink): ?> - <a class="search-filter-remove" aria-label="<?=$ariaLabel?>" href="<?=$removeLink?>"><!--icon from css --></a> - <?php endif; ?> - </span> - <?php endif ?> - <?php endforeach; ?> - - <?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 - CK */ ?> - <?php if (count($data) > 1): ?> - <div class="search-filter-dropdown dropdown"> - <?php $dropdown = true; ?> - <?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?> - <button id="dropdown-toggle-<?=$safeId?>" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> - <?=$this->transEsc('filter_toggle_entries', ['%%count%%' => count($data)])?> - </button> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-toggle-<?=$safeId?>"> - <?php else: ?> - <?php $dropdown = false; ?> - <?php endif; ?> - <?php foreach ($data as $index => $value): ?> - <?php if ($dropdown): ?> - <li> - <?php endif; ?> - <?php - switch ($value['operator']) { - case 'NOT': - $operatorChar = '-'; - $join = $this->transEsc('NOT'); - break; - case 'OR': - $operatorChar = '~'; - $join = $this->transEsc('OR'); - break; - case 'AND': - $operatorChar = ''; - $join = $this->transEsc('AND'); - break; - default: - $operatorChar = $join = ''; - } - $operatorClass = $this->escapeHtmlAttr(strtolower($value['operator'])); - ?> - <span class="filters-term filters-<?=$operatorClass?>"> - <?=($index > 0 || 'NOT' === $value['operator']) ? $join : '' ?> - </span> - <span class="filter-value filters-<?=$operatorClass?>"> - <?php /* finc uses entire text + icon as link for larger interaction area; adds more detailed aria-label */ ?> - <?php - $removeLink = isset($this->urlQuery) - ? $urlQuery->removeFacet($value['field'], $value['value'], $value['operator']) - : $this->searchMemory()->getEditLink($this->searchClassId, 'removeFacet', $value); - ?> - <a class="search-filter-remove" - aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $value['displayText']])?>" - href="<?=$removeLink?>"> - <span class="text"> - <?=$this->escapeHtml($value['displayText'])?> - </span> - <!--icon from css --> - </a> - </span> - <?php if ($dropdown): ?> - </li> - <?php endif; ?> - <?php endforeach; ?> - <?php if ($dropdown): ?> - </ul> - </div> - <?php endif; ?> - </div> - <?php endforeach; ?> -<?php $filters = ob_get_contents(); ?> -<?php ob_end_clean(); ?> - -<?php if ($hasDefaultsApplied || $filterCount > 0): ?> - <?php - $resetLink = null; - if (!$onlyDefaultsApplied) { - $resetLink = isset($urlQuery) - ? $urlQuery->removeAllFilters()->resetDefaultFilters() - : $this->searchMemory()->getEditLink($this->searchClassId, 'removeAllFilters', 1); - } - ?> - <?php // Normal view ?> - <div class="active-filters hidden-xs"> - <?php if ($resetLink && $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"> - <div class="filters-toggle-bar"> - <?php if ($resetLink && $options->getRetainFilterSetting()): ?> - <?php /* finc adds verbose reload warning via aria-label */ ?> - <a class="reset-filters-btn active" 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 endif; ?> - <div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile"> - <?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?> - </div> - <div class="clearfix"></div> - </div> - <div id="active-filters-mobile" class="filters filters-bar collapse"> - <?=$filters ?> - </div> - <div class="clearfix"></div> - </div> -<?php endif; ?> -<!-- finc-accessibility - search - filters - END --> diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss index cf7424408c5dd70600c831fddd1f5bc6d6c74fd1..0bd4ec8a795e6f005473a50588d77ea078df253d 100644 --- a/themes/finc/scss/_customVariables.scss +++ b/themes/finc/scss/_customVariables.scss @@ -678,7 +678,7 @@ $hamburger-menu-margin-left-xs: 0 !default; $hamburger-menu-margin-right-xs: 0 !default; // This is for the menu items in the header incl. language, My account etc -$header-menu-flex-sm-up: 1 0 30%; +$header-menu-flex-sm-up: 1 0 40%; $header-menu-flex-adv-srch-sm-up: 1 0 100%; $header-menu-flex-order-sm-up: 3; $header-menu-padding-top-sm-up: 6px; @@ -728,7 +728,7 @@ $icon-exclamation-triangle-in-header-padding: 0 !default; // ***************************************************************** // ************ Search box ************************************ // ***************************************************************** -// Make search box container flexible -- values should complement those +// Make search box container flexible - values should complement those // of #header-collapse (i.e. the right-hand side navigation elements) $search-container-right-padding: 0 !default; $search-container-sm-max-left-padding: 0 !default; @@ -758,9 +758,12 @@ $search-form-input-type-sm-max-flex-shrink: 2 !default; $search-form-input-only-sm-max-flex-basis: 50% !default; $search-form-select-only-sm-max-flex-basis: 20% !default; -$search-form-advanced-search-button-border: 1px solid $oil !default; - +// Pls. beware that the next two settings affect the active-filters' buttons too +// (reset in 'header-active-filters.scss' -> button[id^='dropdown-toggle-']) +$search-form-btn-form-control-vertical-align: top !default; +$search-form-btn-form-control-float-xs: left !default; +$search-form-advanced-search-button-border: 1px solid $oil !default; @@ -803,24 +806,50 @@ $adv-search-links-sm-to-md-max-max-width: 400px !default; // ***************************************************************** // ************ Active filters in header *************************** // ***************************************************************** -// Variables for search-filter-remove 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; + +// 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-hover-bg: $brand-warning !default; -$search-filter-remove-hover-color: $white !default; +$search-filter-remove-text-decoration: none !default; + + +// Give these the same look on focus/hover as 'Remove all' +$search-filter-remove-hover-bg: $search-filter-remove-all-bg !default; +$search-filter-remove-hover-color: $search-filter-remove-all-color !default; $search-filter-values-remove-color: $white !default; $search-filters-margin-bottom: 4px !default; $search-filters-padding: .5rem 5px !default; -$search-filter-remove-icon: '\f00d' !default; +$search-filter-remove-button-vertical-align: top !default; +$search-filter-remove-button-text-display: inline-block !default; +$search-filter-remove-button-text-max-width: 200px !default; +$search-filter-remove-button-text-overflow: hidden !default; +$search-filter-remove-button-text-text-overflow: ellipsis !default; +$search-filter-remove-button-text-white-space: nowrap !default; +$search-filter-remove-icon: '\f00d' !default; +$search-filter-remove-icon-hover-color: $red !default; +$search-filter-remove-icon-vertical-align: top !default; +$search-filter-remove-icon-in-dropdown-position: absolute !default; +$search-filter-remove-icon-in-dropdown-distance-from-right: 1rem !default; +// Unset the vertical alignment from BS to align dropdowns AND indiv. buttons +// The relevant definition is '.searchForm .btn {vertical-align: top;}' +$search-filter-dropdown-button-vertical-align: unset !default; +$search-filter-dropdown-button-float: none !default; // ***************************************************************** // ************ Breadcrumbs **************************************** diff --git a/themes/finc/scss/components/_header-active-filters.scss b/themes/finc/scss/components/_header-active-filters.scss index 1373f53e8be1915f11577c5e5d20e2e7fa80b8b8..11c7638ce982b7dda425c37c98c4063cf5e0627c 100644 --- a/themes/finc/scss/components/_header-active-filters.scss +++ b/themes/finc/scss/components/_header-active-filters.scss @@ -1,4 +1,46 @@ // Use this file to style all active filters elements in header +// The structure is like so: +// <!-- Outer container --> +// <div class="active-filters"> +// <!-- Reset all button --> +// <a class="reset-filters-btn" .... +// <!-- Outer container for all individual filters --> +// <div class="filters"> +// <div class="title-value-pair"> +// <!-- Filtergroup title --> +// <span class="filters-title"> +// <!-- Individual filters' outer container --> +// <span class="filter-value filters-or"> +// <!-- Individual filter --> +// <a class="search-filter-remove" ... + +.active-filters { + // Outer container for all filters and reset button + // overwrite BS values where necessary + display: $active-filters-outer-container-display; + + + // Outer container for all individual filters + .filters { + padding-left: $active-filters-outer-filters-container-padding-left; + } + + // Individual filters' outer container + // Make this the same height as .reset-filters-btn and other navigation elements + // for better usability - keep '.filters' for specifity (overwriting BS3) + .filters .filter-value { + height: $navigation-element-default-height; + margin-bottom: $search-filters-margin-bottom; + padding: $search-filters-padding; + + &:focus, + &:hover { + background: $search-filter-remove-hover-bg; + color: $search-filter-remove-hover-color; + } + } +} + // This is the 'reset all'-button .reset-filters-btn { @@ -12,53 +54,93 @@ } } -.active-filters { - // Colored block with filter name - // Make same height as .reset-filters-btn and other navigation elements - // for better usability - keep '.filters' for specifity (overwriting BS3) - .filters .filter-value { - height: $navigation-element-default-height; - margin-bottom: $search-filters-margin-bottom; - padding: $search-filters-padding; - &:focus, - &:hover { +// Set focus and hover styles for individual filter items' +// outer container ('.filters .filter-value') and filter items ('.search-filter-remove') +.filters .filter-value, +.search-filter-remove { + color: $search-filter-values-remove-color; + text-decoration: $search-filter-remove-text-decoration; + + &:focus, + &:hover, + &:visited:focus, + &:visited:hover { + // Keep '.active-filters' for specifity to overwrite BS + .active-filters & { background: $search-filter-remove-hover-bg; color: $search-filter-remove-hover-color; + text-decoration: inherit; + } } - // Link wrapping X-icon in filter-value element - .search-filter-remove { - text-decoration: none; - &:focus, - &:hover { - color: $search-filter-remove-hover-color; - outline-color: $search-filter-remove-hover-color; + // Make this same color as un-visited item + &:visited { + // Keep '.active-filters' for specifity to overwrite BS + .active-filters & { + color: inherit; + text-decoration: inherit; + } + } +} + +// Set color of individual filters when focus is on outer container +.search-filter-remove, +.search-filter-remove:visited { - .filter-value:focus &, - .filter-value:hover & { - color: inherit; - } + .filters .filter-value:focus &, + .filters .filter-value:hover & { + background: $search-filter-remove-hover-bg; + color: $search-filter-remove-hover-color; + + + // x-icon color when outer container is focussed + &::after { + color: $search-filter-remove-icon-hover-color; } } } -// set states for focussed link when the outer container is NOT focussed -.filter-value:not(:focus), -.filter-value:not(:hover) { - .search-filter-remove { - &:focus, - &:hover { - color: inherit; - outline-color: $search-filter-values-remove-color; +// This is the colored, button-like element with the 'x' icon +.search-filter-remove { + // Align with text inside the element + vertical-align: $search-filter-remove-button-vertical-align; + + .text { + // Create ellipsis for overlong filter text + display: $search-filter-remove-button-text-display; + max-width: $search-filter-remove-button-text-max-width; + overflow: $search-filter-remove-button-text-overflow; + text-overflow: $search-filter-remove-button-text-text-overflow; + white-space: $search-filter-remove-button-text-white-space; + } + + + // Set icon content + &::after { + content: $search-filter-remove-icon; + vertical-align: $search-filter-remove-icon-vertical-align; + + // Move 'x' to the right of the buttons in dropdown + .search-filter-dropdown & { + position: $search-filter-remove-icon-in-dropdown-position; + right: $search-filter-remove-icon-in-dropdown-distance-from-right; } } } -// Set icon -.search-filter-remove::after { - content: $search-filter-remove-icon; + +// Style for dropdowns (activated when more than n item(s) are set in filters.phtml): +// Unset the vertical alignment from BS to align dropdowns AND indiv. buttons +// The relevant definition is '.searchForm .btn {vertical-align: top;}' +.search-filter-dropdown { + + button[id^='dropdown-toggle-'] { + // set 'float' to 'none' to make vertical align work + float: $search-filter-dropdown-button-float; + vertical-align: $search-filter-dropdown-button-vertical-align; + } } diff --git a/themes/finc/scss/components/_header-navbar.scss b/themes/finc/scss/components/_header-navbar.scss index 8547541a6acf7a2d9fc7a3ad2e557baedf1dbc7d..2cffc9ceda3d679eca5326d651e3047f62ee739e 100644 --- a/themes/finc/scss/components/_header-navbar.scss +++ b/themes/finc/scss/components/_header-navbar.scss @@ -165,6 +165,7 @@ header, // Make right-hand header parts fit with search box on SM devices - see also .search.container #header-collapse { + @media (min-width: $screen-sm-min) { // Make smaller to fit with search box and right-hand nav-elements flex: $header-menu-flex-sm-up; diff --git a/themes/finc/scss/components/_search.scss b/themes/finc/scss/components/_search.scss index 3dbcc09cbf36b000e402f0f4f2c42fbee3f329d4..528aeefad137439f4c6971311114de56e41227f1 100644 --- a/themes/finc/scss/components/_search.scss +++ b/themes/finc/scss/components/_search.scss @@ -105,14 +105,15 @@ } } - // BUTTONS in search form + // BUTTONS, inputs and selects in search form .btn, .form-control { - // align 'search type' and search button - vertical-align: top; + // align 'search type' and search button: + // Pls. beware that the active-filters' buttons will also be affected by this (reset in 'header-active-filters.scss' -> button[id^='dropdown-toggle-']) + vertical-align: $search-form-btn-form-control-vertical-align; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - float: left; + float: $search-form-btn-form-control-float-xs; } } diff --git a/themes/finc/templates/search/controls/limit.phtml b/themes/finc/templates/search/controls/limit.phtml index b13ad15652a7326f4e306f64cdc1759cc07aa596..50ffafe7d112d932b26bd4f6530d4bc5ab49a484 100644 --- a/themes/finc/templates/search/controls/limit.phtml +++ b/themes/finc/templates/search/controls/limit.phtml @@ -4,7 +4,7 @@ <?php /* finc: DO NOT use class 'form-inline' as it messes up the select box */ /* finc: remove classname search-result-limit */ ?> <form class="limit-form" action="<?=$this->currentPath() . $this->results->getUrlQuery()->setLimit(null)?>" method="post"> - <label for="limit-form"><?=$this->transEsc('Results per page')?></label> + <label for="limit"><?=$this->transEsc('Results per page')?></label> <div class="limit-inner"> <?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?> <select id="limit" name="limit" class="jumpMenu"> diff --git a/themes/finc/templates/search/filters.phtml b/themes/finc/templates/search/filters.phtml index b5509926df03b38cf360bca3cb3a1e5527abc87d..6d365819d79cb616c77265579ce677bee9ea1ad4 100644 --- a/themes/finc/templates/search/filters.phtml +++ b/themes/finc/templates/search/filters.phtml @@ -50,7 +50,12 @@ <?php foreach ($filterList as $field => $data): ?> <div class="title-value-pair"> <span class="filters-title"><?=$this->transEsc($field)?>:</span> - <?php if (count($data) > 3): ?> + <?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): ?> <div class="search-filter-dropdown dropdown"> <?php $dropdown = true; ?> <?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?> @@ -88,13 +93,14 @@ <?=($index > 0 || 'NOT' === $value['operator']) ? $join : '' ?> </span> <span class="filter-value filters-<?=$operatorClass?>"> - <?php /* finc: include span in remove link for better UX */ ?> + <?php /* finc uses entire text + icon as link for larger interaction area; adds more detailed aria-label */ ?> <?php $removeLink = isset($this->urlQuery) ? $urlQuery->removeFacet($value['field'], $value['value'], $value['operator']) : $this->searchMemory()->getEditLink($this->searchClassId, 'removeFacet', $value); ?> - <a class="search-filter-remove" aria-label="<?=$this->translate('Remove filter') ?>" href="<?=$removeLink?>"><!--icon from css --> + <a class="search-filter-remove" aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $value['displayText']])?>" + href="<?=$removeLink?>"> <span class="text"> <?=$this->escapeHtml($value['displayText'])?> </span> @@ -125,7 +131,12 @@ <?php // Normal view ?> <div class="active-filters hidden-xs"> <?php if ($resetLink && $options->getRetainFilterSetting()): ?> - <a class="reset-filters-btn" href="<?=$resetLink?>"><?=$this->transEsc('reset_filters_button')?></a> + <?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; ?> @@ -138,7 +149,11 @@ <div class="active-filters visible-xs"> <div class="filters-toggle-bar"> <?php if ($resetLink && $options->getRetainFilterSetting()): ?> - <a class="reset-filters-btn" href="<?=$resetLink?>"><?=$this->transEsc('reset_filters_button')?></a> + <?php /* finc adds verbose reload warning via aria-label */ ?> + <a class="reset-filters-btn active" 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 endif; ?> <div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile"> <?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?>