From 7497a0fdcaccc3cdd9ab42cf4cb055f6516b706e Mon Sep 17 00:00:00 2001 From: shmck <shawn.j.mckay@gmail.com> Date: Sat, 8 Aug 2020 15:13:54 -0700 Subject: [PATCH 1/2] hide run when no steps Signed-off-by: shmck <shawn.j.mckay@gmail.com> --- web-app/src/containers/Tutorial/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 5cb12c26..c6f4b0d4 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -181,7 +181,7 @@ const TutorialPage = (props: PageProps) => { )} {/* Left */} <div css={{ flex: 1 }}> - {DISPLAY_RUN_TEST_BUTTON && level.status !== 'COMPLETE' ? ( + {DISPLAY_RUN_TEST_BUTTON && level.steps.length && level.status !== 'COMPLETE' ? ( <Button style={{ marginLeft: '1rem', width: '57px' }} type="primary" From 93b5e783cf73b9348876bfa8c0e7797f3c694041 Mon Sep 17 00:00:00 2001 From: shmck <shawn.j.mckay@gmail.com> Date: Sat, 8 Aug 2020 15:44:15 -0700 Subject: [PATCH 2/2] fix step progress bar Signed-off-by: shmck <shawn.j.mckay@gmail.com> --- .../containers/Tutorial/components/StepProgress.tsx | 13 +++++++++---- web-app/src/containers/Tutorial/formatLevels.ts | 6 +++++- web-app/src/containers/Tutorial/index.tsx | 2 +- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/web-app/src/containers/Tutorial/components/StepProgress.tsx b/web-app/src/containers/Tutorial/components/StepProgress.tsx index fdc7037d..796c8ed1 100644 --- a/web-app/src/containers/Tutorial/components/StepProgress.tsx +++ b/web-app/src/containers/Tutorial/components/StepProgress.tsx @@ -9,13 +9,14 @@ const styles = { display: 'flex' as 'flex', justifyContent: 'flex-end' as 'flex-end', alignItems: 'center' as 'center', - width: '10rem', + width: '150px', color: theme['$color-white'], + marginRight: '-16px', }), text: (theme: Theme) => ({ color: theme['$color-white'], - marginRight: '0.5rem', - fontSize: '80%', + marginRight: '5px', + fontSize: '10px', }), } @@ -28,7 +29,11 @@ const StepProgress = (props: Props) => { const theme: Theme = useTheme() const isWide = useMedia({ minWidth: '340px' }) - const Text = `${props.current} of ${props.max}` + const Text = ( + <span style={styles.text(theme)}> + {props.current} of {props.max} + </span> + ) if (isWide) { return ( diff --git a/web-app/src/containers/Tutorial/formatLevels.ts b/web-app/src/containers/Tutorial/formatLevels.ts index 46d8aff1..724474b9 100644 --- a/web-app/src/containers/Tutorial/formatLevels.ts +++ b/web-app/src/containers/Tutorial/formatLevels.ts @@ -36,6 +36,10 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => { stepIndex = levels[levelIndex].steps.length } + if (position.complete) { + stepIndex += 1 + } + // current level const levelUI: T.LevelUI = { ...currentLevel, @@ -44,7 +48,7 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => { // label step status for step component let status: T.ProgressStatus = 'INCOMPLETE' let subtasks - if (index < stepIndex || (index === stepIndex && position.complete)) { + if (index < stepIndex) { status = 'COMPLETE' } else if (index === stepIndex) { status = 'ACTIVE' diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index c6f4b0d4..1ffa20d8 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -221,7 +221,7 @@ const TutorialPage = (props: PageProps) => { /> </div> ) : level.steps.length > 1 ? ( - <StepProgress current={stepIndex + 1} max={level.steps.length} /> + <StepProgress current={stepIndex} max={level.steps.length} /> ) : null} </div> </footer>