Skip to content

Commit 5df5441

Browse files
ryanflorenceryanflorence
committed
Merge pull request #145 from bobeagan/examples-cleanup
update examples to be easier to play with
2 parents ee1a620 + 5759fb3 commit 5df5441

File tree

27 files changed

+119
-52
lines changed

27 files changed

+119
-52
lines changed

‎examples/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
### React Router Examples
2+
3+
In order to try out the examples, you need to follow these steps:
4+
5+
1. Clone this repo
6+
1. Run `npm -g install webpack`, if you don't have it installed already
7+
1. Run `npm install` from the repo's root directory
8+
1. Run `./script/build-examples` from the repo's root directory
9+
1. Point your browser to the `index.html` location in this directory

‎examples/animations/app.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.Image {
2+
position: relative;
3+
}
4+
5+
.Image img {
6+
position: absolute;
7+
top: 0;
8+
left: 0;
9+
height: 400;
10+
width: 400;
11+
background: gray;
12+
}
13+
14+
.example-enter {
15+
opacity: 0.01;
16+
transition: opacity .5s ease-in;
17+
}
18+
19+
.example-enter.example-enter-active {
20+
opacity: 1;
21+
}
22+
23+
.example-leave {
24+
opacity: 1;
25+
transition: opacity .5s ease-in;
26+
}
27+
28+
.example-leave.example-leave-active {
29+
opacity: 0.01;
30+
}

‎examples/animations/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ var routes = (
4141
</Routes>
4242
);
4343

44-
React.renderComponent(routes, document.body);
44+
React.renderComponent(routes, document.getElementById('example'));

‎examples/animations/index.html

+4-33
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,8 @@
11
<!doctype html public "restroom">
22
<title>Animation Example</title>
3-
<link href="../app.css" rel="stylesheet"/>
4-
<style>
5-
.Image {
6-
position: relative;
7-
}
8-
9-
.Image img {
10-
position: absolute;
11-
top: 0;
12-
left: 0;
13-
height: 400;
14-
width: 400;
15-
background: gray;
16-
}
17-
18-
.example-enter {
19-
opacity: 0.01;
20-
transition: opacity .5s ease-in;
21-
}
22-
23-
.example-enter.example-enter-active {
24-
opacity: 1;
25-
}
26-
27-
.example-leave {
28-
opacity: 1;
29-
transition: opacity .5s ease-in;
30-
}
31-
32-
.example-leave.example-leave-active {
33-
opacity: 0.01;
34-
}
35-
</style>
3+
<link href="../global.css" rel="stylesheet"/>
4+
<link href="app.css" rel="stylesheet"/>
365
<body>
6+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
7+
<div id="example"/>
378
<script src="../build/animations.js"></script>

‎examples/auth-flow/app.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ var App = React.createClass({
2929
<Link to="login">Sign in</Link>;
3030
return (
3131
<div>
32-
<h1>Auth User Flow</h1>
3332
<ul>
3433
<li>{loginOrOut}</li>
3534
<li><Link to="about">About</Link></li>
@@ -190,4 +189,4 @@ var routes = (
190189
</Routes>
191190
);
192191

193-
React.renderComponent(routes, document.body);
192+
React.renderComponent(routes, document.getElementById('example'));

‎examples/auth-flow/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!doctype html public "display of affection">
22
<title>Authentication Flow Example</title>
3-
<link rel="stylesheet" href="../app.css"/>
3+
<link rel="stylesheet" href="../global.css"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
6+
<div id="example"/>
57
<script src="../build/auth-flow.js"></script>
68

‎examples/data-flow/app.css

+6
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,18 @@ a.active {
1111
color: hsl(20, 50%, 50%);
1212
}
1313

14+
#example {
15+
position: absolute;
16+
}
17+
1418
.App {
1519
position: absolute;
1620
top: 0;
1721
left: 0;
1822
right: 0;
1923
bottom: 0;
24+
width: 500px;
25+
height: 500px;
2026
}
2127

2228
.Master {

‎examples/data-flow/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,4 @@ var routes = (
7272
</Routes>
7373
);
7474

75-
React.renderComponent(routes, document.body);
75+
React.renderComponent(routes, document.getElementById('example'));

‎examples/data-flow/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<!doctype html public "embarassment">
22
<title>Data Flow Example</title>
3+
<link href="../global.css" rel="stylesheet"/>
34
<link href="app.css" rel="stylesheet"/>
45
<body>
6+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
7+
<div id="example"/>
58
<script src="../build/data-flow.js"></script>
6-

‎examples/dynamic-segments/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,4 @@ var routes = (
5555
</Routes>
5656
);
5757

58-
React.renderComponent(routes, document.body);
58+
React.renderComponent(routes, document.getElementById('example'));

‎examples/dynamic-segments/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<!doctype html public "restroom">
22
<title>Dynamic Segments Example</title>
3-
<link href="../app.css" rel="stylesheet"/>
3+
<link href="../global.css" rel="stylesheet"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
6+
<div id="example"/>
57
<script src="../build/dynamic-segments.js"></script>

‎examples/app.css ‎examples/global.css

+3
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,6 @@ a.active {
1515
color: hsl(20, 50%, 50%);
1616
}
1717

18+
.breadcrumbs a {
19+
text-decoration: none;
20+
}

‎examples/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<title>React Router Examples</title>
3+
<link href="global.css" rel="stylesheet"/>
4+
<body>
5+
<h1>React Router Examples</h1>
6+
<ul>
7+
<li><a href="animations/index.html">Animations</a></li>
8+
<li><a href="auth-flow/index.html">Auth Flow</a></li>
9+
<li><a href="data-flow/index.html">Data Flow</a></li>
10+
<li><a href="dynamic-segments/index.html">Dynamic Segments</a></li>
11+
<li><a href="master-detail/index.html">Master Detail</a></li>
12+
<li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
13+
<li><a href="query-params/index.html">Query Params</a></li>
14+
<li><a href="shared-root/index.html">Shared Root</a></li>
15+
<li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>
16+
<li><a href="transitions/index.html">Transitions</a></li>
17+
</ul>

‎examples/master-detail/app.css

+6
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,18 @@ a.active {
1111
color: hsl(20, 50%, 50%);
1212
}
1313

14+
#example {
15+
position: absolute;
16+
}
17+
1418
.App {
1519
position: absolute;
1620
top: 0;
1721
left: 0;
1822
right: 0;
1923
bottom: 0;
24+
width: 500px;
25+
height: 500px;
2026
}
2127

2228
.ContactList {

‎examples/master-detail/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ var routes = (
213213
</Routes>
214214
);
215215

216-
React.renderComponent(routes, document.body);
216+
React.renderComponent(routes, document.getElementById('example'));
217217

218218
// Request utils.
219219

‎examples/master-detail/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<!doctype html public "embarassment">
22
<title>Master Detail Example</title>
3+
<link href="../global.css" rel="stylesheet"/>
34
<link href="app.css" rel="stylesheet"/>
45
<body>
6+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
7+
<div id="example"/>
58
<script src="../build/master-detail.js"></script>

‎examples/partial-app-loading/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,4 @@ var routes = (
6969
</Routes>
7070
);
7171

72-
React.renderComponent(routes, document.body);
72+
React.renderComponent(routes, document.getElementById('example'));

‎examples/partial-app-loading/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<!doctype html public "intoxication">
22
<title>Partial App Loading Example</title>
3-
<link rel="stylesheet" href="../app.css"/>
3+
<link rel="stylesheet" href="../global.css"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
6+
<div id="example"/>
57
<script src="../build/partial-app-loading.js"></script>

‎examples/query-params/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ var routes = (
4040
</Routes>
4141
);
4242

43-
React.renderComponent(routes, document.body);
43+
React.renderComponent(routes, document.getElementById('example'));

‎examples/query-params/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<!doctype html public "restroom">
22
<title>Query Params Example</title>
3-
<link href="../app.css" rel="stylesheet"/>
3+
<link href="../global.css" rel="stylesheet"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
6+
<div id="example"/>
57
<script src="../build/query-params.js"></script>

‎examples/shared-root/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,4 @@ var routes = (
8080
</Routes>
8181
);
8282

83-
React.renderComponent(routes, document.body);
83+
React.renderComponent(routes, document.getElementById('example'));

‎examples/shared-root/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<!doctype html public "superawesome">
22
<title>Shared Root Example</title>
3-
<link rel="stylesheet" href="../app.css"/>
3+
<link rel="stylesheet" href="../global.css"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
6+
<div id="example"/>
57
<script src="../build/shared-root.js"></script>

‎examples/simple-master-detail/app.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,26 @@ a.active {
1111
color: hsl(20, 50%, 50%);
1212
}
1313

14+
#example {
15+
position: absolute;
16+
}
17+
1418
.App {
1519
position: absolute;
1620
top: 0;
1721
left: 0;
1822
right: 0;
1923
bottom: 0;
24+
width: 1000px;
25+
height: 800px;
2026
}
2127

2228
.Master {
2329
position: absolute;
2430
left: 0;
2531
top: 0;
2632
bottom: 0;
27-
width: 300px;
33+
width: 200px;
2834
overflow: auto;
2935
padding: 10px 40px;
3036
}

‎examples/simple-master-detail/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ var routes = (
5858
</Routes>
5959
);
6060

61-
React.renderComponent(routes, document.body);
61+
React.renderComponent(routes, document.getElementById('example'));
6262

6363
/*****************************************************************************/
6464
// data stuff

‎examples/simple-master-detail/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<!doctype html public "embarassment">
22
<title>Simple Master Detail Example</title>
3+
<link href="../global.css" rel="stylesheet"/>
34
<link href="app.css" rel="stylesheet"/>
45
<body>
6+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
7+
<div id="example"/>
58
<script src="../build/simple-master-detail.js"></script>

‎examples/transitions/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,4 @@ var routes = (
6464
</Routes>
6565
);
6666

67-
React.renderComponent(routes, document.body);
67+
React.renderComponent(routes, document.getElementById('example'));

‎examples/transitions/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<!doctype html public "restroom">
22
<title>Transitions Example</title>
3-
<link href="../app.css" rel="stylesheet"/>
3+
<link href="../global.css" rel="stylesheet"/>
44
<body>
5+
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
6+
<div id="example"/>
57
<script src="../build/transitions.js"></script>

0 commit comments

Comments
 (0)