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;
text-align: center;
margin: 0;
&.notice {
margin: 10px 0;
}
}
p.byline {
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
left: 0;
right: 0;
font: 16px/22px "Quicksand", sans-serif;
body {
display: table;
width: 100%;
}
p.notice {
margin: 10px 0;
.byline {
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 {

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

@ -47,10 +47,12 @@ export default class App extends React.Component {
</FrozenHead>
<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>
{this.state.isSupported
? <RouteHandler />
: <ErrorPage />}
<div className="container">
{this.state.isSupported
? <RouteHandler />
: <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>
<ga.Initializer />
</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 DownloadActions from '../actions/DownloadActions'
import DownloadButton from './DownloadButton'
@ -39,7 +38,7 @@ export default class DownloadPage extends React.Component {
render() {
switch (this.state.status) {
case 'ready':
return <Centered>
return <div className="page">
<h1>FilePizza</h1>
<Spinner dir="down"
@ -49,11 +48,11 @@ export default class DownloadPage extends React.Component {
<ChromeNotice />
<DownloadButton onClick={this.downloadFile.bind(this)} />
</Centered>
</div>
case 'requesting':
case 'downloading':
return <Centered>
return <div className="page">
<h1>FilePizza</h1>
<Spinner dir="down" animated
@ -63,10 +62,10 @@ export default class DownloadPage extends React.Component {
<ChromeNotice />
<ProgressBar value={this.state.progress} />
</Centered>
</div>
case 'cancelled':
return <Centered>
return <div className="page">
<h1>FilePizza</h1>
<Spinner dir="down"
@ -76,10 +75,10 @@ export default class DownloadPage extends React.Component {
<ChromeNotice />
<ProgressBar value={-1} />
</Centered>
</div>
case 'done':
return <Centered>
return <div className="page">
<h1>FilePizza</h1>
<Spinner dir="down"
@ -89,7 +88,7 @@ export default class DownloadPage extends React.Component {
<ChromeNotice />
<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 React from 'react'
import Spinner from './Spinner'
@ -22,7 +21,7 @@ export default class ErrorPage extends React.Component {
}
render() {
return <Centered ver>
return <div className="page">
<Spinner dir="up" />
@ -35,7 +34,7 @@ export default class ErrorPage extends React.Component {
? <pre>{this.state.stack}</pre>
: 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 ProgressBar from './ProgressBar'
import React from 'react'
@ -48,7 +47,7 @@ export default class UploadPage extends React.Component {
case 'ready':
return <DropZone onDrop={this.uploadFile.bind(this)}>
<Centered>
<div className="page">
<Spinner dir="up" />
@ -61,23 +60,23 @@ export default class UploadPage extends React.Component {
<span>select a file</span>
</label>
</p>
</Centered>
</div>
</DropZone>
case 'processing':
return <Centered>
return <div className="page">
<Spinner dir="up" animated />
<h1>FilePizza</h1>
<p>Processing...</p>
</Centered>
</div>
case 'uploading':
var keys = Object.keys(this.state.peerProgress)
keys.reverse()
return <Centered>
return <div className="page">
<h1>FilePizza</h1>
<Spinner dir="up" animated {...this.state.file} />
@ -93,7 +92,7 @@ export default class UploadPage extends React.Component {
})}
</div>
</Centered>
</div>
}
}

Write Preview
Loading…
Cancel
Save