From 1fc29470faefc53f46919f4184c1d415af6eab4c Mon Sep 17 00:00:00 2001 From: zalabhavy Date: Tue, 13 May 2025 15:58:36 +0530 Subject: [PATCH 1/2] Filter by close icon added for mobile screen --- .../side-filters.liquid | 8 ++++ .../pages/_learning-resources-index.scss | 38 +++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/src/_includes/docs/learning-resources-index/side-filters.liquid b/src/_includes/docs/learning-resources-index/side-filters.liquid index 275a52f904..2bc732e897 100644 --- a/src/_includes/docs/learning-resources-index/side-filters.liquid +++ b/src/_includes/docs/learning-resources-index/side-filters.liquid @@ -1,4 +1,11 @@ + +
+
+ +
Filter by

Subject

@@ -37,3 +44,4 @@
+
diff --git a/src/_sass/pages/_learning-resources-index.scss b/src/_sass/pages/_learning-resources-index.scss index a9f6a303ea..f44e306124 100644 --- a/src/_sass/pages/_learning-resources-index.scss +++ b/src/_sass/pages/_learning-resources-index.scss @@ -1,3 +1,41 @@ +.close-icon { + font-size: 1rem; + cursor: pointer; +} +// smaller screen filter by +@media (max-width: 839px) { + #resource-filter-group-wrapper{ + position: fixed; + top: var(--site-header-height); + bottom: 0; + right: -220px; + width: 220px; + background-color: var(--site-inset-bgColor); + transition: right 0.3s ease-in-out; + z-index: 1000; + } + +#close-filter-toggle:not(:checked) + #resource-filter-group-wrapper { right: 0; } +#close-filter-toggle:checked + #resource-filter-group-wrapper { right: -220px; } + +// close icon in small screen + #resource-filter-group .filter-header { + display: flex; + justify-content: flex-end; + padding: 0.5rem 0.75rem; + } +} +// Large screens +@media (min-width: 840px) { + #resource-filter-group { + position: static !important; + right: auto !important; + } + #resource-filter-group .filter-header { + display: none !important; + } +} + #resource-index-content { display: flex; flex-direction: row; From c6803b355438ef7a1def23f294a986e4d60ff026 Mon Sep 17 00:00:00 2001 From: zalabhavy Date: Fri, 29 Aug 2025 22:16:06 +0530 Subject: [PATCH 2/2] Update filter by UI with close button and mobile fixes --- .../side-filters.liquid | 6 ++ .../pages/_learning-resources-index.scss | 96 +++++++++++++++++++ .../assets/js/learning-resources-index.js | 51 +++++++--- 3 files changed, 139 insertions(+), 14 deletions(-) diff --git a/src/_includes/docs/learning-resources-index/side-filters.liquid b/src/_includes/docs/learning-resources-index/side-filters.liquid index 2bc732e897..eb15064dbf 100644 --- a/src/_includes/docs/learning-resources-index/side-filters.liquid +++ b/src/_includes/docs/learning-resources-index/side-filters.liquid @@ -1,6 +1,11 @@
+
+ +
+ \ No newline at end of file diff --git a/src/_sass/pages/_learning-resources-index.scss b/src/_sass/pages/_learning-resources-index.scss index f44e306124..24b46604dc 100644 --- a/src/_sass/pages/_learning-resources-index.scss +++ b/src/_sass/pages/_learning-resources-index.scss @@ -36,6 +36,102 @@ } } +#resource-filter-group-wrapper { + border: 1px solid var(--site-inset-borderColor); + background-color: var(--site-inset-bgColor); + border-radius: var(--site-radius); + overflow: hidden; + position: sticky; + top: calc(var(--site-header-height) + 1rem); +} + +#resource-filter-group { + border: none; + background: none; + border-radius: 0; + overflow: visible; + position: static; +} + +.filter-header { + display: none; + position: absolute; + top: 0; + right: 0; + padding: 0.75rem 1rem; + z-index: 10; +} + +.table-title { + font-weight: 600; + font-size: 1rem; + color: var(--site-base-fgColor-alt); + margin: 0; + padding: 0.75rem 3rem 0.75rem 1rem; + background-color: var(--site-raised-bgColor-translucent); + border-bottom: 1px solid var(--site-inset-borderColor); + position: relative; + text-align: center; +} + +.close-icon { + cursor: pointer; + padding: 0.25rem; + border-radius: 4px; + background: none; + border: none; + color: var(--site-base-fgColor-alt); + transition: all 0.2s ease; + position: absolute; + right: 1rem; + top: 75%; + transform: translateY(-50%); +} + +.close-icon:hover { + background-color: rgba(0, 0, 0, 0.1); + color: var(--site-primary-color); +} + +.close-icon .material-symbols { + font-size: 20px; +} + +//Mobile screens +@media (max-width: 839px) { + .filter-header { + display: block; + } + + #resource-filter-group-wrapper { + position: fixed; + top: var(--site-header-height); + bottom: 0; + right: -220px; + width: 220px; + border-bottom: none; + height: 100%; + border-radius: 0; + transition: right 0.3s ease-in-out; + z-index: 1000; + } + + #close-filter-toggle:not(:checked) + #resource-filter-group-wrapper { right: 0; } + #close-filter-toggle:checked + #resource-filter-group-wrapper { right: -220px; } +} + +//Desktop screens +@media (min-width: 840px) { + #resource-filter-group { + position: static !important; + right: auto !important; + } + + .filter-header { + display: none !important; + } +} + #resource-index-content { display: flex; flex-direction: row; diff --git a/src/content/assets/js/learning-resources-index.js b/src/content/assets/js/learning-resources-index.js index 8f17c336b8..d28d9b0418 100644 --- a/src/content/assets/js/learning-resources-index.js +++ b/src/content/assets/js/learning-resources-index.js @@ -263,21 +263,43 @@ function _setupDropdownMenu() { if (!pageContent) return; const filtersButton = pageContent.querySelector('.show-filters-button'); - const filtersEl = pageContent.querySelector('.right-col'); + const filtersEl = document.getElementById('resource-filter-group-wrapper') || pageContent.querySelector('.right-col'); + const closeToggleCheckbox = document.getElementById('close-filter-toggle'); + if (!filtersButton || !filtersEl) return; function _closeMenu() { - filtersEl.classList.remove('show'); - filtersButton.ariaExpanded = 'false'; + if (closeToggleCheckbox) { + closeToggleCheckbox.checked = true; + } else { + filtersEl.classList.remove('show'); + } + filtersButton.ariaExpanded = 'false'; } + + function _openMenu() { + if (closeToggleCheckbox) { + closeToggleCheckbox.checked = false; + } else { + filtersEl.classList.add('show'); + } + filtersButton.ariaExpanded = 'true'; + } - filtersButton.addEventListener('click', (_) => { - if (filtersEl.classList.contains('show')) { - _closeMenu(); + function _isMenuOpen() { + if (closeToggleCheckbox) { + return !closeToggleCheckbox.checked; } else { - filtersEl.classList.add('show'); - filtersButton.ariaExpanded = 'true'; + return filtersEl.classList.contains('show'); } + } + + filtersButton.addEventListener('click', (_) => { + if (_isMenuOpen()) { + _closeMenu(); + } else { + _openMenu(); + } }); document.addEventListener('keydown', (event) => { @@ -288,12 +310,13 @@ function _setupDropdownMenu() { // Close the dropdown if anywhere not in the filters menu is. const content = document.getElementById('all-resources-grid'); - content.addEventListener('click', (_) => { - if (!filtersEl.classList.contains('show')) { - return; - } - _closeMenu(); - }); + if (content) { + content.addEventListener('click', () => { + if (_isMenuOpen()) { + _closeMenu(); + } + }); + } } function shuffleElements(container) {