Skip to content
Snippets Groups Projects
Commit b3d1e989 authored by Alexander Purr's avatar Alexander Purr Committed by Robert Lange
Browse files

refs #17934 [finc] show site facet groups as html listings 

* for more or less facets buttons: stop parent event handling on link by event.stopImmediatePropagation()
* facet group on single page: add ul
* remove filters (side facets) as list
* put scss into separate scss file in finc-accessibility theme
* inherit scss from finc-accessibility theme
* move potential PR SCSS to finc-accessibility
* small refactoring on single-facet.phtml
parent 97c4f712
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 189 additions and 23 deletions
themes/finc-accessibility/scss/compiled.scss 0 → 100644
+ 57
− 0
View file @ b3d1e989
// HOWTO:
// Create a compiled.SCSS file for all sub-themes which imports the respective parent theme's compiled.scss
// in the cascade plus extends it - this way we ALWAYS have an UP-TO-DATE compiled.CSS imported
// which includes finc plus all subsequent customizations
// i.e. finc's compiled.scss imports bootstrap3/scss/compiled - the house-specific branches such as
// de_15 then import finc/scss/compiled
// -------------------------------------------------------
// 0. Note for developers
// Do NOT EDIT compiled.css
// -------------------------------------------------------
// 1. Define or re-define KEY VARIABLES and MIXINS (see 1.1 ff below) OR import your own
// -------------------------------------------------------
// 1.1 Unless imported, define standard colour variables here which are used in variables below prior to finc.scss import
// e.g. $brand-primary: #083152 !default; // blue
// $brand-secondary: #e7e7e7 !default; // white-lilac
// $brand-danger: #f04124 !default; // cinnabar
// $brand-info: #a0d3e8 !default; // cornflower
// $brand-success: #085218 !default; // sea-green
// $brand-warning: #f08a24 !default; // carrot
// -------------------------------------------------------
// 1.2 DO NOT define site-specific colours in finc - this will be done in site-specific themes
// -------------------------------------------------------
// 2. For Media queries:
// The maximum ranges are defined as the next higher element minus 1px, so:
// '$screen-xs-max' = $screen-sm-min - 1
// Extra small screen / phone: up to '$screen-xs-max' (= '$screen-sm-min - 1') = everything below 767px;
// Small screen / tablet: from '$screen-sm-min' (= 768px) to '$screen-sm-max' (= '$screen-md-min -1') = 991px
// Medium screen / desktop: from '$screen-md-min' (=992px) to '$screen-md-max' (= '$screen-lg-min -1') = 1199px
// Large screen / wide desktop: '$screen-lg-min' (=1200px);
// So, you can simply use: // @media (max-width: $screen-xs-max) {...} for everything for XS devices
// -------------------------------------------------------
// 2.1 Media queries for Navbar collapse/uncollapse:
// The point at which the navbar becomes uncollapsed is defined as
// $grid-float-breakpoint: $screen-sm-min !default;
// in Bootstrap -- so you can use '$screen-sm-min' unless you changed the definition
// The point at which the navbar begins collapsing is defined as
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
// -------------------------------------------------------
// 3. import entire BS (finc) OR import (instances) finc compiled.scss to have variables and mixins defined above applied to it
@import '../../bootstrap3/scss/bootstrap';
// @import '../../finc/scss/compiled.scss'
// -------------------------------------------------------
// 4. Customize further - this for BASIC SETTINGS ONLY - all colour customization will be done in in site-specific themes
// ATTENTION: any change made here will affect ALL subsequent branches !!!
//// Result List ol, ul that contains li.result or facet group / side facets that contains li.facet
.record-list, .facet-group > ul {
list-style: none;
margin: 0;
padding: 0;
}
// remove filter links styling
a.remove-filter {
display: flex;
width: 100%;
}
\ No newline at end of file
themes/finc-accessibility/templates/Recommend/SideFacets/cluster-list.phtml 0 → 100644
+ 55
− 0
View file @ b3d1e989
<!-- finc-accessibility - Recommend - SideFacets - cluster-list -->
<?php $idAndClass = 'id="more-narrowGroupHidden-' . $this->escapeHtmlAttr($this->title) . '" class="facet narrow-toggle"'; ?>
<?php $moreClass = 'narrowGroupHidden-' . $this->escapeHtmlAttr($this->title) . ' hidden'; ?>
<?php foreach ($this->cluster['list'] as $i => $thisFacet): ?>
<?php if ($i == $this->facets_before_more): ?>
<?php if ($facetLightbox = $this->options->getFacetListAction()): ?>
<?php $moreUrl = $this->url($facetLightbox) . $results->getUrlQuery()->getParams() . '&amp;facet=' . $this->title . '&amp;facetop=' . $thisFacet['operator'] . '&amp;facetexclude=' . ($this->allowExclude ? 1 : 0); ?>
<?php else: ?>
<?php $moreUrl = '#'; ?>
<?php endif; ?>
<?php if (($this->showMoreInLightbox && $this->showMoreInLightbox !== 'more') && $facetLightbox): ?>
<a <?=$idAndClass ?> data-lightbox href="<?=$moreUrl ?>" rel="nofollow">
<span class="text"><?=$this->transEsc('more')?> ...</span>
</a>
<?php break; ?>
<?php endif; ?>
<li <?=$idAndClass ?>>
<a class="text" href="<?=$moreUrl ?>" onclick="event.stopImmediatePropagation(); return moreFacets('narrowGroupHidden-<?=$this->escapeHtmlAttr($this->title) ?>');" rel="nofollow">
<?=$this->transEsc('more')?> ...
</a>
</li>
<?php endif; ?>
<?=$this->render('Recommend/SideFacets/single-facet.phtml', [
'exclude' => $this->allowExclude,
'facet' => $thisFacet,
'group' => $this->title,
'moreClass' => $i >= $this->facets_before_more ? $moreClass : false,
'url' => $this->results->getUrlQuery(),
'urlBase' => '',
]) ?>
<?php endforeach; ?>
<?php if (empty($this->cluster['list'])): ?>
<div class="facet"><?=$this->transEsc('facet_list_empty')?></div>
<?php endif; ?>
<?php /* LESS and SEE MORE links */ ?>
<?php if (isset($i) && $i >= $this->facets_before_more): ?>
<?php if ($this->showMoreInLightbox === 'more' && $facetLightbox = $options->getFacetListAction()): ?>
<?php
$moreUrl = $this->url($facetLightbox) . $results->getUrlQuery()->getParams() . '&amp;facet=' . $this->title . '&amp;facetop=' . $thisFacet['operator'] . '&amp;facetexclude=' . ($this->allowExclude ? 1 : 0);
if (!empty($this->baseUriExtra)) {
$moreUrl .= '&amp;baseUriExtra=' . urlencode($this->baseUriExtra);
}
?>
<a class="facet narrow-toggle <?=$moreClass ?>" data-lightbox href="<?=$moreUrl ?>" rel="nofollow">
<span class="text"><?=$this->transEsc('see all')?> ...</span>
</a>
<?php endif; ?>
<li class="facet narrow-toggle <?=$moreClass ?>">
<a class="text" href="#" onclick="event.stopImmediatePropagation(); return lessFacets('narrowGroupHidden-<?=$this->escapeHtmlAttr($this->title) ?>');">
<?=$this->transEsc('less')?> ...
</a>
</li>
<?php endif; ?>
<!-- finc-accessibility - Recommend - SideFacets - cluster-list - END -->
themes/finc-accessibility/templates/Recommend/SideFacets/filter-list.phtml
+ 13
− 9
View file @ b3d1e989
......@@ -2,6 +2,7 @@
<?php /* #18509 copied from bootstrap for adding language tags to displayText */ ?>
<div class="facet-group active-filters">
<div class="title"><?=$this->transEsc('Remove Filters')?></div>
<ul>
<?php foreach ($filterList as $field => $filters): ?>
<?php foreach ($filters as $i => $filter): ?>
<?php
......@@ -18,16 +19,19 @@
$filter['displayText'] = $this->translate('filter_wildcard');
}
?>
<a class="facet" href="<?=$removeLink ?>" title="<?=$this->transEsc('clear_tag_filter') ?> - <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $filter['displayText']])?>">
<span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
<span class="text">
<?php if ($filter['operator'] == 'NOT'): ?><?=$this->transEsc('NOT') ?><?php endif; ?>
<?php if ($filter['operator'] == 'OR' && $i > 0): ?><?=$this->transEsc('OR') ?><?php endif; ?>
<?=$this->transEsc($field) ?>: <?=$this->sideFacet()->getLanguageTag($this->escapeHtml($filter['displayText']), 'span', $this->layout()->userLang) ?>
</span>
<span class="status"><i class="fa fa-times" aria-hidden="true"></i></span>
</a>
<li class="facet">
<a class="remove-filter" href="<?=$removeLink ?>" title="<?=$this->transEsc('clear_tag_filter') ?> - <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $filter['displayText']])?>">
<span class="sr-only"><?=$this->transEsc('clear_tag_filter') ?></span>
<span class="text">
<?php if ($filter['operator'] == 'NOT'): ?><?=$this->transEsc('NOT') ?><?php endif; ?>
<?php if ($filter['operator'] == 'OR' && $i > 0): ?><?=$this->transEsc('OR') ?><?php endif; ?>
<?=$this->transEsc($field) ?>: <?=$this->sideFacet()->getLanguageTag($this->escapeHtml($filter['displayText']), 'span', $this->layout()->userLang) ?>
</span>
<span class="status"><i class="fa fa-times" aria-hidden="true"></i></span>
</a>
</li>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</div>
<!-- finc-accessibility - Recommend - SideFacets - filter-list.phtml - END -->
themes/finc-accessibility/templates/search/facet-list.phtml 0 → 100644
+ 56
− 0
View file @ b3d1e989
<!-- finc-accessibility: search - facet-list -->
<?php
$options = $this->results->getParams()->getOptions();
$facetLightbox = $options->getFacetListAction();
if (empty($this->sortOptions)) {
$this->sort = 'default';
$this->sortOptions = [ 'default' => 'default' ];
}
$urlBase = $this->url($facetLightbox) . $results->getUrlQuery()->getParams() . '&amp;facet=' . urlencode($this->facet) . '&amp;facetexclude=' . $this->exclude . '&amp;facetop=' . $this->operator;
$searchAction = $this->url($options->getSearchAction());
if (!empty($this->baseUriExtra)) {
$searchAction .= urlencode($this->baseUriExtra);
$urlBase .= '&amp;baseUriExtra=' . urlencode($this->baseUriExtra);
}
$this->headTitle($this->translate('facet_list_for', ['%%field%%' => $this->facetLabel]));
?>
<h2><?=$this->transEsc($this->facetLabel) ?></h2>
<?php if (count($this->sortOptions) > 1): ?>
<div class="full-facet-sort-options">
<label><?=$this->translate('Sort') ?></label>
<div class="btn-group">
<?php foreach ($this->sortOptions as $key => $sort): ?>
<a href="<?=$urlBase . '&amp;facetpage=1&amp;facetsort=' . urlencode($key) ?>" class="btn btn-default js-facet-sort<?php if($this->sort == $key): ?> active<?php endif; ?>" data-sort="<?=$key ?>" data-lightbox-ignore><?=$this->translate($sort) ?></a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<div class="lightbox-scroll full-facets">
<?php foreach ($this->sortOptions as $key => $sort): ?>
<?php $active = $this->sort == $key; ?>
<ul class="full-facet-list facet-group<?php if(!$active): ?> hidden<?php endif; ?>" id="facet-list-<?=$this->escapeHtmlAttr($key) ?>">
<?php if ($active): ?>
<?php if ($this->page > 1): ?>
<a href="<?=$urlBase . '&amp;facetpage=' . ($this->page - 1) . '&amp;facetsort=' . $this->sort ?>" class="facet js-facet-prev-page" data-page="<?=($this->page + 1) ?>" data-sort="<?=$this->sort ?>" data-limit="<?=count($this->data) ?>" data-lightbox-ignore><?=$this->translate('prev') ?> ...</a>
<?php endif; ?>
<?php foreach ($this->data as $item): ?>
<?=$this->render('Recommend/SideFacets/single-facet.phtml', [
'exclude' => $this->exclude,
'facet' => $item,
'group' => $this->facet,
'url' => $this->results->getUrlQuery(),
'urlBase' => $searchAction
]) ?>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($this->anotherPage): ?>
<a href="<?=$urlBase . '&amp;facetpage=' . ($this->page + 1) . '&amp;facetsort=' . urlencode($key) ?>" class="facet js-facet-next-page" data-page="<?=($this->page + 1) ?>" data-sort="<?=$this->escapeHtmlAttr($key) ?>" data-lightbox-ignore>
<span class="text"><?=$this->translate('more') ?> ...</span>
</a>
<?php endif; ?>
</ul>
<?php endforeach; ?>
</div>
<button class="btn btn-default lightbox-only" data-dismiss="modal"><?=$this->translate('close') ?></button>
<?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, '(typeof VuFind.lightbox_facets !== "undefined") && VuFind.lightbox_facets.setup();', 'SET'); ?>
<!-- finc-accessibility: search - facet-list - END -->
themes/finc/scss/compiled.scss
+ 1
− 8
View file @ b3d1e989
......@@ -39,7 +39,7 @@
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
// -------------------------------------------------------
// 3. import entire BS (finc) OR import (instances) finc compiled.scss to have variables and mixins defined above applied to it
@import '../../bootstrap3/scss/bootstrap';
@import '../../finc-accessibility/scss/compiled';
// @import '../../finc/scss/compiled.scss'
// -------------------------------------------------------
// 4. Customize further - this for BASIC SETTINGS ONLY - all colour customization will be done in in site-specific themes
......@@ -2144,13 +2144,6 @@ footer {
}
}
//// Result List ol, ul that contains li.result or facet group that contains li.facet
.record-list {
list-style: none;
margin: 0;
padding: 0;
}
//// Results (see BS SCSS/COMPONENTS/... for details)
.result {
hyphens: auto;
......
themes/finc/templates/Recommend/SideFacets.phtml
+ 2
− 2
View file @ b3d1e989
......@@ -58,7 +58,7 @@ if ($hierarchicalFacets) {
<button class="title<?php if(in_array($title, $collapsedFacets)): ?> collapsed<?php endif ?>" data-toggle="collapse" href="#side-collapse-<?=$this->escapeHtmlAttr($title) ?>" >
<?=$this->transEsc($cluster['label'])?>
</button>
<div id="side-collapse-<?=$this->escapeHtmlAttr($title)?>" class="collapse<?php if (!in_array($title, $collapsedFacets)): ?> in<?php endif ?>">
<ul id="side-collapse-<?=$this->escapeHtmlAttr($title)?>" class="collapse<?php if (!in_array($title, $collapsedFacets)): ?> in<?php endif ?>">
<?=$this->context($this)->renderInContext(
'Recommend/SideFacets/facet.phtml',
[
......@@ -66,7 +66,7 @@ if ($hierarchicalFacets) {
'cluster' => $cluster,
'collapsedFacets' => $collapsedFacets ]
); ?>
</div>
</ul>
</div>
<?php endforeach; ?>
<?php endif; ?>
......
themes/finc/templates/Recommend/SideFacets/single-facet.phtml
+ 5
− 4
View file @ b3d1e989
......@@ -31,9 +31,10 @@
}
?>
<?php if ($hasSubLinks): ?>
<div class="<?=implode(' ', $classList) ?>">
<li class="<?=implode(' ', $classList) ?>">
<?php else: ?>
<a
<li>
<a
<?php if ($this->facet['isApplied']): ?>id="<?=$this->sideFacet()->setAppliedFacet($this->transEsc('Skip to facet', ['%%filter_name%%' => $this->facet['displayText']])) ?>"<?php endif; ?>
href="<?=$toggleUrl ?>"
class="<?=implode(' ', $classList) ?>"
......@@ -64,12 +65,12 @@
</span>
<?php endif; ?>
<?php if ($this->exclude && !$this->facet['isApplied']): ?>
<?php if ($hasSubLinks): ?>
<?php $excludeURL = $this->urlBase . $this->url->addFacet($this->group, $this->facet['value'], 'NOT'); ?>
<a href="<?=$excludeURL ?>" data-lightbox-ignore class="exclude" title="<?= $this->transEsc('exclude_filter', ['%%filter_name%%' => $this->facet['displayText']]) ?>, <?= $this->transEsc('page_reload_hint') ?>">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<?php endif; ?>
<?=$hasSubLinks ? '</div>' : '</a>'; ?>
<?=$hasSubLinks ? '</li>' : '</a></li>'; ?>
<!-- finc - Recommend - SideFacets - single-facet - END -->
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment