Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FINNA-774] Make advanced search facets collapsible #2637

Closed
wants to merge 10 commits into from
Closed

[FINNA-774] Make advanced search facets collapsible #2637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
da09d6b
Initial commit, facets now have collapsiple content.
siiriylonen Jul 6, 2023
afbc958
Small changes.
siiriylonen Jul 11, 2023
c9eff9b
Two column facets now separated into two column divs.
siiriylonen Jul 12, 2023
d7ed237
Fixing deprecated braces.
siiriylonen Jul 12, 2023
516ace1
Removed a space...
siiriylonen Jul 12, 2023
076e819
Collapsible facet borders set and the two column facet row customized…
siiriylonen Jul 13, 2023
49764e8
Range and map facets to start as not collapsed.
siiriylonen Jul 13, 2023
4f93f0e
Map and range facets now init when collapse is toggled.
siiriylonen Jul 17, 2023
0987a2a
Changed to finna-panels.
siiriylonen Aug 7, 2023
41a4ec3
Fixes.
siiriylonen Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 99 additions & 9 deletions themes/finna2/less/finna/advanced-search.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,6 @@
.year-input-container {
margin: 5px 0 10px 0;
display: inline-block;
padding-right: 10px;
text-align: left;
}
label {
Expand Down Expand Up @@ -302,15 +301,108 @@
float: left;
margin-top: 30px;
}
.search-map-container {
margin-bottom: 30px;
}
.well.map {
background: @body-bg;
border: 0;
box-shadow: none;
padding: 5px;
.information {
margin-top: 10px;
}
.information-text {
margin: 0;
}
}
.panel {
margin-bottom: 0;
width: 100%;
margin-bottom: 10px;
.panel-collapse {
.panel-body {
padding: 0;
.list-group-item.facet {
border: 0;
}
}
}
.panel-heading {
color: @text-color;
border: 1px solid lightgray;
text-shadow: none;
background-color: #f2f2f2;
.panel-title a {
font-size: 0.9em;
font-weight: 600;
&::after {
color: @brand-primary;
font-size: 1em;
font-weight: 600;
}
&:hover {
background-color: #f2f2f2;
}
}
}
}
.well.limit-to {
background: @body-bg;
border: 0;
box-shadow: none;
padding: 0;
margin-bottom: 10px;
&.facets {
margin-bottom: 30px;
}
&:not('.ranges-container') {
column-gap: 5px;
}
.finna-multiselect.search {
border: 0;
border-bottom: 1px solid lightgray;
box-shadow: none;
}
ul.finna-multiselect.done {
border: 0;
box-shadow: none;
}
.facet-container {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-right: 100px;
gap: 10px;
@media (max-width: @screen-sm) {
gap: 0;
}
@media (max-width: @screen-xs) {
margin-right: 0;
}
.facet-column {
flex: 45%;
@media (max-width: @screen-sm) {
flex: 100%;
.list-group.facet {
max-width: 400px;
}
}
display: flex;
flex-direction: column;
align-items: flex-start;
.facet {
width: 100%;
.list-group-item.title {
border: 1px solid lightgray;
}
}
}
}
.range-selection {
padding: 20px;
}
}
.search_bool {
margin-right: 10px;
}
Expand All @@ -334,20 +426,21 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
&.information-multiselect {
padding-top: 20px;
}
}
.additional-info {
padding: 8px;
&.alert-info {
&.alert-info.information {
width: 100%;
margin-top: 10px;
}
.information-text {
padding-bottom: 5px;
padding-left: 2.4em;
font-size: .9em;
}
a.information-text {
background-color: transparent;
}
}
.information-geo {
padding: 5px;
Expand All @@ -368,9 +461,6 @@
.ranges-container .year-input-container {
width: 100%;
vertical-align: top;
@media (min-width: @screen-sm-min) {
width: 30%;
}
}
.ranges-container,
.solr-adv-filter {
Expand Down Expand Up @@ -502,7 +592,7 @@
}
}
.info {
padding-bottom: 5px;
padding: 10px 5px;
font-size: .9em;
font-weight: 600;
}
Expand Down
2 changes: 1 addition & 1 deletion themes/finna2/less/finna/facets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ ul.jstree-children {
}
}
.collapse, .collapsing {
a {
a:not('.information-text') {
background-color: @body-bg;
}
.list-group-item {
Expand Down
4 changes: 3 additions & 1 deletion themes/finna2/less/finna/result-sidebar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,9 @@ button.list-group-item {
position: relative;
font-size: 1em;
vertical-align: middle;
border: none;
&:not('.ranges-container') {
border: none;
}
&:first-child {
.border-top-radius(0px);
}
Expand Down
16 changes: 12 additions & 4 deletions themes/finna2/templates/search/advanced/map.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,24 @@ $this->jsTranslations()->addStrings(
}
?>
<div aria-hidden="true" class="search-map-container">
<div>
<h4><?=$this->transEsc('Geographical Area') ?></h4>
</div>
<div class="map-container">
<?php ob_start(); ?>
<div id="advanced-search-map" class="map-container">
<fieldset class="well map">
<legend class="sr-only"><?=$this->transEsc('Geographical Area') ?></legend>
<div class="selection-map-canvas"></div>
<div class="information information-geo bg-info"><p class="information-text"><?=$this->transEsc('advanced_search_information_text_map')?></p></div>
</fieldset>
</div>
<?php $content = ob_get_clean(); ?>
<?= $this->render('components/molecules/containers/finna-panel', [
'attributes' => ['class' => ['finna-panel-borderless']],
'heading' => $this->transEsc('Geographical Area'),
'headingLevel' => 4,
'content' => $content,
'headingId' => 'map-heading',
'collapseId' => 'map-collapse',
'collapsed' => false,
]); ?>
</div>

<?php
Expand Down
68 changes: 39 additions & 29 deletions themes/finna2/templates/search/advanced/multiselect.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,44 @@
$filenameHeader = 'advanced/' . $field . '-facet-information-header.phtml';
$filenameFooter = 'advanced/' . $field . '-facet-information-footer.phtml';
?>
<div class="facet">
<div class="solr-adv-filter <?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>-container">
<label id="limit_<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>"><?=$this->transEsc($this->list['label'])?>:</label>
<?php if ($this->resolver($filenameHeader)): ?>
<?=$this->render($filenameHeader) ?>
<?php endif; ?>
<select class="finna-multiselect init" aria-labelledby="limit_<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>" name="filter[]" multiple="multiple">
<?php if (is_array($this->hierarchicalFacets) && in_array($this->field, $this->hierarchicalFacets)): ?>
<?php foreach ($this->list['list'] as $key => $value): ?>
<?php
$isParent = isset($value['opt_group_start']) && $value['opt_group_start'];
$isChild = $value['level'] !== '0';
$display = str_pad('', 4 * $value['level'] * 6, '&nbsp;', STR_PAD_LEFT) . $this->escapeHtml($value['displayText']);
?>
<option class="<?= $isParent ? 'option-parent' : ''; ?> <?= $isChild ? 'option-child child-width-' . $value['level'] : ''?>" value="<?=$this->escapeHtmlAttr(($value['operator'] == 'OR' ? '~' : '') . $this->field . ':"' . $value['value'] . '"')?>"<?=(isset($value['selected']) && $value['selected']) ? ' selected="selected"' : ''?>><?=$display?></option>
<?php endforeach; ?>
<?php else: ?>
<?php foreach ($this->list['list'] as $value): ?>
<option value="<?=$this->escapeHtmlAttr(($value['operator'] == 'OR' ? '~' : '') . $this->field . ':"' . $value['value'] . '"')?>"<?=(isset($value['selected']) && $value['selected']) ? ' selected="selected"' : ''?>><?=$this->escapeHtml($value['displayText'])?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<input aria-labelledby="limit_<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>" class="finna-multiselect search form-control" type="text" placeholder="<?= $this->transEsc('search_placeholder') ?>">
<ul aria-multiselectable="true" role="listbox" aria-label="<?= $this->transEsc('Add filter') . ' ' . $this->transEsc($this->list['label']) ?>" tabindex="0" class="finna-multiselect done" aria-activedescendant=""></ul>
<button type="button" class="finna-multiselect clear btn btn-link"><?= $this->transEsc('Clear Selections') ?></button>
<?php ob_start(); ?>
<div class="list-group-item facet">
<div id="<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>" class="solr-adv-filter <?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>-container">
<?php if ($this->resolver($filenameHeader)): ?>
<?=$this->render($filenameHeader) ?>
<?php endif; ?>
<select class="finna-multiselect init" aria-labelledby="limit_<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>" name="filter[]" multiple="multiple">
<?php if (is_array($this->hierarchicalFacets) && in_array($this->field, $this->hierarchicalFacets)): ?>
<?php foreach ($this->list['list'] as $key => $value): ?>
<?php
$isParent = isset($value['opt_group_start']) && $value['opt_group_start'];
$isChild = $value['level'] !== '0';
$display = str_pad('', 4 * $value['level'] * 6, '&nbsp;', STR_PAD_LEFT) . $this->escapeHtml($value['displayText']);
?>
<option class="<?= $isParent ? 'option-parent' : ''; ?> <?= $isChild ? 'option-child child-width-' . $value['level'] : ''?>" value="<?=$this->escapeHtmlAttr(($value['operator'] == 'OR' ? '~' : '') . $this->field . ':"' . $value['value'] . '"')?>"<?=(isset($value['selected']) && $value['selected']) ? ' selected="selected"' : ''?>><?=$display?></option>
<?php endforeach; ?>
<?php else: ?>
<?php foreach ($this->list['list'] as $value): ?>
<option value="<?=$this->escapeHtmlAttr(($value['operator'] == 'OR' ? '~' : '') . $this->field . ':"' . $value['value'] . '"')?>"<?=(isset($value['selected']) && $value['selected']) ? ' selected="selected"' : ''?>><?=$this->escapeHtml($value['displayText'])?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<input aria-labelledby="limit_<?=$this->escapeHtmlAttr(str_replace(' ', '', $this->field))?>" class="finna-multiselect search form-control" type="text" placeholder="<?= $this->transEsc('search_placeholder') ?>">
<ul aria-multiselectable="true" role="listbox" aria-label="<?= $this->transEsc('Add filter') . ' ' . $this->transEsc($this->list['label']) ?>" tabindex="0" class="finna-multiselect done" aria-activedescendant=""></ul>
<button type="button" class="finna-multiselect clear btn btn-link"><?= $this->transEsc('Clear Selections') ?></button>
<?php if ($this->resolver($filenameFooter)): ?>
<?=$this->render($filenameFooter) ?>
<?php endif; ?>
</div>
</div>
<?php if ($this->resolver($filenameFooter)): ?>
<?=$this->render($filenameFooter) ?>
<?php endif; ?>
</div>
<?php $content = ob_get_clean(); ?>
<?= $this->render('components/molecules/containers/finna-panel', [
'attributes' => ['class' => ['finna-panel-borderless', 'title', 'list-group']],
'heading' => $this->transEsc($this->list['label']),
'headingLevel' => 4,
'content' => $content,
'headingId' => $this->transEsc($this->list['label'] . '-title'),
'collapseId' => $this->transEsc($this->list['label']),
'collapsed' => false,
]); ?>
<!-- END of: finna - search/advanced/multiselect.phtml -->
33 changes: 21 additions & 12 deletions themes/finna2/templates/search/advanced/ranges.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,12 @@
<?php foreach ($this->ranges as $current): $escField = $this->escapeHtmlAttr($current['field']); ?>
<fieldset>
<legend class="sr-only"><?=$this->transEsc($params->getFacetLabel($current['field']))?></legend>
<div>
<span class="label-block form-inline"><?=$this->transEsc($params->getFacetLabel($current['field']))?>:</span>
</div>
<div>
<div class="year-input-container text-center">
<div class="range-selection-container">
<?php ob_start(); ?>
<div id="<?=$current['field']?>" class="range-selection">
<input type="hidden" name="<?=$this->escapeHtmlAttr($current['type'])?>range[]" value="<?=$escField?>">
<?php if (isset($current['rangeType'])): ?>
<input type="hidden" name="<?=$this->escapeHtmlAttr($current['field']) ?>_type" value="<?=$this->escapeHtmlAttr($current['rangeType']) ?>">
<input type="hidden" name="<?=$this->escapeHtmlAttr($current['field']) ?>_type" value="<?=$this->escapeHtmlAttr($current['rangeType']) ?>">
<?php endif ?>
<label for="<?=$escField?>from" class="sr-only"><?=$this->transEsc('year_from');?></label>
<input id="<?=$escField?>from" type="number" class="form-control form-inline input-year" value="<?=isset($current['values'][0]) ? $this->escapeHtmlAttr($current['values'][0]) : ''?>" size="5">
Expand All @@ -20,13 +18,24 @@
<input id="<?=$escField?>to" type="number" class="form-control form-inline input-year" value="<?=isset($current['values'][1]) ? $this->escapeHtmlAttr($current['values'][1]) : ''?>" size="5">
</div>
<div class="information"><p class="information-text"><?=$this->transEsc('advanced_search_information_text_range')?></p></div>
<?php if ($current['type'] == 'date'): ?>
<div aria-hidden="true" class="slider-container">
<label for="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider" class="sr-only"><?=$this->transEsc('year_slider');?></label>
<input type="text" id="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider">
<?php if ($current['type'] == 'date'): ?>
<div aria-hidden="true" class="slider-container">
<label for="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider" class="sr-only"><?=$this->transEsc('year_slider');?></label>
<input type="text" id="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider">
</div>
<?php endif; ?>
</div>
<?php $content = ob_get_clean(); ?>
<?= $this->render('components/molecules/containers/finna-panel', [
'attributes' => ['class' => ['finna-panel-borderless', 'year-input-container']],
'heading' => $this->transEsc($params->getFacetLabel($current['field'])),
'headingLevel' => 4,
'content' => $content,
'headingId' => 'ranges-heading',
'collapseId' => 'ranges-collapse',
'collapsed' => false,
]); ?>
</div>
<?php endif; ?>
</div>
<?php if ($current['type'] == 'date'): ?>
<?php
$this->headScript()->appendFile('vendor/bootstrap-slider.min.js');
Expand Down
15 changes: 11 additions & 4 deletions themes/finna2/templates/search/advanced/solr.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
$searchFilters = $this->saved->getParams()->removeGeographicFilters($searchFilters);
$hiddenFilters = $this->saved->getParams()->getHiddenFilters();
}
[$column1, $column2] = array_chunk($this->facetList, ceil(count($this->facetList) / 2), true);
?>
<div>
<h3><?=$this->transEsc('Limit To')?></h3>
Expand All @@ -30,11 +31,17 @@
<fieldset class="well limit-to facets">
<legend class="sr-only"><?=$this->transEsc('Limit To')?></legend>
<div class="facet-container">
<?php foreach ($this->facetList as $field => $list): ?>
<?= $this->render('search/advanced/multiselect.phtml', ['field' => $field, 'list' => $list, 'hierarchicalFacets' => $this->hierarchicalFacets]); ?>
<?php endforeach; ?>
<div class="facet-column">
<?php foreach ($column1 as $field => $list): ?>
<?= $this->render('search/advanced/multiselect.phtml', ['field' => $field, 'list' => $list, 'hierarchicalFacets' => $this->hierarchicalFacets]); ?>
<?php endforeach; ?>
</div>
<div class="facet-column">
<?php foreach ($column2 as $field => $list): ?>
<?= $this->render('search/advanced/multiselect.phtml', ['field' => $field, 'list' => $list, 'hierarchicalFacets' => $this->hierarchicalFacets]); ?>
<?php endforeach; ?>
</div>
</div>
<div class="information information-multiselect"><p class="information-text"><?=$this->transEsc('advanced_search_information_text_facets')?></p></div>
</fieldset>
<?php if (!empty($this->daterange)): ?>
<div class="ranges-container well limit-to">
Expand Down