diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx index 713a210b..8614b117 100644 --- a/docs/app/components/layout/home/index.jsx +++ b/docs/app/components/layout/home/index.jsx @@ -1,10 +1,23 @@ import React from 'react'; import { Link } from 'react-router'; -import { Card, Button } from 'react-toolbox'; +import Button from 'react-toolbox/button'; +import {Card, CardTitle, CardMedia, CardText, CardActions} from 'react-toolbox/card'; import Logo from '../../logo'; import Navigation from '../../navigation'; import style from './style'; -import authors from './modules/authors.jsx'; + +const GithubIcon = () => ( + + + +); + +const TwitterIcon = () => ( + + + +); + const Home = () => (
@@ -45,11 +58,25 @@ const Home = () => (

About the authors

diff --git a/docs/app/components/layout/home/modules/authors.jsx b/docs/app/components/layout/home/modules/authors.jsx deleted file mode 100644 index a56322ee..00000000 --- a/docs/app/components/layout/home/modules/authors.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -const GithubIcon = () => ( - - - -); - -const TwitterIcon = () => ( - - - -); - -export default [ - { - title: 'Javi Velasco', - subtitle: 'javivelasco', - actions: [ - { - href: 'http://github.com/javivelasco', - children: [, Github], - target: '_blank' - }, - { - href: 'http://twitter.com/javivelasco', - children: [, Twitter], - style: {color: '#55acee'}, - target: '_blank' - } - ], - image: '/images/javivelasco.jpg', - text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?', - color: '#3f51b5' - }, - { - title: 'Javi Jimenez', - subtitle: 'soyjavi', - actions: [ - { - href: 'http://github.com/soyjavi', - children: [, Github], - target: '_blank' - }, - { - href: 'http://twitter.com/soyjavi', - children: [, Twitter], - style: {color: '#55acee'}, - target: '_blank' - } - ], - image: '/images/soyjavi.jpg', - text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO', - color: '#3f51b5' - } -]; diff --git a/docs/app/components/layout/home/modules/readme.md b/docs/app/components/layout/home/modules/readme.md deleted file mode 100644 index 0e6303bd..00000000 --- a/docs/app/components/layout/home/modules/readme.md +++ /dev/null @@ -1,18 +0,0 @@ -# React Toolbox Components - -React Toolbox is a library of React Components based on Google's Material Design Guidelines. The main purpose of the documentation is to explore each of the components and to learn how to use them. To make the best possible experience and to experiment with the components properties and methods, we've created a playground to try components live. - -On the top right side of the screen you will see a rounded button with a code icon. It opens a the playground with a small in-browser editor and an area to render what you type in real time. Inside the documentation of each component you will see one or multiple example code boxes. Each of them can include a button to open the given code in the playground. - -Enjoy and remember that [feedback](https://github.com/react-toolbox/react-toolbox/issues) is really appreciated. - -# Lorem ipsum... - -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod -tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, -quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo -consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse -cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non -proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - -# Authors diff --git a/docs/app/components/layout/home/style.scss b/docs/app/components/layout/home/style.scss index dd936090..078b551e 100644 --- a/docs/app/components/layout/home/style.scss +++ b/docs/app/components/layout/home/style.scss @@ -1,5 +1,7 @@ @import "../../globals"; @import "./config"; + +$twitter-color: #55acee; $content-offset: 4.8 * $unit; $content-width: 740px; @@ -29,10 +31,10 @@ $content-width: 740px; opacity: $hero-text-secondary-opacity; } .github { - z-index: $z-index-higher; position: fixed; top: 2 * $unit; left: 2 * $unit; + z-index: $z-index-higher; text-align: center; iframe { display: inline-block; @@ -74,11 +76,10 @@ $content-width: 740px; .content { display: flex; flex-direction: column; + flex-wrap: wrap; align-items: center; padding: $content-offset; background-color: $color-content; - - flex-wrap: wrap; &:nth-child(3) { background-color: darken($color-content, 5%); } @@ -87,9 +88,13 @@ $content-width: 740px; align-items: flex-start; justify-content: center; > * { + max-width: 32 * $unit; flex: 1 auto; margin: 0 $unit; } + .twitter { + color: $twitter-color; + } } > p { max-width: $content-width; @@ -125,6 +130,27 @@ $content-width: 740px; } } +.donate { + display: inline-block; + overflow: hidden; + font-size: 1.1 * $unit; + color: #fff; + vertical-align: top; + border-radius: 3px; + .legend { + display: inline-block; + padding: 0 .5 * $unit; + line-height: 2 * $unit; + background-color: #555; + } + .paypal { + display: inline-block; + padding: 0 .5 * $unit; + line-height: 2 * $unit; + background-color: #007ec6; + } +} + @media all and (max-width: 768px) { .header { .github { @@ -148,24 +174,3 @@ $content-width: 740px; background-color: transparent; } } - -.donate { - display: inline-block; - overflow: hidden; - font-size: 1.1 * $unit; - color: #fff; - vertical-align: top; - border-radius: 3px; - .legend { - display: inline-block; - padding: 0 .5 * $unit; - line-height: 2 * $unit; - background-color: #555; - } - .paypal { - display: inline-block; - padding: 0 .5 * $unit; - line-height: 2 * $unit; - background-color: #007ec6; - } -} diff --git a/docs/webpack.config.development.js b/docs/webpack.config.development.js index efc2907c..d37d9c35 100644 --- a/docs/webpack.config.development.js +++ b/docs/webpack.config.development.js @@ -2,6 +2,7 @@ const path = require('path'); const webpack = require('webpack'); const autoprefixer = require('autoprefixer'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const TransferWebpackPlugin = require('transfer-webpack-plugin'); module.exports = { context: __dirname, @@ -49,6 +50,10 @@ module.exports = { postcss: [autoprefixer], plugins: [ new ExtractTextPlugin('docs.css', { allChunks: true }), + new TransferWebpackPlugin([{ + from: 'www/images', + to: 'images' + }], path.resolve(__dirname, './')), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new webpack.DefinePlugin({