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

Commit4c59200

Browse files
committed
theme migration progress 2
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parentd59b0e1 commit4c59200

File tree

9 files changed

+81
-101
lines changed

9 files changed

+81
-101
lines changed

‎web-app/src/components/Markdown/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importMarkdownItfrom'markdown-it'
22
importPrismfrom'prismjs'
3+
import{css,jsx,InterpolationWithTheme}from'@emotion/core'
34
//@ts-ignore no types for package
45
importmarkdownEmojifrom'markdown-it-emoji'
56
import*asReactfrom'react'

‎web-app/src/containers/Loading/LoadingPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const styles = {
1515
flexDirection:'column'as'column',
1616
alignItems:'center',
1717
justifyContent:'center',
18-
width:'100%',
18+
width:'100vw',
1919
},
2020
}
2121

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const styles = {
1717
alignItems:'center'as'center',
1818
justifyContent:'center'as'center',
1919
height:'100%',
20-
width:'100%',
20+
width:'100vw',
2121
},
2222
processes:{
2323
padding:'0 1rem',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'
88
conststyles={
99
formWrapper:{
1010
padding:'1rem',
11-
width:'100%',
11+
width:'100vw',
1212
height:'auto',
1313
},
1414
}
Lines changed: 54 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,35 @@
11
import*asReactfrom'react'
22
import*asTTfrom'typings/tutorial'
3-
//importmomentfrom 'moment'
3+
import{Breadcrumb}from'@alifd/next'
44
importButtonfrom'../../../components/Button'
55
importMarkdownfrom'../../../components/Markdown'
6-
import{Breadcrumb}from'@alifd/next'
7-
8-
constfooterHeight='3rem'
6+
import{Theme}from'../../../styles/theme'
97

108
conststyles={
119
page:{
1210
position:'relative'as'relative',
1311
display:'flex'as'flex',
1412
flexDirection:'column'as'column',
15-
width:'100%',
13+
width:'100vw',
1614
},
17-
nav:{
18-
display:'flex',
19-
height:'2rem',
20-
fontSize:'1rem',
21-
lineHeight:'1rem',
22-
alignItems:'center',
23-
},
24-
navLink:{
25-
fontSize:'14px',
15+
nav:(theme:Theme)=>({
16+
height:theme['$nav-height'],
17+
}),
18+
navLink:(theme:Theme)=>({
19+
fontSize:theme['$font-size-caption'],
20+
lineHeight:theme['$font-lineheight-1'],
2621
color:'white',
2722
cursor:'pointer',
28-
},
23+
}),
2924
content:{
3025
paddingBottom:'5rem',
3126
},
32-
header:{
33-
color:'white',
34-
backgroundColor:'#0066B8',
27+
header:(theme:Theme)=>({
28+
color:theme['$color-white'],
29+
backgroundColor:theme['$color-brand1-9'],
3530
padding:'1rem 1rem 1.5rem 1rem',
36-
},
37-
title:{
38-
fontWeight:'bold'as'bold',
39-
},
31+
}),
32+
title:{},
4033
description:{
4134
fontSize:'1rem',
4235
},
@@ -51,7 +44,7 @@ const styles = {
5144
levelSummary:{
5245
paddingLeft:'1.1rem',
5346
},
54-
footer:{
47+
footer:(theme:Theme)=>({
5548
position:'fixed'as'fixed',
5649
bottom:0,
5750
left:0,
@@ -60,12 +53,12 @@ const styles = {
6053
flexDirection:'row'as'row',
6154
alignItems:'center'as'center',
6255
justifyContent:'flex-end'as'flex-end',
63-
height:footerHeight,
56+
height:theme['$footer-height'],
6457
padding:'1rem',
6558
paddingRight:'2rem',
66-
backgroundColor:'black',
59+
backgroundColor:theme['$color-black'],
6760
width:'100%',
68-
},
61+
}),
6962
}
7063

7164
interfaceProps{
@@ -74,50 +67,48 @@ interface Props {
7467
onClear():void
7568
}
7669

77-
constSummary=(props:Props)=>{
78-
return(
79-
<divcss={styles.page}>
80-
<divcss={styles.content}>
81-
<divcss={styles.header}>
82-
<divcss={styles.nav}>
83-
<Breadcrumbseparator="/">
84-
<Breadcrumb.Item>
85-
<divcss={styles.navLink}onClick={props.onClear}>
86-
&lt; Back to Tutorials
87-
</div>
88-
</Breadcrumb.Item>
89-
</Breadcrumb>
90-
</div>
91-
<Markdowncss={styles.title}>{`#${props.tutorial.summary.title}`}</Markdown>
92-
<Markdown>{`###${props.tutorial.summary.description}`}</Markdown>
93-
{/* <h5 css={styles.meta}>
70+
constSummary=(props:Props)=>(
71+
<divcss={styles.page}>
72+
<divcss={styles.content}>
73+
<divcss={styles.header}>
74+
<divcss={styles.nav}>
75+
<Breadcrumbseparator="/">
76+
<Breadcrumb.Item>
77+
<divcss={styles.navLink}onClick={props.onClear}>
78+
&lt; Back to Tutorials
79+
</div>
80+
</Breadcrumb.Item>
81+
</Breadcrumb>
82+
</div>
83+
<Markdown>{`#${props.tutorial.summary.title}`}</Markdown>
84+
<Markdown>{`###${props.tutorial.summary.description}`}</Markdown>
85+
{/* <h5 css={styles.meta}>
9486
<div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
9587
<div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
9688
</h5> */}
97-
</div>
98-
<div>
99-
<divcss={styles.levelList}>
100-
<h2>Content</h2>
101-
{props.tutorial.levels.map((level:TT.Level,index:number)=>(
102-
<divkey={index}>
103-
<Markdown>{`###${index+1}.${level.title}`}</Markdown>
104-
<divcss={styles.levelSummary}>
105-
<Markdown>{level.summary}</Markdown>
106-
</div>
89+
</div>
90+
<div>
91+
<divcss={styles.levelList}>
92+
<h2>Content</h2>
93+
{props.tutorial.levels.map((level:TT.Level,index:number)=>(
94+
<divkey={index}>
95+
<Markdown>{`###${index+1}.${level.title}`}</Markdown>
96+
<divcss={styles.levelSummary}>
97+
<Markdown>{level.summary}</Markdown>
10798
</div>
108-
))}
109-
</div>
99+
</div>
100+
))}
110101
</div>
111102
</div>
103+
</div>
112104

113-
<divcss={styles.footer}>
114-
{/* TODO Add back button */}
115-
<Buttontype="primary"onClick={props.onNext}>
116-
Start
117-
</Button>
118-
</div>
105+
<divcss={styles.footer}>
106+
{/* TODO Add back button */}
107+
<Buttontype="primary"onClick={props.onNext}>
108+
Start
109+
</Button>
119110
</div>
120-
)
121-
}
111+
</div>
112+
)
122113

123114
exportdefaultSummary

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import*asReactfrom'react'
22
import*asTTfrom'typings/tutorial'
3-
import{Form}from'@alifd/next'
3+
import{css,jsx}from'@emotion/core'
4+
import{Icon,Form}from'@alifd/next'
5+
import{Theme}from'../../../styles/theme'
46

57
constFormItem=Form.Item
68

@@ -9,13 +11,19 @@ interface Props {
911
}
1012

1113
conststyles={
12-
uploadFileButton:{
14+
form:{
15+
maxWidth:'600px',
16+
padding:'0 0.3rem',
17+
},
18+
uploadLabel:(theme:Theme)=>({
1319
padding:'0.3rem 0.5rem',
14-
outline:'1px dotted rgb(51, 51, 51)',
15-
borderRadius:'0.2rem',
16-
fontWeight:400,
17-
fontFamily:
18-
'-apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;',
20+
outline:`1.5px solid${theme['$color-line1-3']}`,
21+
fontSize:theme['$form-element-medium-font-size'],
22+
fontFamily:theme['$font-family-base'],
23+
color:theme['$color-text1-3'],
24+
}),
25+
uploadButton:{
26+
display:'none',
1927
},
2028
}
2129

@@ -39,12 +47,13 @@ const TutorialFile = (props: Props) => {
3947
}
4048

4149
return(
42-
<Formstyle={{maxWidth:'600px'}}>
50+
<Formcss={styles.form}>
4351
<FormItemlabel="Load coderoad config.json">
4452
<br/>
45-
<labelstyle={styles.uploadFileButton}>
46-
Upload
47-
<inputstyle={{display:'none'}}type="file"accept="application/json"onChange={onChange}/>
53+
<labelcss={styles.uploadLabel}>
54+
<Icontype="upload"size="xs"/>
55+
&nbsp;&nbsp;Upload
56+
<inputcss={styles.uploadButton}type="file"accept="application/json"onChange={onChange}/>
4857
</label>
4958
<br/>
5059
</FormItem>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const styles = {
99
page:{
1010
position:'relative'as'relative',
1111
height:'auto',
12-
width:'100%',
12+
width:'vw',
1313
},
1414
selectPage:{
1515
padding:'1rem',

‎web-app/src/styles/theme.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,8 @@ const theme = {
193193
'$s-48':'192px',
194194
'$s-49':'196px',
195195
'$s-50':'200px',
196+
'$footer-height':'3rem',
197+
'$nav-height':'2rem',
196198
}
197199

198200
exporttypeTheme=typeoftheme

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

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

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