Skip to content

Commit

Permalink
Update publish review page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@nasaownsky
nasaownsky committed Feb 13, 2025
1 parent 586c655 commit ab85039
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 51 deletions.
44 changes: 25 additions & 19 deletions common/components/DataViz/DatapointsTableView.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ export const DatapointsTableNamesCell = styled.td<{
useDataPageStyles?: boolean;
}>`
padding-top: ${({ isTotalRow, useDataPageStyles }) =>
isTotalRow && useDataPageStyles ? "42px" : "4px"};
padding-bottom: ${({ isTotalRow }) => (isTotalRow ? "29px" : "4px")};
isTotalRow && useDataPageStyles ? "42px" : "12px"};
padding-bottom: ${({ isTotalRow }) => (isTotalRow ? "29px" : "12px")};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 18px;
font-weight: 500;
font-size: 14px;
font-weight: 400;
height: 32px;
&:hover {
Expand All @@ -90,18 +90,13 @@ export const DatapointsTableNamesCell = styled.td<{
export const DatapointsMetricNameCell = styled(DatapointsTableNamesCell)<{
useMultiAgencyStyles?: boolean;
}>`
${({ useMultiAgencyStyles }) =>
useMultiAgencyStyles
? typography.sizeCSS.medium
: typography.sizeCSS.title};
color: ${({ useMultiAgencyStyles }) =>
useMultiAgencyStyles ? palette.solid.blue : palette.solid.darkgrey};
${typography.sizeCSS.medium};
color: ${palette.solid.blue};
line-height: 38px;
padding: 0 0 31px 0;
&:hover {
color: ${({ useMultiAgencyStyles }) =>
useMultiAgencyStyles ? palette.solid.blue : palette.solid.darkgrey};
color: ${palette.solid.blue};
}
`;
export const DatapointsTableNamesDivider = styled.td`
Expand All @@ -111,6 +106,8 @@ export const DatapointsTableNamesDivider = styled.td`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1.5px;
color: ${palette.highlight.grey8};
`;
export const DatapointsTableDetailsContainer = styled.div<{
Expand All @@ -130,26 +127,34 @@ export const DatapointsTableDetailsContainerOverlay = styled.div`
height: 100%;
pointer-events: none;
`;
export const DatapointsTableDetailsContainerOverlayLeftGradient = styled.div`
export const DatapointsTableDetailsContainerOverlayLeftGradient = styled.div<{
isShowing: boolean;
}>`
background: linear-gradient(
0.25turn,
rgb(255, 255, 255, 1),
rgb(255, 255, 255, 0)
);
width: 15px;
width: 130px;
height: 100%;
opacity: ${({ isShowing }) => (isShowing ? 1 : 0)};
transition: opacity 300ms;
`;
export const DatapointsTableDetailsContainerOverlayRightGradient = styled.div`
export const DatapointsTableDetailsContainerOverlayRightGradient = styled.div<{
isShowing: boolean;
}>`
background: linear-gradient(
0.25turn,
rgb(255, 255, 255, 0),
rgb(255, 255, 255, 1)
);
width: 32px;
width: 130px;
height: 100%;
position: absolute;
top: 0;
right: 0;
opacity: ${({ isShowing }) => (isShowing ? 1 : 0)};
transition: opacity 300ms;
`;
export const DatapointsTableDetailsTable = styled.table`
border-collapse: collapse;
Expand Down Expand Up @@ -180,7 +185,7 @@ export const DatapointsTableDetailsRowHeader = styled.th<{
return isColHovered ? palette.solid.blue : palette.solid.offwhite;
}};
padding: 5px 8px;
font-weight: 700;
font-weight: 500;
}
`;
export const DatapointsTableDetailsCell = styled.td<{
Expand All @@ -189,11 +194,12 @@ export const DatapointsTableDetailsCell = styled.td<{
isTotalRow?: boolean;
}>`
padding: ${({ isTotalRow }) =>
isTotalRow ? "4px 32px 29px 15px" : "4px 32px 4px 15px"};
font-size: 18px;
isTotalRow ? "12px 32px 29px 15px" : "12px 32px 12px 15px"};
font-size: 14px;
height: 32px;
text-align: end;
white-space: nowrap;
font-weight: 400;
color: ${({ isColumnHovered }) => isColumnHovered && palette.solid.darkgrey};
color: ${({ isRowHovered }) => isRowHovered && palette.solid.darkgrey};
Expand Down
16 changes: 15 additions & 1 deletion common/components/DataViz/DatapointsTableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
// =============================================================================

import React, { useCallback, useState } from "react";
import { useInView } from "react-intersection-observer";

Check failure on line 19 in common/components/DataViz/DatapointsTableView.tsx

View workflow job for this annotation

GitHub Actions / Frontend tests 

'react-intersection-observer' should be listed in the project's dependencies. Run 'npm i -S react-intersection-observer' to add it

import {
DataVizAggregateName,
Expand All @@ -30,6 +31,7 @@ import {
DatapointsTableDetailsCell,
DatapointsTableDetailsContainer,
DatapointsTableDetailsContainerOverlay,
DatapointsTableDetailsContainerOverlayLeftGradient,
DatapointsTableDetailsContainerOverlayRightGradient,
DatapointsTableDetailScrollContainer,
DatapointsTableDetailsDivider,
Expand Down Expand Up @@ -83,6 +85,8 @@ export const DatapointsTableView: React.FC<{
metricFrequency,
useMultiAgencyStyles,
}) => {
const leftShadow = useInView();
const rightShadow = useInView();
const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);
const [hoveredColKey, setHoveredColKey] = useState<number | null>(null);

Expand Down Expand Up @@ -219,6 +223,11 @@ export const DatapointsTableView: React.FC<{
onMouseLeave={() => setHoveredColKey(null)}
isColHovered={index === hoveredColKey}
>
{/* Shadow's anchors */}
{index === 0 && <div ref={leftShadow.ref} />}
{index === startDates.length - 1 && (
<div ref={rightShadow.ref} />
)}
<span>{formatDateShortMonthYear(date)}</span>
</DatapointsTableDetailsRowHeader>
))}
Expand Down Expand Up @@ -298,7 +307,12 @@ export const DatapointsTableView: React.FC<{
</DatapointsTableDetailsTable>
</DatapointsTableDetailScrollContainer>
<DatapointsTableDetailsContainerOverlay>
<DatapointsTableDetailsContainerOverlayRightGradient />
<DatapointsTableDetailsContainerOverlayLeftGradient
isShowing={!leftShadow.inView}
/>
<DatapointsTableDetailsContainerOverlayRightGradient
isShowing={!rightShadow.inView}
/>
</DatapointsTableDetailsContainerOverlay>
</DatapointsTableDetailsContainer>
</DatapointsTableContainer>
Expand Down
4 changes: 2 additions & 2 deletions common/components/GlobalStyles/Typography.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ export const typography = {
medium: `
font-size: ${rem("18px")};
line-height: ${rem("24px")};
font-weight: 500;
font-weight: 400;
`,
normal: `
font-size: ${rem("14px")};
line-height: ${rem("22px")};
font-weight: 500;
font-weight: 400;
`,
small: `
font-size: ${rem("12px")};
Expand Down
54 changes: 30 additions & 24 deletions publisher/src/components/ReviewMetrics/ReviewMetrics.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ export const Container = styled(DataUploadContainer)`
export const ReviewMetricsWrapper = styled.div<{ hasNoDatapoints: boolean }>`
${({ hasNoDatapoints }) => hasNoDatapoints && `height: 100%;`}
max-width: 100%;
padding: 40px 0 128px 500px;
padding: 48px 0 128px 500px;
display: flex;
flex-direction: row;
gap: 88px;
overflow-x: hidden;
@media only screen and (max-width: ${MIN_TABLET_WIDTH}px) {
padding: 40px 24px 128px 24px;
padding: 48px 24px 128px 24px;
display: flex;
flex-direction: column;
gap: 80px;
Expand All @@ -69,8 +69,8 @@ export const Summary = styled.div<{ isFooterVisible?: boolean }>`
: `calc(100vh - ${REVIEW_SUMMARY_DESKTOP_TOP_PADDING + 8}px)`};
transition: max-height 0.5s ease-in-out;
padding-left: 24px;
width: 380px;
padding: 8px 24px;
width: 420px;
display: flex;
flex-direction: column;
background-color: ${palette.solid.white};
Expand All @@ -89,12 +89,14 @@ export const Heading = styled.div`
position: sticky;
top: 0;
flex-direction: column;
${typography.sizeCSS.headline};
background-color: ${palette.solid.white};
${typography.sizeCSS.title};
transition: 0.3s ease;
span {
margin-top: 20px;
${typography.sizeCSS.medium};
margin-top: 16px;
margin-bottom: 8px;
letter-spacing: 0;
${typography.sizeCSS.normal};
a {
color: ${palette.solid.blue};
Expand All @@ -116,19 +118,28 @@ export const HeadingGradient = styled.div`
position: sticky;
top: 0;
left: 0;
width: 484px;
width: 420px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0.4009978991596639) 100%
rgba(255, 255, 255, 1) 0%,
transparent 100%
);
min-height: 30px;
min-height: 32px;
@media only screen and (max-width: ${MIN_TABLET_WIDTH}px) {
min-height: 20px;
}
`;

export const BottomGradient = styled(HeadingGradient)`
bottom: 0;
background: linear-gradient(
360deg,
rgba(255, 255, 255, 1) 0%,
transparent 100%
);
`;

export const SummarySectionsContainer = styled.div`
display: flex;
flex-direction: column;
Expand All @@ -144,7 +155,7 @@ export const SummarySection = styled.div`
display: flex;
flex-direction: column;
&:not(:last-child) {
&:not(:nth-last-child(2)) {
border-bottom: 1px solid ${palette.highlight.grey3};
padding-bottom: 30px;
Expand All @@ -165,8 +176,8 @@ export const SummarySection = styled.div`
export const SummarySectionTitle = styled.div<{
color: "blue" | "orange" | "grey";
}>`
${typography.sizeCSS.title};
margin-bottom: 12px;
${typography.sizeCSS.medium};
margin-bottom: 16px;
display: flex;
flex-direction: row;
gap: 8px;
Expand Down Expand Up @@ -204,6 +215,7 @@ export const SummarySectionLine = styled.div`
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 8px;
`;

export const MetricStatusIcon = styled.img`
Expand Down Expand Up @@ -235,12 +247,6 @@ export const SectionContainer = styled.div<{ isMultiAgencyUpload?: boolean }>`
min-width: 700px;
overflow-x: auto;
&:not(:first-child) {
${({ isMultiAgencyUpload }) =>
!isMultiAgencyUpload &&
`border-top: 1px solid ${palette.highlight.grey3}`};
}
&:first-child {
margin-top: 0;
padding-top: 0;
Expand All @@ -252,14 +258,14 @@ export const NoDatapointsMessage = styled.div`
`;

export const AgencyName = styled.div`
${typography.sizeCSS.title}
${typography.sizeCSS.medium}
width: 100%;
margin-bottom: 13px;
margin-bottom: 16px;
color: ${palette.solid.darkgrey};
&:not(:first-child) {
margin-top: 40px;
padding-top: 8px;
padding-top: 40px;
border-top: 1px solid ${palette.highlight.grey3};
}
`;
Expand Down
13 changes: 8 additions & 5 deletions publisher/src/components/ReviewMetrics/ReviewMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

/* eslint-disable camelcase */

import successIcon from "@justice-counts/common/assets/status-check-icon.png";
import errorIcon from "@justice-counts/common/assets/status-error-icon.png";
import { Button } from "@justice-counts/common/components/Button";
import { DatapointsTableView } from "@justice-counts/common/components/DataViz/DatapointsTableView";
Expand All @@ -29,7 +30,6 @@ import React, { Fragment, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

import { printReportTitle } from "../../utils";
import checkIcon from "../assets/check-icon.svg";
import {
REPORT_CAPITALIZED,
REPORTS_CAPITALIZED,
Expand All @@ -39,6 +39,7 @@ import { useHeaderBadge } from "../Header/hooks";
import { ButtonWithMiniLoaderContainer, MiniLoaderWrapper } from "../Reports";
import {
AgencyName,
BottomGradient,
EmptyIcon,
Heading,
HeadingGradient,
Expand Down Expand Up @@ -82,8 +83,9 @@ export const ReviewMetrics: React.FC<ReviewMetricsProps> = ({
useState(true);
const [isOverwritesSectionExpanded, setIsOverwritesSectionExpanded] =
useState(true);
const [isRecordsSectionExpanded, setIsRecordsSectionExpanded] = useState(() =>
records ? records.length <= 10 : false
// eslint-disable-next-line prettier/prettier
const [isRecordsSectionExpanded, setIsRecordsSectionExpanded] = useState(
() => (records ? records.length <= 10 : false)
);
const hasNoDatapoints =
metrics.filter((metric) => metric.datapoints)?.length === 0;
Expand Down Expand Up @@ -190,7 +192,7 @@ export const ReviewMetrics: React.FC<ReviewMetricsProps> = ({
* make it to the review page are successfully saved metrics with inputs and
* without errors - thus, earning a check icon.
*/}
<MetricStatusIcon src={checkIcon} alt="" />
<MetricStatusIcon src={successIcon} alt="" />
{metric}
</SummarySectionLine>
))}
Expand Down Expand Up @@ -313,7 +315,7 @@ export const ReviewMetrics: React.FC<ReviewMetricsProps> = ({
}) => (
<SummarySectionLine key={key}>
{!metricHasError && metricHasValidInput && (
<MetricStatusIcon src={checkIcon} alt="" />
<MetricStatusIcon src={successIcon} alt="" />
)}
{metricHasError && (
<MetricStatusIcon src={errorIcon} alt="" />
Expand Down Expand Up @@ -392,6 +394,7 @@ export const ReviewMetrics: React.FC<ReviewMetricsProps> = ({
)}
</SummarySection>
)}
<BottomGradient />
</SummarySectionsContainer>
</Summary>

Expand Down

0 comments on commit ab85039

Please sign in to comment.