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

[FINNA-2373] Fix search filters on smaller screens for sr #3110

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
Open

[FINNA-2373] Fix search filters on smaller screens for sr #3110

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
544f55d
Initial commit to make search filters accessible on smaller screens f…
siiriylonen Dec 17, 2024
c8b766e
Fixed the 0 line warning.
siiriylonen Dec 17, 2024
9d8fe14
Add skip link to filter button on mobile.
siiriylonen Dec 19, 2024
f563216
Spacebar keycode NOT escape.
siiriylonen Dec 19, 2024
bc92c6e
Focus added to click event as well and changed id name.
siiriylonen Dec 19, 2024
36330ef
Define variable before using it.
siiriylonen Dec 19, 2024
0bfbcc0
Separate mobile sidebar close button from title.
siiriylonen Dec 30, 2024
dcfb196
More descriptive function name.
siiriylonen Jan 15, 2025
25007eb
Change class name.
siiriylonen Jan 24, 2025
111bd71
Merge branch 'dev' into FINNA-2373-fix-search-filters-for-small-screens
siiriylonen Feb 10, 2025
e085708
Fix tooltip for sr.
siiriylonen Feb 10, 2025
ac518d7
Change icon by switching, changed colour variables and fixed header n…
siiriylonen Feb 11, 2025
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
55 changes: 51 additions & 4 deletions themes/finna2/js/finna-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,14 +165,61 @@ finna.layout = (function finnaLayout() {
}
}

/**
* Sidebar click on mobile
*/
function onSidebarBtnClick() {
$('.sidebar').toggleClass('open');
$('.mobile-navigation .sidebar-navigation i').toggleClass('fa-arrow-down');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ei ikonin luokkaa kovakoodattuna. Jos pitää JS:ssä vaihtaa ikonia, niin pitää laittaa templaatissa kaksi ikonia, joita vaihdellaan.

$('body').toggleClass('prevent-scroll');
}

/**
* Check and keep focus within the search facet list
* @param {object} e Event object
*/
function onFocusOut(e) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nimeäisin funktion kuvaavammin.

const container = document.querySelector('.side-facets-container-ajax');
if (!container.contains(e.relatedTarget)) {
container.focus();
}
}

/**
* Initialize mobile narrow search
*/
function initMobileNarrowSearch() {
$('.mobile-navigation .sidebar-navigation, .finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn, .sidebar .mylist-bar h1').off('click').on('click', function onClickMobileNav() {
$('.sidebar').toggleClass('open');
$('.mobile-navigation .sidebar-navigation i').toggleClass('fa-arrow-down');
$('body').toggleClass('prevent-scroll');
$('.mobile-navigation .sidebar-navigation, .sidebar .mylist-bar h1').off('click').on('click', function onClickMobileNav() {
onSidebarBtnClick();
});
const container = document.querySelector(".side-facets-container-ajax");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pitää tarkistaa, löytyikö container (tyyliin if (!container) { return; }).

$('.finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn').off('click').on('click', function onClickMobileNav() {
onSidebarBtnClick();
if (document.querySelector('.sidebar').classList.contains('open')) {
document.activeElement.blur();
container.querySelector('h1').focus();
} else {
document.activeElement.blur();
document.querySelector('.finna-search-filter-toggle .btn-search-filter').focus();
}
});
container.tabIndex = '0';
container.ariaModal = true;
container.querySelector('h1').tabIndex = '0';
$('.finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn').off('keydown').on('keydown', function onClickMobileNav(e) {
if (e.which === 32 || e.which === 13) {
e.preventDefault();
onSidebarBtnClick();
if (document.querySelector('.sidebar').classList.contains('open')) {
container.addEventListener('focusout', onFocusOut);
document.activeElement.blur();
container.querySelector('h1').focus();
} else {
document.activeElement.blur();
document.querySelector('.finna-search-filter-toggle .btn-search-filter').focus();
container.removeEventListener('focusout', onFocusOut);
}
}
});
$('.mobile-navigation .sidebar-navigation .active-filters').off('click').on('click', function onClickMobileActiveFilters() {
$('.sidebar').scrollTop(0);
Expand Down
18 changes: 17 additions & 1 deletion themes/finna2/scss/finna/result-sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
}
}

.sidebar :not(.recordProvidedBy) h1,
.sidebar :not(.recordProvidedBy) .header-container,
.sidebar > h1,
.sidebar > h2 {
margin-bottom: 5px;
Expand All @@ -77,6 +77,22 @@
}
}
}
@media (max-width: $screen-xs-max) {
.sidebar .header-container {
button.sidebar-close-btn {
color: $sidebar-header-text-color;
background-color: $brand-primary;
border: none;
padding: 10px 15px;
font-size: 1.2rem;
}
h1 {
width: 100%;
display: flex;
justify-content: space-between;
}
}
}

.list-group {
margin-bottom: 5px;
Expand Down
5 changes: 4 additions & 1 deletion themes/finna2/templates/Recommend/SideFacetsDeferred.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@
$extraUrlFields = $results->getUrlQuery()->getParamsWithConfiguredDefaults();
?>
<div class="side-facets-container-ajax" data-search-class-id="<?=$this->escapeHtmlAttr($this->searchClassId) ?>" data-location="<?=$this->escapeHtmlAttr($this->location) ?>" data-config-index="<?=$this->escapeHtmlAttr($this->configIndex)?>" data-query="<?=$this->escapeHtmlAttr($urlQuery)?>" data-query-suppressed="<?=$querySuppressed ? '1' : '0' ?>" data-extra-fields="<?=$this->escapeHtml(implode(',', $extraUrlFields))?>">
<h1><?=$this->transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?><?php if (null === $this->slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?><span class="tooltip-facet pull-right" data-toggle="tooltip" data-placement="auto" data-html="true" data-original-title="<?=$this->transEsc('tooltip_facet_html')?>"><?=$this->icon('help') ?></span><?php endif; ?><span role="button" class="visible-xs sidebar-close-btn" aria-label="<?=$this->transEsc('close')?>"><?=$this->icon('sidefacets-close', 'sidefacets-close-icon') ?></span></h1><?php endif; ?>
<div class="header-container">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pitäsikö luokan nimi olla side-facets-header-container tms.? Nyt ehkä vähän liian geneerinen.

<h1><?=$this->transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?><?php if (null === $this->slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?><span class="tooltip-facet pull-right" data-toggle="tooltip" data-placement="auto" data-html="true" data-original-title="<?=$this->transEsc('tooltip_facet_html')?>"><?=$this->icon('help') ?></span><?php endif; ?></h1>
<button role="button" class="visible-xs sidebar-close-btn" tabindex="0" aria-label="<?=$this->transEsc('close')?>"><?=$this->icon('sidefacets-close', 'sidefacets-close-icon') ?></button><?php endif; ?>
</div>
<?php $checkboxFilters = $params->getCheckboxFacets(); ?>
<?php $checkboxesShown = false; ?>
<?php if (count($checkboxFilters) > 0):
Expand Down
5 changes: 3 additions & 2 deletions themes/finna2/templates/search/results.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
<?php if ($recordTotal > 0): ?>
<div class="finna-search-filter-toggle-trigger visible-xs hidden-print"></div>
<div class="finna-search-filter-toggle visible-xs hidden-print">
<div class="btn btn-primary btn-search-filter">
<div role="button" id="narrow-search-filter-toggle" class="btn btn-primary btn-search-filter" tabindex="0">
<?=$this->transEsc('Narrow Search')?>
<?php if ($filterCount > 0): ?>
<span class="active-filter-count">(<?=$filterCount?>)</span>
Expand Down Expand Up @@ -274,7 +274,8 @@
if (!isset($this->layout()->skiplink)) {
$this->layout()->skiplink = '';
}
$this->layout()->skiplink .= ' <a class="skip-link" href="#sidebar">' . $this->transEsc('Skip to narrowing options') . '</a>';
$this->layout()->skiplink .= ' <a class="skip-link hidden-xs" href="#sidebar">' . $this->transEsc('Skip to narrowing options') . '</a>';
$this->layout()->skiplink .= ' <a class="skip-link visible-xs" href="#narrow-search-filter-toggle">' . $this->transEsc('Skip to narrowing options') . '</a>';
$messageAdded = true;
}?>
<?php endforeach; ?>
Expand Down
Loading