cobular
/
filepizza
mirror of https://github.com/kern/filepizza
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Replace the Centered component with flexbox.

Browse Source
pull/18/head
Alex Kern 11 years ago
parent 8cedc54b0c
commit 3a2b849295
6 changed files with 47 additions and 61 deletions
Show Stats Download Patch File Download Diff File

36
css/index.styl
Unescape Escape View File

@ -38,21 +38,35 @@ p {
font: 18px/22px "Quicksand", sans-serif; font: 18px/22px "Quicksand", sans-serif;
text-align: center; text-align: center;
margin: 0; margin: 0;
&.notice {
margin: 10px 0;
}
} }
p.byline { body {
position: absolute; display: table;
bottom: 0; width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
left: 0;
right: 0;
font: 16px/22px "Quicksand", sans-serif;
} }
p.notice { .byline {
margin: 10px 0; display: table-row;
font: 12px/40px "Quicksand", sans-serif;
text-align: center;
color: gray;
height: 40px;
}
.container {
display: table-row;
vertical-align: center;
}
.page {
display: flex
flex-direction: column;
justify-content: center;
height: 100%;
} }
.drop-zone { .drop-zone {

10
lib/components/App.js
Unescape Escape View File

@ -47,10 +47,12 @@ export default class App extends React.Component {
</FrozenHead> </FrozenHead>
<body> <body>
<p className="byline">Cooked up by <a href="http://kern.io" target="_blank">Alex Kern</a> &amp; <a href="http://neeraj.io" target="_blank">Neeraj Baid</a> while eating <strong>Sliver</strong> @ UC Berkeley. <a href="https://github.com/kern/filepizza">Fork us</a>.</p> <div className="container">
{this.state.isSupported {this.state.isSupported
? <RouteHandler /> ? <RouteHandler />
: <ErrorPage />} : <ErrorPage />}
</div>
<footer className="byline">Cooked up by <a href="http://kern.io" target="_blank">Alex Kern</a> &amp; <a href="http://neeraj.io" target="_blank">Neeraj Baid</a> while eating <strong>Sliver</strong> @ UC Berkeley. <a href="https://github.com/kern/filepizza">Fork us</a>.</footer>
<script>FilePizza()</script> <script>FilePizza()</script>
<ga.Initializer /> <ga.Initializer />
</body> </body>

27
lib/components/Centered.js
Unescape Escape View File

@ -1,27 +0,0 @@
import React from 'react'
export default class Centered extends React.Component {
render() {
return <div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
height: '100%'}}>
<div>
{this.props.children}
</div>
</div>
}
}
Centered.propTypes = {
hor: React.PropTypes.bool,
ver: React.PropTypes.bool
}
Centered.defaultProps = {
hor: false,
ver: false
}

17
lib/components/DownloadPage.js
Unescape Escape View File

@ -1,4 +1,3 @@
import Centered from './Centered'
import ChromeNotice from './ChromeNotice' import ChromeNotice from './ChromeNotice'
import DownloadActions from '../actions/DownloadActions' import DownloadActions from '../actions/DownloadActions'
import DownloadButton from './DownloadButton' import DownloadButton from './DownloadButton'
@ -39,7 +38,7 @@ export default class DownloadPage extends React.Component {
render() { render() {
switch (this.state.status) { switch (this.state.status) {
case 'ready': case 'ready':
return <Centered> return <div className="page">
<h1>FilePizza</h1> <h1>FilePizza</h1>
<Spinner dir="down" <Spinner dir="down"
@ -49,11 +48,11 @@ export default class DownloadPage extends React.Component {
<ChromeNotice /> <ChromeNotice />
<DownloadButton onClick={this.downloadFile.bind(this)} /> <DownloadButton onClick={this.downloadFile.bind(this)} />
</Centered> </div>
case 'requesting': case 'requesting':
case 'downloading': case 'downloading':
return <Centered> return <div className="page">
<h1>FilePizza</h1> <h1>FilePizza</h1>
<Spinner dir="down" animated <Spinner dir="down" animated
@ -63,10 +62,10 @@ export default class DownloadPage extends React.Component {
<ChromeNotice /> <ChromeNotice />
<ProgressBar value={this.state.progress} /> <ProgressBar value={this.state.progress} />
</Centered> </div>
case 'cancelled': case 'cancelled':
return <Centered> return <div className="page">
<h1>FilePizza</h1> <h1>FilePizza</h1>
<Spinner dir="down" <Spinner dir="down"
@ -76,10 +75,10 @@ export default class DownloadPage extends React.Component {
<ChromeNotice /> <ChromeNotice />
<ProgressBar value={-1} /> <ProgressBar value={-1} />
</Centered> </div>
case 'done': case 'done':
return <Centered> return <div className="page">
<h1>FilePizza</h1> <h1>FilePizza</h1>
<Spinner dir="down" <Spinner dir="down"
@ -89,7 +88,7 @@ export default class DownloadPage extends React.Component {
<ChromeNotice /> <ChromeNotice />
<ProgressBar value={1} /> <ProgressBar value={1} />
</Centered> </div>
} }
} }

5
lib/components/ErrorPage.js
Unescape Escape View File

@ -1,4 +1,3 @@
import Centered from './Centered'
import ErrorStore from '../stores/ErrorStore' import ErrorStore from '../stores/ErrorStore'
import React from 'react' import React from 'react'
import Spinner from './Spinner' import Spinner from './Spinner'
@ -22,7 +21,7 @@ export default class ErrorPage extends React.Component {
} }
render() { render() {
return <Centered ver> return <div className="page">
<Spinner dir="up" /> <Spinner dir="up" />
@ -35,7 +34,7 @@ export default class ErrorPage extends React.Component {
? <pre>{this.state.stack}</pre> ? <pre>{this.state.stack}</pre>
: null} : null}
</Centered> </div>
} }
} }

13
lib/components/UploadPage.js
Unescape Escape View File

@ -1,4 +1,3 @@
import Centered from './Centered'
import DropZone from './DropZone' import DropZone from './DropZone'
import ProgressBar from './ProgressBar' import ProgressBar from './ProgressBar'
import React from 'react' import React from 'react'
@ -48,7 +47,7 @@ export default class UploadPage extends React.Component {
case 'ready': case 'ready':
return <DropZone onDrop={this.uploadFile.bind(this)}> return <DropZone onDrop={this.uploadFile.bind(this)}>
<Centered> <div className="page">
<Spinner dir="up" /> <Spinner dir="up" />
@ -61,23 +60,23 @@ export default class UploadPage extends React.Component {
<span>select a file</span> <span>select a file</span>
</label> </label>
</p> </p>
</Centered> </div>
</DropZone> </DropZone>
case 'processing': case 'processing':
return <Centered> return <div className="page">
<Spinner dir="up" animated /> <Spinner dir="up" animated />
<h1>FilePizza</h1> <h1>FilePizza</h1>
<p>Processing...</p> <p>Processing...</p>
</Centered> </div>
case 'uploading': case 'uploading':
var keys = Object.keys(this.state.peerProgress) var keys = Object.keys(this.state.peerProgress)
keys.reverse() keys.reverse()
return <Centered> return <div className="page">
<h1>FilePizza</h1> <h1>FilePizza</h1>
<Spinner dir="up" animated {...this.state.file} /> <Spinner dir="up" animated {...this.state.file} />
@ -93,7 +92,7 @@ export default class UploadPage extends React.Component {
})} })}
</div> </div>
</Centered> </div>
} }
} }

Write Preview
Loading…
Cancel
Save