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

Commit0bf2091

Browse files
authored
Merge pull request#401 from coderoad/feature/about
Feature/about
2 parents437eebc +0892885 commit0bf2091

File tree

12 files changed

+272
-126
lines changed

12 files changed

+272
-126
lines changed

‎web-app/src/Routes.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import ErrorView from './components/Error'
55
importLoadingPagefrom'./containers/Loading'
66
importStartPagefrom'./containers/Start'
77
importSelectTutorialPagefrom'./containers/SelectTutorial'
8-
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
98
importTutorialPagefrom'./containers/Tutorial'
109

1110
/*
@@ -39,12 +38,8 @@ const Routes = () => {
3938
<Routepaths={{Tutorial:{Level:{Load:true}}}}>
4039
<LoadingPagetext="Loading Level..."processes={context.processes}/>
4140
</Route>
42-
<Routepaths={{Tutorial:{Level:true}}}>
43-
<TutorialPagesend={send}context={context}state={route.replace('Tutorial.Level.','')}/>
44-
</Route>
45-
{/* Completed */}
46-
<Routepaths={{Tutorial:{Completed:true}}}>
47-
<CompletedPagecontext={context}/>
41+
<Routepaths={{Tutorial:{Level:true,Completed:true}}}>
42+
<TutorialPagesend={send}context={context}state={route.replace('Tutorial.','')}/>
4843
</Route>
4944
</Router>
5045
)

‎web-app/src/containers/Tutorial/CompletedPage.tsx

Lines changed: 0 additions & 55 deletions
This file was deleted.
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
3+
import{Button,Icon}from'@alifd/next'
4+
5+
conststyles={
6+
banner:{
7+
height:'auto',
8+
width:'100%',
9+
backgroundColor:'rgb(85, 132, 255)',
10+
color:'white',
11+
padding:'0.5rem 1rem',
12+
},
13+
header:{
14+
position:'relative'as'relative',
15+
width:'100%',
16+
},
17+
headerMessage:{
18+
marginLeft:'0.5rem',
19+
},
20+
// close: {
21+
// position: 'absolute' as 'absolute',
22+
// right: '0.5rem',
23+
// top: '0.5rem',
24+
// padding: '2px',
25+
// },
26+
section:{
27+
padding:'0rem 0.5rem 1rem 0.5rem',
28+
},
29+
options:{
30+
display:'flex'as'flex',
31+
flexDirection:'row'as'row',
32+
flexWrap:'wrap'as'wrap',
33+
},
34+
optionsLeft:{
35+
flex:3,
36+
},
37+
optionsRight:{
38+
flex:1,
39+
display:'flex'as'flex',
40+
justifyContent:'flex-end'as'flex-end',
41+
alignItems:'flex-end'as'flex-end',
42+
},
43+
}
44+
45+
interfaceProps{
46+
title:string
47+
onRequestWorkspace():void
48+
}
49+
50+
constCompletedBanner=(props:Props)=>{
51+
return(
52+
<divcss={styles.banner}>
53+
<divcss={styles.header}>
54+
<h3>
55+
<Icontype="success-filling"size="large"/>
56+
<spancss={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
57+
</h3>
58+
</div>
59+
<divcss={styles.section}>
60+
<h5>You've reached the end of the road...</h5>
61+
<divcss={styles.options}>
62+
<divcss={styles.optionsLeft}>
63+
<p>To go down another path:</p>
64+
<ul>
65+
<li>- open a new VSCode workspace</li>
66+
<li>- relaunch the CodeRoad app</li>
67+
<li>- select a new tutorial</li>
68+
</ul>
69+
</div>
70+
<divcss={styles.optionsRight}>
71+
<Buttontype="primary"ghost="dark"onClick={props.onRequestWorkspace}>
72+
Open New Workspace
73+
</Button>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
)
79+
}
80+
81+
exportdefaultCompletedBanner

‎web-app/src/containers/Tutorial/components/SideMenu.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const styles = {
2323
interfaceProps{
2424
visible:boolean
2525
toggleVisible(visible:boolean):void
26-
page:'level'|'settings'|'review'
27-
setPage(page:'level'|'settings'|'review'):void
26+
page:'about'|'level'|'review'|'settings'
27+
setPage(page:'about'|'level'|'review'|'settings'):void
2828
}
2929

3030
constSideMenu=(props:Props)=>{
@@ -65,8 +65,20 @@ const SideMenu = (props: Props) => {
6565
<Icontype="list"size="small"color="#EBEBEB"/>
6666
<spanstyle={styles.itemText}>Review</span>
6767
</Item>
68-
{/*<Divider key="divider" />
68+
<Dividerkey="divider"/>
6969
<Item
70+
key="about"
71+
disabled={props.page==='about'}
72+
style={props.page==='about' ?styles.active :{}}
73+
onClick={()=>{
74+
onMenuClose()
75+
props.setPage('about')
76+
}}
77+
>
78+
<Icontype="prompt"size="xs"color="#EBEBEB"/>
79+
<spanstyle={styles.itemText}>About</span>
80+
</Item>
81+
{/* <Item
7082
key="settings"
7183
disabled={props.page === 'settings'}
7284
style={props.page === 'settings' ? styles.active : {}}
@@ -77,7 +89,8 @@ const SideMenu = (props: Props) => {
7789
>
7890
<Icon type="set" size="small" color="#EBEBEB" />
7991
<span style={styles.itemText}>Settings</span>
80-
</Item> */}
92+
</Item>{' '}
93+
*/}
8194
</Menu>
8295
</Drawer>
8396
)
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import*asReactfrom'react'
2+
importMarkdownfrom'../../../components/Markdown'
3+
4+
conststyles={
5+
container:{
6+
display:'flex'as'flex',
7+
flexDirection:'column'as'column',
8+
},
9+
header:{
10+
display:'flex'as'flex',
11+
alignItems:'center',
12+
justifyContent:'space-between',
13+
height:'2rem',
14+
backgroundColor:'#EBEBEB',
15+
fontSize:'1rem',
16+
lineHeight:'1rem',
17+
padding:'10px 0.4rem',
18+
},
19+
content:{
20+
padding:'0.5rem',
21+
},
22+
}
23+
24+
interfaceProps{}
25+
26+
constAboutPage=(props:Props)=>{
27+
return(
28+
<divcss={styles.container}>
29+
<divcss={styles.header}>
30+
<div>About CodeRoad</div>
31+
</div>
32+
<divcss={styles.content}>
33+
<Markdown>
34+
{`
35+
CodeRoad is an open source VSCode extension that allows you to **create** and **play** interactive coding tutorials inside VSCode.
36+
37+
Learn more or contribute at [https://github.com/coderoad/coderoad-vscode](https://github.com/coderoad/coderoad-vscode).
38+
39+
##### Why CodeRoad?
40+
41+
Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.
42+
43+
For learners, there are a number of advantages to running tutorials inside VSCode:
44+
45+
a. Learn in a real world coding environment
46+
b. Get rapid feedback on save and helpful error messages
47+
c.Users own the code, and can build a Git timeline and deploy a portfolio
48+
49+
##### Subscribe
50+
51+
Join our [mailing list](https://tiny.cc/coderoad) to hear about new tutorials & features.
52+
53+
##### Contact
54+
55+
We'd love to hear your feedback.
56+
57+
For bugs/feature requests, reach out on GitHub.
58+
59+
Otherwise, email us at [coderoadapp@gmail.com](mailto:coderoadapp@gmail.com).
60+
61+
`}
62+
</Markdown>
63+
</div>
64+
</div>
65+
)
66+
}
67+
68+
exportdefaultAboutPage

‎web-app/src/containers/Tutorial/containers/Review.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ interface Props {
1010

1111
conststyles={
1212
container:{
13+
height:'auto',
14+
width:'100%',
1315
display:'flex'as'flex',
1416
flexDirection:'column'as'column',
1517
},

0 commit comments

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