From b46a19de01736444b3aaa406f67d95907a08fba6 Mon Sep 17 00:00:00 2001 From: Dinne Kopelevich Date: Thu, 5 Dec 2024 15:02:26 -0700 Subject: [PATCH 1/9] Style Pagination Signed-off-by: Dinne Kopelevich --- app/site/projects.liquid | 80 +++++++++++++-------------- app/src/js/nav.js | 4 +- app/src/js/projects.js | 113 +++++++++++++++++++++++++++++---------- app/src/js/templates.js | 4 +- 4 files changed, 129 insertions(+), 72 deletions(-) diff --git a/app/site/projects.liquid b/app/site/projects.liquid index 55c788ca49..1434dade3a 100644 --- a/app/site/projects.liquid +++ b/app/site/projects.liquid @@ -186,54 +186,56 @@ layout: base
-
    - {% assign itemsPerPage = 10 %} + + {% assign itemsPerPage = 10 %} {% assign totalProjects = projects | size %} {% assign totalPages = totalPages | divided_by: itemsPerPage | ceil %} {% assign currentPage = pagination.pageNumber | default: 1 | minus: 1 %} {% assign startIndex = currentPage | times: itemsPerPage %} {% assign paginatedProjects = projects | slice: startIndex, itemsPerPage %} - {% for project in paginatedProjects %} - {% include "project-card.liquid" %} - {% endfor %} -
-
+
    + {% for project in paginatedProjects %} + {% include "project-card.liquid" %} + {% endfor %} +
- + {% if currentPage < totalPages | minus: 1 %} +
  • + + Next + + +
    • + {% endif %} + + +
    + diff --git a/app/src/js/nav.js b/app/src/js/nav.js index 1a82c06e6e..ecd8ab1ea8 100644 --- a/app/src/js/nav.js +++ b/app/src/js/nav.js @@ -10,7 +10,7 @@ export function createNavigation() { const isOpen = menu.classList.toggle("is-hidden"); menuIcon.setAttribute( - "xlink:href", + "href", isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu" ); }); @@ -18,7 +18,7 @@ export function createNavigation() { closeButton.addEventListener("click", () => { menu.classList.remove("is-hidden"); - menuIcon.setAttribute("xlink:href", "/assets/img/sprite.svg#menu"); + menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu"); }); } else { console.error("One or more elements is not found") diff --git a/app/src/js/projects.js b/app/src/js/projects.js index 936b6cbda2..f2819fd9ec 100644 --- a/app/src/js/projects.js +++ b/app/src/js/projects.js @@ -138,7 +138,6 @@ function createProjectCards() { projectSectionsTemplate.className = 'project_section'; templateDiv.append(projectSectionsTemplate); - // Add report heading for each org const reportHeading = document.createElement('div'); reportHeading.className = "report_heading"; reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); @@ -167,54 +166,110 @@ function createProjectCards() { function renderPaginationControls(totalProjectsCount) { const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div'); paginationDiv.id = 'pagination-controls'; - paginationDiv.innerHTML = ''; + paginationDiv.className = 'usa-pagination'; + paginationDiv.innerHTML = ''; - // Determine the total number of pages - // const totalProjects = Object.values(projects).flat().length; const totalPages = Math.ceil(totalProjectsCount / itemsPerPage); - // Create Previous Button - const prevButton = document.createElement('button'); - prevButton.textContent = 'Previous'; - prevButton.disabled = currentPage === 1; + const paginationList = document.createElement('ul'); + paginationList.className = 'usa-pagination__list'; + + const prevItem = document.createElement('li'); + prevItem.className = 'usa-pagination__item usa-pagination__arrow'; + const prevButton = document.createElement('a'); + prevButton.href = 'javascript:void(0);'; + prevButton.className = 'usa-pagination__link usa-pagination__previous-page'; + prevButton.setAttribute('aria-label', 'Previous page'); + if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled'); + prevButton.innerHTML = ` + + Previous + `; prevButton.addEventListener('click', () => { if (currentPage > 1) { currentPage--; - createProjectCards(); + createProjectCards(); } }); - paginationDiv.appendChild(prevButton); - - // Create Page Number Indicators - for (let i = 1; i <= totalPages; i++) { - const pageButton = document.createElement('button'); - pageButton.textContent = i; - pageButton.disabled = i === currentPage; - pageButton.addEventListener('click', () => { - currentPage = i; - createProjectCards(); - }); - paginationDiv.appendChild(pageButton); - } + prevItem.appendChild(prevButton); + paginationList.appendChild(prevItem); + + const pageRange = getPageRange(currentPage, totalPages, 3); + pageRange.forEach((page, index) => { + const pageItem = document.createElement('li'); + pageItem.className = 'usa-pagination__item'; + + if (page === '...') { + pageItem.className += ' usa-pagination__overflow'; + pageItem.innerHTML = `…`; + } else { + pageItem.className += ' usa-pagination__page-no'; + const pageButton = document.createElement('a'); + pageButton.href = 'javascript:void(0);'; + pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`; + pageButton.textContent = page; + pageButton.setAttribute('aria-label', `Page ${page}`); + if (page === currentPage) pageButton.setAttribute('aria-current', 'page'); + pageButton.addEventListener('click', () => { + currentPage = page; + createProjectCards(); + }); + pageItem.appendChild(pageButton); + } + paginationList.appendChild(pageItem); + }); - // Create Next Button - const nextButton = document.createElement('button'); - nextButton.textContent = 'Next'; - nextButton.disabled = currentPage === totalPages; + const nextItem = document.createElement('li'); + nextItem.className = 'usa-pagination__item usa-pagination__arrow'; + const nextButton = document.createElement('a'); + nextButton.href = 'javascript:void(0);'; + nextButton.className = 'usa-pagination__link usa-pagination__next-page'; + nextButton.setAttribute('aria-label', 'Next page'); + if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled'); + nextButton.innerHTML = ` + Next + + `; nextButton.addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; - createProjectCards(); // Re-render cards + createProjectCards(); } }); - paginationDiv.appendChild(nextButton); + nextItem.appendChild(nextButton); + paginationList.appendChild(nextItem); + + paginationDiv.appendChild(paginationList); - // Append pagination controls to the DOM if (!document.body.contains(paginationDiv)) { templateDiv.parentElement.appendChild(paginationDiv); } } +function getPageRange(currentPage, totalPages, visibleRange) { + const range = []; + const start = Math.max(2, currentPage - visibleRange); + const end = Math.min(totalPages - 1, currentPage + visibleRange); + + range.push(1); + + if (start > 2) range.push('...'); + + for (let i = start; i <= end; i++) { + range.push(i); + } + + if (end < totalPages - 1) range.push('...'); + + if (totalPages > 1) range.push(totalPages); + + return range; +} + // Checks for Checkbox event and updates filters addGlobalEventListener('change', '.usa-checkbox__input', e => { // Can use this e.target.name to update selected filters object diff --git a/app/src/js/templates.js b/app/src/js/templates.js index 64c9134600..259594fb6d 100644 --- a/app/src/js/templates.js +++ b/app/src/js/templates.js @@ -11,12 +11,12 @@ export const reportHeadingTemplate = function(data) { ` } -export function projectCardTemplate(data) { +export function projectCardTemplate(data) { const description = data.description !== null ? data.description : "" return `
    - +
    From a397f63cb9c8746af4e77b095cf2b9e500b52dc9 Mon Sep 17 00:00:00 2001 From: Dinne Kopelevich Date: Thu, 5 Dec 2024 18:42:03 -0700 Subject: [PATCH 2/9] Style filters Signed-off-by: Dinne Kopelevich --- app/site/projects.liquid | 112 +++++++++++++++++++-------------------- app/src/css/style.css | 47 ++++++++++++++++ 2 files changed, 102 insertions(+), 57 deletions(-) diff --git a/app/site/projects.liquid b/app/site/projects.liquid index 1434dade3a..df164f79c3 100644 --- a/app/site/projects.liquid +++ b/app/site/projects.liquid @@ -25,11 +25,11 @@ layout: base
    {% comment %} filter by organization {% endcomment %} -
    -
    - +
    +
    +
    - {% comment %} filter by maturity model tier {% endcomment %} -
    -
    - +
    +
    +
    - {% comment %} filter by fisma compliance level {% endcomment %} -
    -
    - +
    +
    +
    - {% comment %} filter by project type {% endcomment %} -
    -
    - +
    +
    +
    -