Skip to content

Commit

Permalink
Merge pull request remix-run#145 from bobeagan/examples-cleanup
Browse files Browse the repository at this point in the history
update examples to be easier to play with
  • Loading branch information
ryanflorence committed Jul 29, 2014
2 parents ee1a620 + 5759fb3 commit 5df5441
Show file tree
Hide file tree
Showing 27 changed files with 119 additions and 52 deletions.
9 changes: 9 additions & 0 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
### React Router Examples

In order to try out the examples, you need to follow these steps:

1. Clone this repo
1. Run `npm -g install webpack`, if you don't have it installed already
1. Run `npm install` from the repo's root directory
1. Run `./script/build-examples` from the repo's root directory
1. Point your browser to the `index.html` location in this directory
30 changes: 30 additions & 0 deletions examples/animations/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.Image {
position: relative;
}

.Image img {
position: absolute;
top: 0;
left: 0;
height: 400;
width: 400;
background: gray;
}

.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
opacity: 1;
}

.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
opacity: 0.01;
}
2 changes: 1 addition & 1 deletion examples/animations/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
37 changes: 4 additions & 33 deletions examples/animations/index.html
Original file line number Diff line number Diff line change
@@ -1,37 +1,8 @@
<!doctype html public "restroom">
<title>Animation Example</title>
<link href="../app.css" rel="stylesheet"/>
<style>
.Image {
position: relative;
}

.Image img {
position: absolute;
top: 0;
left: 0;
height: 400;
width: 400;
background: gray;
}

.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
opacity: 1;
}

.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
opacity: 0.01;
}
</style>
<link href="../global.css" rel="stylesheet"/>
<link href="app.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
<div id="example"/>
<script src="../build/animations.js"></script>
3 changes: 1 addition & 2 deletions examples/auth-flow/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ var App = React.createClass({
<Link to="login">Sign in</Link>;
return (
<div>
<h1>Auth User Flow</h1>
<ul>
<li>{loginOrOut}</li>
<li><Link to="about">About</Link></li>
Expand Down Expand Up @@ -190,4 +189,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/auth-flow/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!doctype html public "display of affection">
<title>Authentication Flow Example</title>
<link rel="stylesheet" href="../app.css"/>
<link rel="stylesheet" href="../global.css"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
<div id="example"/>
<script src="../build/auth-flow.js"></script>

6 changes: 6 additions & 0 deletions examples/data-flow/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,18 @@ a.active {
color: hsl(20, 50%, 50%);
}

#example {
position: absolute;
}

.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 500px;
}

.Master {
Expand Down
2 changes: 1 addition & 1 deletion examples/data-flow/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/data-flow/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!doctype html public "embarassment">
<title>Data Flow Example</title>
<link href="../global.css" rel="stylesheet"/>
<link href="app.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Data Flow</h1>
<div id="example"/>
<script src="../build/data-flow.js"></script>

2 changes: 1 addition & 1 deletion examples/dynamic-segments/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/dynamic-segments/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html public "restroom">
<title>Dynamic Segments Example</title>
<link href="../app.css" rel="stylesheet"/>
<link href="../global.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
<div id="example"/>
<script src="../build/dynamic-segments.js"></script>
3 changes: 3 additions & 0 deletions examples/app.css → examples/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,6 @@ a.active {
color: hsl(20, 50%, 50%);
}

.breadcrumbs a {
text-decoration: none;
}
17 changes: 17 additions & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!doctype html>
<title>React Router Examples</title>
<link href="global.css" rel="stylesheet"/>
<body>
<h1>React Router Examples</h1>
<ul>
<li><a href="animations/index.html">Animations</a></li>
<li><a href="auth-flow/index.html">Auth Flow</a></li>
<li><a href="data-flow/index.html">Data Flow</a></li>
<li><a href="dynamic-segments/index.html">Dynamic Segments</a></li>
<li><a href="master-detail/index.html">Master Detail</a></li>
<li><a href="partial-app-loading/index.html">Partial App Loading</a></li>
<li><a href="query-params/index.html">Query Params</a></li>
<li><a href="shared-root/index.html">Shared Root</a></li>
<li><a href="simple-master-detail/index.html">Simple Master Detail</a></li>
<li><a href="transitions/index.html">Transitions</a></li>
</ul>
6 changes: 6 additions & 0 deletions examples/master-detail/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,18 @@ a.active {
color: hsl(20, 50%, 50%);
}

#example {
position: absolute;
}

.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 500px;
}

.ContactList {
Expand Down
2 changes: 1 addition & 1 deletion examples/master-detail/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ var routes = (
</Routes>
);

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

// Request utils.

Expand Down
3 changes: 3 additions & 0 deletions examples/master-detail/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!doctype html public "embarassment">
<title>Master Detail Example</title>
<link href="../global.css" rel="stylesheet"/>
<link href="app.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Master Detail</h1>
<div id="example"/>
<script src="../build/master-detail.js"></script>
2 changes: 1 addition & 1 deletion examples/partial-app-loading/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/partial-app-loading/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html public "intoxication">
<title>Partial App Loading Example</title>
<link rel="stylesheet" href="../app.css"/>
<link rel="stylesheet" href="../global.css"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Partial App Loading</h1>
<div id="example"/>
<script src="../build/partial-app-loading.js"></script>
2 changes: 1 addition & 1 deletion examples/query-params/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/query-params/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html public "restroom">
<title>Query Params Example</title>
<link href="../app.css" rel="stylesheet"/>
<link href="../global.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Query Params</h1>
<div id="example"/>
<script src="../build/query-params.js"></script>
2 changes: 1 addition & 1 deletion examples/shared-root/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/shared-root/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html public "superawesome">
<title>Shared Root Example</title>
<link rel="stylesheet" href="../app.css"/>
<link rel="stylesheet" href="../global.css"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Shared Root</h1>
<div id="example"/>
<script src="../build/shared-root.js"></script>
8 changes: 7 additions & 1 deletion examples/simple-master-detail/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,26 @@ a.active {
color: hsl(20, 50%, 50%);
}

#example {
position: absolute;
}

.App {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 1000px;
height: 800px;
}

.Master {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 300px;
width: 200px;
overflow: auto;
padding: 10px 40px;
}
Expand Down
2 changes: 1 addition & 1 deletion examples/simple-master-detail/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ var routes = (
</Routes>
);

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

/*****************************************************************************/
// data stuff
Expand Down
3 changes: 3 additions & 0 deletions examples/simple-master-detail/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!doctype html public "embarassment">
<title>Simple Master Detail Example</title>
<link href="../global.css" rel="stylesheet"/>
<link href="app.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Simple Master Detail</h1>
<div id="example"/>
<script src="../build/simple-master-detail.js"></script>
2 changes: 1 addition & 1 deletion examples/transitions/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,4 @@ var routes = (
</Routes>
);

React.renderComponent(routes, document.body);
React.renderComponent(routes, document.getElementById('example'));
4 changes: 3 additions & 1 deletion examples/transitions/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html public "restroom">
<title>Transitions Example</title>
<link href="../app.css" rel="stylesheet"/>
<link href="../global.css" rel="stylesheet"/>
<body>
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Transitions</h1>
<div id="example"/>
<script src="../build/transitions.js"></script>

0 comments on commit 5df5441

Please sign in to comment.