Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit85c05e1

Browse files
authored
Merge pull requestcoderoad#148 from ShMcK/feature/style-overview-page
cleanup overview page ui
2 parentsed378e3 +1061378 commit85c05e1

File tree

4 files changed

+63
-46
lines changed

4 files changed

+63
-46
lines changed

‎web-app/src/containers/Overview/OverviewPage.tsx

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import*asReactfrom'react'
22
import*asGfrom'typings/graphql'
3+
importmomentfrom'moment'
34
importButtonfrom'../../components/Button'
4-
importIconfrom'../../components/Icon'
5-
import{Divider}from'@alifd/next'
65
importMarkdownfrom'../../components/Markdown'
6+
import{Breadcrumb}from'@alifd/next'
77

88
constfooterHeight='3rem'
99

@@ -14,27 +14,32 @@ const styles = {
1414
flexDirection:'column'as'column',
1515
width:'100%',
1616
},
17+
nav:{
18+
display:'flex',
19+
height:'2rem',
20+
fontSize:'1rem',
21+
lineHeight:'1rem',
22+
alignItems:'center',
23+
},
24+
navLink:{
25+
fontSize:'14px',
26+
color:'white',
27+
cursor:'pointer',
28+
},
1729
content:{
1830
paddingBottom:'3rem',
1931
},
20-
summary:{
21-
padding:'0rem 1rem 1rem 1rem',
32+
header:{
33+
color:'white',
34+
backgroundColor:'#0066B8',
35+
padding:'1rem 1rem 1.5rem 1rem',
2236
},
2337
title:{
2438
fontWeight:'bold'as'bold',
2539
},
2640
description:{
2741
fontSize:'1rem',
2842
},
29-
header:{
30-
display:'flex',
31-
height:'2rem',
32-
backgroundColor:'#EBEBEB',
33-
fontSize:'1rem',
34-
lineHeight:'1rem',
35-
padding:'10px 1rem',
36-
alignItems:'center',
37-
},
3843
levelList:{
3944
padding:'0rem 1rem',
4045
},
@@ -61,46 +66,55 @@ const styles = {
6166
interfaceProps{
6267
title:string
6368
description:string
69+
createdBy:G.User
70+
updatedAt:string
6471
levels:G.Level[]
6572
onNext():void
6673
onBack():void
6774
}
6875

69-
constSummary=({ title, description, levels, onNext, onBack}:Props)=>(
76+
constSummary=(props:Props)=>(
7077
<divcss={styles.page}>
7178
<divcss={styles.content}>
7279
<divcss={styles.header}>
73-
<buttononClick={onBack}>
74-
<Icontype="arrow-left"size="xxs"/>
75-
</button>
76-
<span>&nbsp;&nbsp;</span>
77-
<span>CodeRoad</span>
78-
</div>
79-
<divcss={styles.summary}>
80-
<h2css={styles.title}>{title}</h2>
81-
<Markdown>{description}</Markdown>
80+
<divcss={styles.nav}>
81+
<Breadcrumbseparator="/">
82+
<Breadcrumb.Item>
83+
<divcss={styles.navLink}onClick={props.onBack}>
84+
&lt; Back to Tutorials
85+
</div>
86+
</Breadcrumb.Item>
87+
</Breadcrumb>
88+
</div>
89+
<h1css={styles.title}>{props.title}</h1>
90+
<h3>{props.description}</h3>
91+
<h4>
92+
<spancss={{marginRight:'2rem'}}>Created by{props.createdBy.name}</span>
93+
<span>Last updated{moment(props.updatedAt).format('M/YYYY')}</span>
94+
</h4>
8295
</div>
8396
<div>
84-
<divcss={styles.header}>
85-
<span>Levels</span>
86-
</div>
8797
<divcss={styles.levelList}>
88-
{levels.map((level:G.Level,index:number)=>(
98+
<h2>Content</h2>
99+
{props.levels.map((level:G.Level,index:number)=>(
89100
<divkey={index}>
90-
<h4>
101+
<h3>
91102
{index+1}.{level.title}
92-
</h4>
93-
<divcss={styles.levelSummary}>{level.summary}</div>
94-
<Divider/>
103+
</h3>
104+
<divcss={styles.levelSummary}>
105+
<Markdown>{level.summary}</Markdown>
106+
</div>
95107
</div>
96108
))}
97109
</div>
98110
</div>
99111
</div>
100112

113+
<divcss={{height:'3rem '}}/>
114+
101115
<divcss={styles.footer}>
102116
{/* TODO Add back button */}
103-
<Buttontype="primary"onClick={()=>onNext()}>
117+
<Buttontype="primary"onClick={props.onNext}>
104118
Start
105119
</Button>
106120
</div>

‎web-app/src/containers/Overview/index.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,20 @@ const Overview = (props: PageProps) => {
5858
constonBack=()=>props.send({type:'BACK'})
5959

6060
const{ title, description}=data.tutorial.summary
61-
const{ levels}=data.tutorial.version.data
61+
const{ createdBy, updatedAt,data:tutorialData}=data.tutorial.version
62+
const{ levels}=tutorialData
6263

63-
return<OverviewPagetitle={title}description={description}levels={levels}onNext={onNext}onBack={onBack}/>
64+
return(
65+
<OverviewPage
66+
title={title}
67+
description={description}
68+
createdBy={createdBy}
69+
updatedAt={updatedAt}
70+
levels={levels}
71+
onNext={onNext}
72+
onBack={onBack}
73+
/>
74+
)
6475
}
6576

6677
exportdefaultOverview

‎web-app/src/containers/SelectTutorial/SelectTutorial.tsx

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@ const styles = {
99
position:'relative'as'relative',
1010
width:'100%',
1111
},
12-
header:{
13-
height:'2rem',
14-
backgroundColor:'#EBEBEB',
15-
fontSize:'1rem',
16-
lineHeight:'1rem',
17-
padding:'10px 1rem',
18-
},
1912
banner:{
2013
minHeight:'3rem',
2114
fontSize:'1rem',
@@ -39,9 +32,6 @@ const SelectTutorial = (props: Props) => {
3932
}
4033
return(
4134
<divcss={styles.page}>
42-
<divcss={styles.header}>
43-
<span>CodeRoad</span>
44-
</div>
4535
<divcss={styles.banner}>
4636
<span>Select a tutorial to launch in this workspace:</span>
4737
</div>

‎web-app/stories/Overview.stories.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,10 @@ storiesOf('Overview', module)
4242
]
4343
return(
4444
<OverViewPage
45-
title="Some Title"
46-
description="Some description"
45+
title="Manage NPM package.json"
46+
description="Learn to use the package manager at the core of JavaScript projects."
47+
createdBy={{name:'Shawn McKay'}}
48+
updatedAt={newDate().toUTCString()}
4749
levels={levels}
4850
onBack={action('back')}
4951
onNext={linkTo('Tutorial SideBar','Level')}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp