Commit93b5e78

committed

fix step progress bar

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

1 parent7497a0f commit93b5e78Copy full SHA for 93b5e78

File tree

+15

-6

lines changed

web-app/src/containers/Tutorial
- components
  - StepProgress.tsx
- formatLevels.ts
- index.tsx

+15

-6

lines changed

Lines changed: 9 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -9,13 +9,14 @@ const styles = {`
`9`	`9`	`display:'flex'as'flex',`
`10`	`10`	`justifyContent:'flex-end'as'flex-end',`
`11`	`11`	`alignItems:'center'as'center',`
`12`		`-width:'10rem',`
	`12`	`+width:'150px',`
`13`	`13`	`color:theme['$color-white'],`
	`14`	`+marginRight:'-16px',`
`14`	`15`	`}),`
`15`	`16`	`text:(theme:Theme)=>({`
`16`	`17`	`color:theme['$color-white'],`
`17`		`-marginRight:'0.5rem',`
`18`		`-fontSize:'80%',`
	`18`	`+marginRight:'5px',`
	`19`	`+fontSize:'10px',`
`19`	`20`	`}),`
`20`	`21`	`}`
`21`	`22`
`@@ -28,7 +29,11 @@ const StepProgress = (props: Props) => {`
`28`	`29`	`consttheme:Theme=useTheme()`
`29`	`30`	`constisWide=useMedia({minWidth:'340px'})`
`30`	`31`
`31`		-constText=`${props.current} of${props.max}`
	`32`	`+constText=(`
	`33`	`+<spanstyle={styles.text(theme)}>`
	`34`	`+{props.current} of{props.max}`
	`35`	`+</span>`
	`36`	`+)`
`32`	`37`
`33`	`38`	`if(isWide){`
`34`	`39`	`return(`

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,10 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {`
`36`	`36`	`stepIndex=levels[levelIndex].steps.length`
`37`	`37`	`}`
`38`	`38`
	`39`	`+if(position.complete){`
	`40`	`+stepIndex+=1`
	`41`	`+}`
	`42`	`+`
`39`	`43`	`// current level`
`40`	`44`	`constlevelUI:T.LevelUI={`
`41`	`45`	`...currentLevel,`
`@@ -44,7 +48,7 @@ const formatLevels = ({ position, levels, testStatus }: Input): Output => {`
`44`	`48`	`// label step status for step component`
`45`	`49`	`letstatus:T.ProgressStatus='INCOMPLETE'`
`46`	`50`	`letsubtasks`
`47`		`-if(index<stepIndex\|\|(index===stepIndex&&position.complete)){`
	`51`	`+if(index<stepIndex){`
`48`	`52`	`status='COMPLETE'`
`49`	`53`	`}elseif(index===stepIndex){`
`50`	`54`	`status='ACTIVE'`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -221,7 +221,7 @@ const TutorialPage = (props: PageProps) => {`
`221`	`221`	`/>`
`222`	`222`	`</div>`
`223`	`223`	`) :level.steps.length>1 ?(`
`224`		`-<StepProgresscurrent={stepIndex+1}max={level.steps.length}/>`
	`224`	`+<StepProgresscurrent={stepIndex}max={level.steps.length}/>`
`225`	`225`	`) :null}`
`226`	`226`	`</div>`
`227`	`227`	`</footer>`

Comments

(0)