This commit is contained in:
Rachid Mrad 2024-07-01 12:50:00 -04:00
parent f96d57bcf9
commit 280a15a1d7
No known key found for this signature in database
3 changed files with 18 additions and 4 deletions

View file

@ -1345,8 +1345,11 @@ document.addEventListener('DOMContentLoaded', function() {
function updateStatusIndicator() { function updateStatusIndicator() {
statusIndicator.innerHTML = ''; statusIndicator.innerHTML = '';
// Even if the element is empty, it'll mess up the flex layout unless we set display none
statusIndicator.hideElement();
if (currentStatus.length) if (currentStatus.length)
statusIndicator.innerHTML = '(' + currentStatus.length + ')'; statusIndicator.innerHTML = '(' + currentStatus.length + ')';
statusIndicator.showElement();
} }
function closeFilters() { function closeFilters() {
@ -1367,6 +1370,17 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
// Close when user clicks outside
// NOTE: We may need to evolve this as we add more filters.
document.addEventListener('click', function(event) {
const accordion = document.querySelector('.usa-accordion--select');
const accordionIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
if (accordionIsOpen && !accordion.contains(event.target)) {
closeFilters();
}
});
// Initial load // Initial load
loadDomains(1); loadDomains(1);
} }

View file

@ -212,6 +212,6 @@ abbr[title] {
color: #{$dhs-dark-gray-85}; color: #{$dhs-dark-gray-85};
} }
.padding--8-12-9-12 { .padding--8-8-9 {
padding: 8px 12px 9px 12px !important; padding: 8px 8px 9px !important;
} }

View file

@ -40,11 +40,11 @@
<div class="usa-accordion__heading"> <div class="usa-accordion__heading">
<button <button
type="button" type="button"
class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter usa-accordion__button" class="usa-button usa-button--small padding--8-8-9 usa-button--outline usa-button--filter usa-accordion__button"
aria-expanded="false" aria-expanded="false"
aria-controls="filter-status" aria-controls="filter-status"
> >
<span class="domain__filter-indicator text-bold"></span> Status <span class="domain__filter-indicator text-bold display-none"></span> Status
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use> <use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg> </svg>