Skip to content

Commit 2d07269

Browse files
hurujihuruji
authored
Merge pull request #4 from Quilljou/master
feat: ✨ button docs demo
2 parents 15e262b + e5f119f commit 2d07269

29 files changed

+459
-258
lines changed

‎.eslintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"import/no-extraneous-dependencies": 0,
2222
"import/no-dynamic-require": 0,
2323
"global-require": 0,
24-
"@typescript-eslint/no-var-requires": 0
24+
"@typescript-eslint/no-var-requires": 0,
25+
"no-plusplus": 0
2526
}
2627
}

‎docs/App.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import React from 'react';
2-
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
2+
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
33

4-
// import Home from '../scripts/docs/render';
5-
// import Document from './pages/Documents';
6-
// import NotFound from './pages/404';
4+
import NotFound from './pages/404';
5+
import Document from './pages/Document/Document';
6+
import Example from './pages/Example/Example';
77

8-
import 'normalize.css';
9-
import 'github-markdown-css';
108
import './index.styl';
119

12-
import Document from './pages/Document/Document';
1310

1411
export default class App extends React.Component {
1512
public render(): React.ReactNode {
1613
return (
1714
<Router>
1815
<Switch>
19-
<Route exact path="/" component={Document} />
20-
{/* <Route path="/docs/:component" component={Document} />
21-
<Route path="*" component={NotFound} /> */}
16+
<Route path="/docs" component={Document} />
17+
<Route path="/examples/:md" component={Example} />
18+
<Route exact path="/" render={() => (<Redirect to="/docs" />)} />
19+
<Route path="*" component={NotFound} />
2220
</Switch>
2321
</Router>
2422
);

‎docs/assets/style/base.styl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@require "~@/common/stylus/variable.styl"
1+
@require "../../../src/common/stylus/variable.styl"
22

33
html, body
44
width: 100%

‎docs/assets/style/index.styl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@require '~@/common/stylus/reset.styl'
1+
@require "../../../src/common/stylus/variable.styl"
22
@require "./base.styl"
33
@require "./md.styl"

‎docs/assets/style/md.styl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@require "~@/common/stylus/variable.styl"
1+
@require "../../../src/common/stylus/variable.styl"
22

33
.md-body
44
font-size: $fontsize-medium

‎docs/components/Back/Back.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export default class Back extends React.Component {
4+
public render(): React.ReactNode {
5+
return (
6+
<span>back</span>
7+
);
8+
}
9+
}

‎docs/components/Display/Display.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
import './index.styl'
4+
5+
interface DisplayProps {
6+
path: string
7+
}
8+
9+
export default class Display extends React.Component<DisplayProps> {
10+
public render(): React.ReactNode {
11+
const { path } = this.props;
12+
if(!path) return null;
13+
const ifrSrc = `/examples/${path}`
14+
return (
15+
<div className="page-display">
16+
<div className="display-wrapper">
17+
<section className="mofang-demo">
18+
<iframe src={ifrSrc} frameBorder="0" width="100%" height="100%" scrolling="no" title="diplay"></iframe>
19+
</section>
20+
</div>
21+
</div >
22+
);
23+
}
24+
}

‎docs/components/Display/index.styl

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@require "../../../src/common/stylus/variable.styl"
2+
3+
.page-display
4+
position: relative
5+
.display-wrapper
6+
position: relative
7+
width: 330px
8+
height: 645px
9+
top: 50%
10+
transform: translate(0, -50%)
11+
margin: 0 56px 0 26px
12+
background: url("./iphoneX.png") no-repeat center 0
13+
background-size: 100%
14+
.mofang-demo
15+
position: absolute
16+
top: 64px
17+
left: 21px
18+
right: 23px
19+
bottom: 22px
20+
overflow: hidden
21+
border-radius: 0 0 35px 35px
22+
border: 1px solid #edf0f4
23+
border-top: none
24+
background-color: #edf0f4
25+
iframe
26+
// safari shit
27+
width: 0
28+
max-width: 100%
29+
min-width: 100%

‎docs/components/Display/iphoneX.png

15.1 KB
Loading

‎docs/components/Docs/Docs.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { Route, RouteComponentProps } from 'react-router-dom';
3+
4+
import SideList from '../SideList/SideList'
5+
import Display from '../Display/Display'
6+
import Back from '../Back/Back'
7+
import Markdown from '../Markdown/Markdown'
8+
import './index.styl'
9+
10+
11+
export default class Docs extends React.Component<RouteComponentProps> {
12+
public render(): React.ReactNode {
13+
const { match } = this.props;
14+
const path = window.location.pathname.split('/').pop()
15+
return (
16+
<div className="docs-view">
17+
{/* <img className="menu" src="./close.svg" alt="close" /> */}
18+
{/* <img className="menu" v-show="!showCatalog" src="./menu.svg" alt="menu"/> */}
19+
{/* <Back /> */}
20+
{/* <div className="mask"></div> */}
21+
<div className="nav-list-wrapper">
22+
<SideList />
23+
</div>
24+
<Route path={`${match.path}/:md`} component={Markdown}></Route>
25+
<Display path={path}/>
26+
</div >
27+
);
28+
}
29+
}

‎docs/components/Docs/close.svg

+1
Loading

‎docs/components/Docs/index.styl

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@require "../../../src/common/stylus/variable.styl"
2+
3+
.docs-view
4+
display: flex
5+
width: 100%
6+
height: 100%
7+
box-sizing: border-box
8+
flex-wrap: wrap
9+
@media screen and (max-width: 960px)
10+
position: relative
11+
height: auto
12+
&::before
13+
position: fixed
14+
top: 48px
15+
.menu
16+
display: none
17+
@media screen and (max-width: 960px)
18+
display: block
19+
z-index: 5
20+
position: fixed
21+
right: 6px
22+
top: 4px
23+
width: 20px
24+
height: 20px
25+
padding: 10px
26+
&:active
27+
opacity: .6
28+
.nav-list-wrapper
29+
width: 279px
30+
height: 100%
31+
border-right: 1px solid #e3e3e3
32+
@media screen and (max-width: 960px)
33+
position: fixed
34+
right: 0
35+
top: 48px
36+
bottom: 0
37+
height: auto
38+
background-color: $color-white
39+
z-index: 1
40+
overflow: hidden
41+
transform: translate(100%, 0)
42+
transition: all 0.4s ease
43+
border-right: none
44+
&.active
45+
transform: translate(0, 0)
46+
@media screen and (max-width: 960px)
47+
.mask
48+
z-index: 1
49+
position: absolute
50+
top: 0
51+
left: 0
52+
width: 100%
53+
height: 100%
54+
background-color: transparent
55+
&.active
56+
background-color: rgba(0, 0, 0 ,0.05)
57+
transition: all 0.4s ease
58+
.page-sidelist
59+
height: 100%
60+
padding: 50px 0
61+
margin-right: -1px
62+
box-sizing: border-box
63+
overflow-y: auto
64+
@media screen and (max-width: 960px)
65+
height: 100%
66+
padding: 30px 0
67+
font-size: 12px
68+
.nav-li
69+
.nav-name
70+
font-size: 15px
71+
.angle
72+
font-size: 12px
73+
.arrow
74+
top: 27px
75+
.page-doc
76+
position: relative
77+
flex: 1
78+
height: 100%
79+
padding: 54px 30px 30px
80+
box-sizing: border-box
81+
overflow-y: auto
82+
@media screen and (max-width: 960px)
83+
flex: 1 1 100%
84+
height: auto
85+
padding: 20px
86+
font-size: 13px
87+
h2:first-child
88+
margin-top: 0
89+
.page-display
90+
flex: none
91+
height: 100%
92+
overflow-y: auto
93+
@media screen and (max-width: 960px)
94+
flex: 1 1 100%
95+
height: 680px

‎docs/components/Docs/menu.svg

+1
Loading

0 commit comments

Comments
 (0)