From 5759fb389f0f9564a254f20ef933c286ea379228 Mon Sep 17 00:00:00 2001 From: Bob Eagan Date: Tue, 29 Jul 2014 14:52:27 -0700 Subject: [PATCH] update examples to be easier to play with - Create index file to list all of the examples - Normailize headers of all examples to include link back to example list - Always include the global.css in all examples - Change examples to target `
` instead of `document.body` - Fix the CSS of some examples not happy about sharing the page - Include a README to explain how to make the examples - Move animation example's inline css into a separate file to match other examples --- examples/README.md | 9 ++++++ examples/animations/app.css | 30 +++++++++++++++++++ examples/animations/app.js | 2 +- examples/animations/index.html | 37 +++--------------------- examples/auth-flow/app.js | 3 +- examples/auth-flow/index.html | 4 ++- examples/data-flow/app.css | 6 ++++ examples/data-flow/app.js | 2 +- examples/data-flow/index.html | 4 ++- examples/dynamic-segments/app.js | 2 +- examples/dynamic-segments/index.html | 4 ++- examples/{app.css => global.css} | 3 ++ examples/index.html | 17 +++++++++++ examples/master-detail/app.css | 6 ++++ examples/master-detail/app.js | 2 +- examples/master-detail/index.html | 3 ++ examples/partial-app-loading/app.js | 2 +- examples/partial-app-loading/index.html | 4 ++- examples/query-params/app.js | 2 +- examples/query-params/index.html | 4 ++- examples/shared-root/app.js | 2 +- examples/shared-root/index.html | 4 ++- examples/simple-master-detail/app.css | 8 ++++- examples/simple-master-detail/app.js | 2 +- examples/simple-master-detail/index.html | 3 ++ examples/transitions/app.js | 2 +- examples/transitions/index.html | 4 ++- 27 files changed, 119 insertions(+), 52 deletions(-) create mode 100644 examples/README.md create mode 100644 examples/animations/app.css rename examples/{app.css => global.css} (80%) create mode 100644 examples/index.html diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000000..8f0989f6b6 --- /dev/null +++ b/examples/README.md @@ -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 diff --git a/examples/animations/app.css b/examples/animations/app.css new file mode 100644 index 0000000000..4eeef9a770 --- /dev/null +++ b/examples/animations/app.css @@ -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; +} diff --git a/examples/animations/app.js b/examples/animations/app.js index 5fa0cf5e37..874376e1be 100644 --- a/examples/animations/app.js +++ b/examples/animations/app.js @@ -41,4 +41,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/animations/index.html b/examples/animations/index.html index a68f5fa076..024f779cd9 100644 --- a/examples/animations/index.html +++ b/examples/animations/index.html @@ -1,37 +1,8 @@ Animation Example - - + + +

React Router Examples / Animations

+
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js index 8d710887e7..d08dd71fcd 100644 --- a/examples/auth-flow/app.js +++ b/examples/auth-flow/app.js @@ -29,7 +29,6 @@ var App = React.createClass({ Sign in; return (
-

Auth User Flow

  • {loginOrOut}
  • About
    • @@ -190,4 +189,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html index 1d92fcd760..bd966bcf8b 100644 --- a/examples/auth-flow/index.html +++ b/examples/auth-flow/index.html @@ -1,6 +1,8 @@ Authentication Flow Example - + +

    React Router Examples / Auth Flow

    +
    diff --git a/examples/data-flow/app.css b/examples/data-flow/app.css index f0836c5cc4..2083aae714 100644 --- a/examples/data-flow/app.css +++ b/examples/data-flow/app.css @@ -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 { diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js index 0ed89ae647..158163eb7d 100644 --- a/examples/data-flow/app.js +++ b/examples/data-flow/app.js @@ -72,4 +72,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/data-flow/index.html b/examples/data-flow/index.html index 0fbf9ce2f9..0b770d7099 100644 --- a/examples/data-flow/index.html +++ b/examples/data-flow/index.html @@ -1,6 +1,8 @@ Data Flow Example + +

    React Router Examples / Data Flow

    +
    - diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js index f7456e316e..d16a33bedd 100644 --- a/examples/dynamic-segments/app.js +++ b/examples/dynamic-segments/app.js @@ -55,4 +55,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html index 0cacc7701b..75daca3efc 100644 --- a/examples/dynamic-segments/index.html +++ b/examples/dynamic-segments/index.html @@ -1,5 +1,7 @@ Dynamic Segments Example - + +

    React Router Examples / Dynamic Segments

    +
    diff --git a/examples/app.css b/examples/global.css similarity index 80% rename from examples/app.css rename to examples/global.css index 09c56b2485..b2fdc81a92 100644 --- a/examples/app.css +++ b/examples/global.css @@ -15,3 +15,6 @@ a.active { color: hsl(20, 50%, 50%); } +.breadcrumbs a { + text-decoration: none; +} diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000000..1a5730760d --- /dev/null +++ b/examples/index.html @@ -0,0 +1,17 @@ + +React Router Examples + + +

    React Router Examples

    + diff --git a/examples/master-detail/app.css b/examples/master-detail/app.css index fc6cc32035..ab0545eb4d 100644 --- a/examples/master-detail/app.css +++ b/examples/master-detail/app.css @@ -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 { diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js index f7459feccf..1b2faec86e 100644 --- a/examples/master-detail/app.js +++ b/examples/master-detail/app.js @@ -213,7 +213,7 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); // Request utils. diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html index b8484ced3a..074ad93096 100644 --- a/examples/master-detail/index.html +++ b/examples/master-detail/index.html @@ -1,5 +1,8 @@ Master Detail Example + +

    React Router Examples / Master Detail

    +
    diff --git a/examples/partial-app-loading/app.js b/examples/partial-app-loading/app.js index 58cda22251..38bbeb08fd 100644 --- a/examples/partial-app-loading/app.js +++ b/examples/partial-app-loading/app.js @@ -69,4 +69,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/partial-app-loading/index.html b/examples/partial-app-loading/index.html index 098fb42786..cb2ce6c337 100644 --- a/examples/partial-app-loading/index.html +++ b/examples/partial-app-loading/index.html @@ -1,5 +1,7 @@ Partial App Loading Example - + +

    React Router Examples / Partial App Loading

    +
    diff --git a/examples/query-params/app.js b/examples/query-params/app.js index fafae223c9..8ace6037d0 100644 --- a/examples/query-params/app.js +++ b/examples/query-params/app.js @@ -40,4 +40,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/query-params/index.html b/examples/query-params/index.html index 5b9750992c..a83a7e2faa 100644 --- a/examples/query-params/index.html +++ b/examples/query-params/index.html @@ -1,5 +1,7 @@ Query Params Example - + +

    React Router Examples / Query Params

    +
    diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js index 2e4513a918..05c6ba3f8a 100644 --- a/examples/shared-root/app.js +++ b/examples/shared-root/app.js @@ -80,4 +80,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/shared-root/index.html b/examples/shared-root/index.html index d5521e2bf0..3d8b6b5ea5 100644 --- a/examples/shared-root/index.html +++ b/examples/shared-root/index.html @@ -1,5 +1,7 @@ Shared Root Example - + +

    React Router Examples / Shared Root

    +
    diff --git a/examples/simple-master-detail/app.css b/examples/simple-master-detail/app.css index f0836c5cc4..eb2f94e5fa 100644 --- a/examples/simple-master-detail/app.css +++ b/examples/simple-master-detail/app.css @@ -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: 1000px; + height: 800px; } .Master { @@ -24,7 +30,7 @@ a.active { left: 0; top: 0; bottom: 0; - width: 300px; + width: 200px; overflow: auto; padding: 10px 40px; } diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js index 6a439afadf..6b57314e40 100644 --- a/examples/simple-master-detail/app.js +++ b/examples/simple-master-detail/app.js @@ -58,7 +58,7 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); /*****************************************************************************/ // data stuff diff --git a/examples/simple-master-detail/index.html b/examples/simple-master-detail/index.html index aab30e830d..15cb2928ca 100644 --- a/examples/simple-master-detail/index.html +++ b/examples/simple-master-detail/index.html @@ -1,5 +1,8 @@ Simple Master Detail Example + +

    React Router Examples / Simple Master Detail

    +
    diff --git a/examples/transitions/app.js b/examples/transitions/app.js index f8c80177ac..574fb8678e 100644 --- a/examples/transitions/app.js +++ b/examples/transitions/app.js @@ -64,4 +64,4 @@ var routes = ( ); -React.renderComponent(routes, document.body); +React.renderComponent(routes, document.getElementById('example')); diff --git a/examples/transitions/index.html b/examples/transitions/index.html index d264475afc..025275ff85 100644 --- a/examples/transitions/index.html +++ b/examples/transitions/index.html @@ -1,5 +1,7 @@ Transitions Example - + +

    React Router Examples / Transitions

    +