Refactor project styling

[DinneK]

module-name: Add Styling to project page

Problem

The project page needs to match the wireframes created for 3.0

Solution

Project page general styling finished. Pagination refactored to match USWDS design system and Metrics specs.

Result

Search bars still need some tweaks.

Test Plan

tested locally and in prod.

Next steps:

• Fix nav menu
• Finish org charts
• Finish project charts
• Mobile view
• Bug fixes

[github-actions]

🚫 [eslint] <no-unused-vars> _{reported by reviewdog 🐶}
'index' is defined but never used.

[github-actions]

🚫 [eslint] <no-unused-vars> _{reported by reviewdog 🐶}
'projectCards' is assigned a value but never used.

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 249 in 5a013e2

list-style-type:none;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 369 in 5a013e2

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 372 in 5a013e2

font-weight: 600;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 383 in 5a013e2

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 385 in 5a013e2

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 402 in 5a013e2

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 612 in 5a013e2

} */

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 2 to 5 in 5a013e2

	const toggleButton = document.querySelector(".usa-accordion__button");
	const closeButton = document.querySelector(".usa-nav__close");
	const menu = document.querySelector(".usa-nav");
	const menuIcon = document.querySelector(".usa-accordion__button svg use");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 7 in 5a013e2

if (toggleButton && closeButton && menu) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 9 to 10 in 5a013e2

	toggleButton.addEventListener("click", () => {
	const isOpen = menu.classList.toggle("is-hidden");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 12 to 16 in 5a013e2

	menuIcon.setAttribute(
	"href",
	isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
	);
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 18 to 25 in 5a013e2

	closeButton.addEventListener("click", () => {
	menu.classList.remove("is-hidden");
	menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu");
	});
	} else {
	console.error("One or more elements is not found")
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 28 in 5a013e2

document.addEventListener("DOMContentLoaded", createNavigation)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 10 in 5a013e2

	import { reportHeadingTemplate, projectCardTemplate } from "./templates";
	import DOMPurify from 'dompurify';
	const projectsData = document.getElementById('metrics').textContent;
	const orgsData = document.getElementById('org-data').textContent;
	const parsedOrgsData = JSON.parse(orgsData);
	const siteData = JSON.parse(document.getElementById('site-data').textContent);
	const parsedProjectsData = JSON.parse(projectsData);
	const filtersContainer = document.querySelector('.filters-container');
	const templateDiv = document.getElementById('content-container');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 12 to 17 in 5a013e2

	const sortDirection = document.getElementById('sort-direction');
	const sortSelection = document.getElementById('sort-selection');
	let currentPage = 1;
	const itemsPerPage = 10;
	let filteredProjects = [...parsedProjectsData];

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 27 in 5a013e2

sortSelection.addEventListener('change', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 29 to 30 in 5a013e2

	document.getElementById("sort-direction-form").hidden = false;
	sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 34 to 36 in 5a013e2

	sortDirection.addEventListener('change', () => {
	const isDescending = sortDirection.value === 'descending' ? true : false;
	sortCards(isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 104 to 107 in 5a013e2

	if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
	sortByNumberAttribute(targetProjects, selection, isDescending);
	} else {
	sortByStringAttribute(targetProjects, selection, isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 117 to 124 in 5a013e2

	const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({
	...project,
	org: project.owner
	}));
	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = allProjects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 127 in 5a013e2

if(!acc[curr.org]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 130 in 5a013e2

acc[curr.org].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 132 in 5a013e2

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 167 to 183 in 5a013e2

	const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div');
	paginationDiv.id = 'pagination-controls';
	paginationDiv.className = 'usa-pagination';
	paginationDiv.innerHTML = '';
	const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);
	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');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 189 to 190 in 5a013e2

	`;
	prevButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 192 to 193 in 5a013e2

	currentPage--;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 195 to 197 in 5a013e2

	});
	prevItem.appendChild(prevButton);
	paginationList.appendChild(prevItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 199 in 5a013e2

const pageRange = getPageRange(currentPage, totalPages, 3);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 201 to 202 in 5a013e2

	const pageItem = document.createElement('li');
	pageItem.className = 'usa-pagination__item';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 204 to 206 in 5a013e2

	if (page === '...') {
	pageItem.className += ' usa-pagination__overflow';
	pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 208 to 219 in 5a013e2

	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);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 221 to 230 in 5a013e2

	paginationList.appendChild(pageItem);
	});
	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');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 236 to 237 in 5a013e2

	`;
	nextButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 239 to 240 in 5a013e2

	currentPage++;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 242 to 244 in 5a013e2

	});
	nextItem.appendChild(nextButton);
	paginationList.appendChild(nextItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 246 in 5a013e2

paginationDiv.appendChild(paginationList);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 249 in 5a013e2

templateDiv.parentElement.appendChild(paginationDiv);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 254 to 256 in 5a013e2

	const range = [];
	const start = Math.max(2, currentPage - visibleRange);
	const end = Math.min(totalPages - 1, currentPage + visibleRange);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 258 in 5a013e2

range.push(1);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 260 in 5a013e2

if (start > 2) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 263 in 5a013e2

range.push(i);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 266 in 5a013e2

if (end < totalPages - 1) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 268 in 5a013e2

if (totalPages > 1) range.push(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 270 in 5a013e2

return range;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 274 to 278 in 5a013e2

	addGlobalEventListener('change', '.usa-checkbox__input', e => {
	// Can use this e.target.name to update selected filters object
	updateFilters();
	updateFilteredProjects()
	}, filtersContainer)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 318 in 5a013e2

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 323 in 5a013e2

projectType: []

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 326 to 339 in 5a013e2

	document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.organization.push(checkbox.value);
	});
	document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.maturityModelTier.push(checkbox.value);
	});
	document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.fismaLevel.push(checkbox.value);
	});
	document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.projectType.push(checkbox.value);
	});
	const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 341 to 348 in 5a013e2

	const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org);
	const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
	const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
	const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType);
	return matchesOrg && matchesTier && matchesFisma && matchesType;
	});
	updatePagination(filteredProjects);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 350 in 5a013e2

sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 354 to 355 in 5a013e2

	const totalProjects = (filteredProjects || parsedProjectsData).length;
	const totalPages = Math.ceil(totalProjects / itemsPerPage);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 357 to 358 in 5a013e2

	currentPage = Math.min(currentPage, totalPages || 1);
	renderPaginationControls(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 362 to 364 in 5a013e2

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = projects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 366 in 5a013e2

templateDiv.innerHTML = '';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 369 in 5a013e2

if(!acc[curr.owner]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 372 in 5a013e2

acc[curr.owner].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 374 in 5a013e2

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 377 to 400 in 5a013e2

	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';
	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);
	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";
	groupedByOrg[org].forEach(repoData => {
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);
	});
	projectSectionsTemplate.appendChild(projectCards);
	templateDiv.append(projectSectionsTemplate);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 402 in 5a013e2

updateHeadingVisibility();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 490 to 491 in 5a013e2

	const searchForm = document.getElementById('search-form');
	const searchBox = document.getElementById("search-input");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 496 in 5a013e2

e.preventDefault();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 498 in 5a013e2

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 500 to 501 in 5a013e2

	const query = searchBox.value.toLowerCase();
	filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 5a013e2

	export const reportHeadingTemplate = function(data) {
	return `

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 19 in 5a013e2

<a href="/metrics/${ data.owner }/${ data.name }/" class="href-home">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 23 in 5a013e2

<h2 class="usa-card__heading">${ data.name }</h2>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 26 in 5a013e2

<div>${ description }</div>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 35 in 5a013e2

<span> ${ data.stargazers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 42 in 5a013e2

<span> ${ data.forks_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 45 in 5a013e2

<svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 49 in 5a013e2

<span> ${ data.issues_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 56 in 5a013e2

<span> ${ data.pull_requests_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 62 in 5a013e2

<span> ${ data.watchers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 72 in 5a013e2

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	"src/js" : "src/js",
	"src/js": "src/js",

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	const pathPrefix = process.env.NODE_ENV.includes("production") ? "/metrics" : ""
	const pathPrefix = process.env.NODE_ENV.includes("production")
	? "/metrics"
	: ""

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	</section>
	</section>

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	<!-- <a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a> -->
	<!--
	<a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a>
	-->

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	outline:none;
	outline: none;

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	background-color: #E0EAF8;
	background-color: #e0eaf8;

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	background-color: #E0EAF8;
	background-color: #e0eaf8;

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	.usa-identifier__required-link.usa-link{
	color:#000;
	display:inline-block;
	.usa-identifier__required-link.usa-link {
	color: #000;
	display: inline-block;

[github-actions]

[prettier] _{reported by reviewdog 🐶}

Suggested change

	.usa-identifier__required-link.usa-link:visited{
	color:#494949;
	.usa-identifier__required-link.usa-link:visited {
	color: #494949;

[github-actions]

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 135 to 158 in 5a013e2

	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';
	templateDiv.append(projectSectionsTemplate);
	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);
	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";
	projectSectionsTemplate.appendChild(projectCards);
	groupedByOrg[org].forEach(repoData => {
	repoData.url = siteData.baseurl;
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);

[github-actions]

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 476 to 485 in 5a013e2

	const cardName = card.querySelector(".usa-card__heading").innerText;
	const currentProject = parsedProjectsData.find((project) => project.name === cardName)
	const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner);
	const projectMaturityModelTier = "Tier " + currentProject.maturityModelTier;
	const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
	const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(currentProject.fismaLevel);
	const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(currentProject.projectType);
	// Hide card if project does not match all filter categories
	card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);