Skip to content
Snippets Groups Projects
Commit 9b723038 authored by Chris Hallberg's avatar Chris Hallberg Committed by Demian Katz
Browse files

Collapsing top facets on mobile (#1057)

parent e04acea5
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 74 additions and 40 deletions
themes/bootprint3/css/compiled.css
+ 1
− 1
View file @ 9b723038
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/bootstrap3/css/compiled.css
+ 1
− 1
View file @ 9b723038
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/bootstrap3/js/facets.js
+ 15
− 1
View file @ 9b723038
/*global htmlEncode, VuFind */ /*global htmlEncode, VuFind */
/*exported initFacetTree */ /*exported collapseTopFacets, initFacetTree */
function buildFacetNodes(data, currentPath, allowExclude, excludeTitle, counts) function buildFacetNodes(data, currentPath, allowExclude, excludeTitle, counts)
{ {
var json = []; var json = [];
...@@ -109,6 +109,20 @@ function initFacetTree(treeNode, inSidebar) ...@@ -109,6 +109,20 @@ function initFacetTree(treeNode, inSidebar)
); );
} }
function collapseTopFacets() {
$('.top-facets').each(function setupToCollapses() {
$(this).find('.collapse').removeClass('in');
$(this).on('show.bs.collapse', function toggleTopFacet() {
$(this).find('.top-title .fa').removeClass('fa-caret-right');
$(this).find('.top-title .fa').addClass('fa-caret-down');
});
$(this).on('hide.bs.collapse', function toggleTopFacet() {
$(this).find('.top-title .fa').removeClass('fa-caret-down');
$(this).find('.top-title .fa').addClass('fa-caret-right');
});
});
}
/* --- Lightbox Facets --- */ /* --- Lightbox Facets --- */
VuFind.register('lightbox_facets', function LightboxFacets() { VuFind.register('lightbox_facets', function LightboxFacets() {
function lightboxFacetSorting() { function lightboxFacetSorting() {
......
themes/bootstrap3/less/components/search.less
+ 12
− 0
View file @ 9b723038
...@@ -306,7 +306,19 @@ body.rtl { ...@@ -306,7 +306,19 @@ body.rtl {
} }
/* ------ TOP FACETS ------ */ /* ------ TOP FACETS ------ */
.top-title {
display: inline-block;
padding-top: .5rem;
padding-left: .5rem;
font-weight: bold;
color: #000;
}
.top-title .fa {
width: 1rem;
text-align: center;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.top-title { padding-top: 0; }
.top-title .fa { display: none; } .top-title .fa { display: none; }
.top-facets .collapse { .top-facets .collapse {
display: block; display: block;
......
themes/bootstrap3/templates/Recommend/TopFacets.phtml
+ 43
− 35
View file @ 9b723038
...@@ -9,44 +9,52 @@ ...@@ -9,44 +9,52 @@
<? $moreClass = ' NarrowGroupHidden_'.$this->escapeHtml($title).' hidden'; ?> <? $moreClass = ' NarrowGroupHidden_'.$this->escapeHtml($title).' hidden'; ?>
<? $allowExclude = $this->recommend->excludeAllowed($title); ?> <? $allowExclude = $this->recommend->excludeAllowed($title); ?>
<div class="top-facets"> <div class="top-facets">
<strong><?=$this->transEsc('top_facet_label', ['%%label%%' => $this->translate($cluster['label'])]) ?></strong><br /> <!--Toggle for mobile collapse -->
<? $limit = $topFacetSettings['rows'] * $topFacetSettings['cols']; ?> <? $topLabel = $this->transEsc('top_facet_label', ['%%label%%' => $this->translate($cluster['label'])]); ?>
<? foreach($cluster['list'] as $index => $thisFacet): ?> <a class="top-title js-toggle visible-xs" data-toggle="collapse" data-target="#top_<?=$this->escapeHtml($title) ?>"><i class="fa fa-caret-right"></i> <?=$topLabel ?></a>
<span class="facet <?=$index > $limit ? $moreClass : '' ?>"> <!--Regular title for non-mobile -->
<? if ($thisFacet['isApplied']): <strong class="top-title hidden-xs"><?=$topLabel ?></strong>
if (isset($thisFacet['specialType']) && $thisFacet['specialType'] == 'keyword') { <div class="collapse in" id="top_<?=$this->escapeHtml($title) ?>">
$removeLink = $this->currentPath().$results->getUrlQuery()->replaceTerm($thisFacet['value'], ''); <? $limit = $topFacetSettings['rows'] * $topFacetSettings['cols']; ?>
} else { <? foreach($cluster['list'] as $index => $thisFacet): ?>
$removeLink = $this->currentPath().$results->getUrlQuery()->removeFacet($title, $thisFacet['value'], $thisFacet['operator']); <span class="facet <?=$index > $limit ? $moreClass : '' ?>">
} ?> <? if ($thisFacet['isApplied']):
<a href="<?=$removeLink ?>" class="applied"> if (isset($thisFacet['specialType']) && $thisFacet['specialType'] == 'keyword') {
<?=$this->escapeHtml($thisFacet['displayText'])?> <i class="fa fa-check" aria-hidden="true"></i><!-- $removeLink = $this->currentPath().$results->getUrlQuery()->replaceTerm($thisFacet['value'], '');
--></a> } else {
<? else: ?> $removeLink = $this->currentPath().$results->getUrlQuery()->removeFacet($title, $thisFacet['value'], $thisFacet['operator']);
<a href="<?=$this->currentPath().$results->getUrlQuery()->addFacet($title, $thisFacet['value'], $thisFacet['operator'])?>"> } ?>
<?=$this->escapeHtml($thisFacet['displayText'])?><!-- <a href="<?=$removeLink ?>" class="applied">
--></a> <?=$this->escapeHtml($thisFacet['displayText'])?> <i class="fa fa-check" aria-hidden="true"></i><!--
<span class="badge"><?=$this->localizedNumber($thisFacet['count']) ?> --></a>
<? if ($allowExclude): ?> <? else: ?>
<a href="<?=$this->currentPath().$results->getUrlQuery()->addFacet($title, $thisFacet['value'], 'NOT')?>" title="<?=$this->transEsc('exclude_facet')?>"><i class="fa fa-times" aria-hidden="true"></i></a> <a href="<?=$this->currentPath().$results->getUrlQuery()->addFacet($title, $thisFacet['value'], $thisFacet['operator'])?>">
<? endif; ?> <?=$this->escapeHtml($thisFacet['displayText'])?><!--
--></a>
<span class="badge"><?=$this->localizedNumber($thisFacet['count']) ?>
<? if ($allowExclude): ?>
<a href="<?=$this->currentPath().$results->getUrlQuery()->addFacet($title, $thisFacet['value'], 'NOT')?>" title="<?=$this->transEsc('exclude_facet')?>"><i class="fa fa-times" aria-hidden="true"></i></a>
<? endif; ?>
</span>
<? endif; ?>
</span>
<? /* More link */ ?>
<? if ($index == $limit): ?>
<span id="more-NarrowGroupHidden_<?=$this->escapeHtml($title)?>" class="narrow-toggle">
<a href="#" onclick="moreFacets('NarrowGroupHidden_<?=$this->escapeHtml($title)?>'); return false;">
<?=$this->transEsc('more') ?> ...
</a>
</span> </span>
<? endif; ?> <? endif; ?>
</span> <? endforeach; ?>
<? /* More link */ ?> <? if (count($cluster['list']) > $limit): ?>
<? if ($index == $limit): ?> <a class="narrow-toggle <?=$moreClass ?>" href="#" onclick="lessFacets('NarrowGroupHidden_<?=$title ?>'); return false;">
<span id="more-NarrowGroupHidden_<?=$this->escapeHtml($title)?>" class="narrow-toggle"> <?=$this->transEsc('less') ?> ...
<a href="#" onclick="moreFacets('NarrowGroupHidden_<?=$this->escapeHtml($title)?>'); return false;"> </a>
<?=$this->transEsc('more') ?> ...
</a>
</span>
<? endif; ?> <? endif; ?>
<? endforeach; ?> </div>
<? if (count($cluster['list']) > $limit): ?>
<a class="narrow-toggle <?=$moreClass ?>" href="#" onclick="lessFacets('NarrowGroupHidden_<?=$title ?>'); return false;">
<?=$this->transEsc('less') ?> ...
</a>
<? endif; ?>
</div> </div>
<? endforeach; ?> <? endforeach; ?>
<? endif; ?> <? endif; ?>
<?=$this->inlineScript(\Zend\View\Helper\HeadScript::SCRIPT, 'collapseTopFacets()', 'SET')?>
themes/local_theme_example/css/compiled.css
+ 1
− 1
View file @ 9b723038
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/sandal/css/compiled.css
+ 1
− 1
View file @ 9b723038
This source diff could not be displayed because it is too large. You can view the blob instead.
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