Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Scrolling with errors #211

Merged
merged 4 commits into from
Nov 30, 2022
Merged

fix: Scrolling with errors #211

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d4002af
rendering line before grid
whizzzkid Nov 30, 2022
169440a
making entire container scroll
whizzzkid Nov 30, 2022
2dbeafb
Fixing CSS
whizzzkid Nov 30, 2022
045fdda
Adding error count
whizzzkid Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/errors/ErrorNotificationDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export function ErrorNotificationDisplay ({ errors, issueDataState }: ErrorNotif
pt="4rem"
pb="1rem"
>
<ErrorNotificationHeader isExpanded={isExpanded} toggle={handleToggle} />
<ErrorNotificationHeader isExpanded={isExpanded} toggle={handleToggle} errorCount={filteredErrors.length} />
<ErrorNotificationBody isExpanded={isExpanded} errors={filteredErrors} />
</Box>
</Center>
5 changes: 3 additions & 2 deletions components/errors/ErrorNotificationHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -5,8 +5,9 @@ import React from 'react';
interface ErrorNotificationHeaderProps {
isExpanded: boolean;
toggle: () => void;
errorCount: number;
}
export function ErrorNotificationHeader({ isExpanded, toggle }: ErrorNotificationHeaderProps) {
export function ErrorNotificationHeader({ isExpanded, toggle, errorCount }: ErrorNotificationHeaderProps) {

const iconWandH = 8;
const icon = isExpanded
@@ -26,7 +27,7 @@ export function ErrorNotificationHeader({ isExpanded, toggle }: ErrorNotificatio
<Flex>
<Center>
<WarningTwoIcon color="#F39106" ml="1rem" mr="1rem" width={iconWandH} height={iconWandH} />
<Text fontSize="20">Issues with roadmap</Text>
<Text fontSize="20">{errorCount} issue{errorCount > 1 && 's'} with roadmap</Text>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1. I had this in a branch somewhere and it got lost =)

</Center>
<Spacer />
{icon}
8 changes: 5 additions & 3 deletions components/roadmap-grid/grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -4,9 +4,11 @@ import { TodayMarker } from './today-marker';
export function Grid({ children, ticksLength, scroll = false, renderTodayLine = false }) {
const styleClass = scroll ? styles.scrollable : styles.grid;
return (
<div className={styleClass} style={{ gridTemplateColumns: `repeat(${ticksLength}, minmax(10px, 1fr))` }}>
<>
{renderTodayLine ? <TodayMarker /> : null}
{children}
</div>
<div className={styleClass} style={{ gridTemplateColumns: `repeat(${ticksLength}, minmax(10px, 1fr))` }}>
{children}
</div>
</>
);
}
8 changes: 5 additions & 3 deletions components/roadmap-grid/today-marker.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@

.todayMarkerWrapper {
position: absolute;
height: 50em;
position: relative;
float: left;
margin-top: -20px;
height: calc(100vh - 320px);
}

.todayMarker {
position: relative;
height: 60em;
height: 100%;
/* TODO: Waiting to match the rest of the figma styles */
/* border: 2px solid #1FA5FF; */
border: 1px dashed #F39106;
20 changes: 11 additions & 9 deletions pages/roadmap/[...slug].tsx
View file
Original file line number Diff line number Diff line change
@@ -193,15 +193,17 @@ export default function RoadmapPage(props: InferGetServerSidePropsType<typeof ge
return (
<>
<PageHeader />
<ErrorNotificationDisplay errors={errors ?? []} issueDataState={issueDataState}/>
<Box pt={5} pr="120px" pl="120px">
{!!serverError && <Box color='red.500'>{serverError.message}</Box>}
{!!roadmapLoadError && <Box color='red.500'>{roadmapLoadError.message}</Box>}
{!!issueDataState.ornull && mode === 'd3' && <NewRoadmap issueData={issueDataState.get({ noproxy: true }) as IssueData} isLocal={isLocal} />}
{!!issueDataState.ornull && mode === 'grid' && (
<RoadmapTabbedView issueDataState={issueDataState as State<IssueData>} />
)}
</Box>
<div style={{ overflowY: 'auto', height: 'calc(100vh - 100px)' }}>
<ErrorNotificationDisplay errors={errors ?? []} issueDataState={issueDataState}/>
<Box pt={5} pr="120px" pl="120px">
{!!serverError && <Box color='red.500'>{serverError.message}</Box>}
{!!roadmapLoadError && <Box color='red.500'>{roadmapLoadError.message}</Box>}
{!!issueDataState.ornull && mode === 'd3' && <NewRoadmap issueData={issueDataState.get({ noproxy: true }) as IssueData} isLocal={isLocal} />}
{!!issueDataState.ornull && mode === 'grid' && (
<RoadmapTabbedView issueDataState={issueDataState as State<IssueData>} />
)}
</Box>
</div>
</>
);
}