Permalink
Browse files

Update UI

  • Loading branch information...
1 parent 53fed2c commit 56478a121ba2d6193417278a39228afc081e731b @javierbyte committed Aug 30, 2016
Showing with 27 additions and 26 deletions.
  1. +1 −1 dist/bundle.js
  2. +1 −1 dist/bundle.js.map
  3. +23 −23 src/App.js
  4. +2 −1 styles/style.css
View
Oops, something went wrong.
View
Oops, something went wrong.
View
@@ -81,36 +81,14 @@ const App = React.createClass({
<div className='app-header'>
<h1 className='app-title'>Visual Center</h1>
<div>
- This tool will find the visual center of your images.
+ Find the visual center of your images.
</div>
<Dropzone onDrop={this.onDrop} className='dropzone'>
<div>Start by selecting your image. Click or drop here.</div>
</Dropzone>
</div>
- <div className='app-control-container'>
- <label className='app-control'>
- <input
- type='checkbox'
- checked={showGuides}
- onChange={() => {this.setState({showGuides: !showGuides})}} />
- <div>
- Show guides
- </div>
- </label>
-
- <label className='app-control'>
- <input
- type='checkbox'
- checked={useCircle}
- onChange={() => {this.setState({useCircle: !useCircle})}} />
- <div>
- Make the canvas a circle
- </div>
- </label>
- </div>
-
<div className={`demo-image-comparison ${showGuides ? '-show-guides' : ''} ${useCircle ? '-use-circle' : ''}`}>
<div className='column'>
<div className='demo-image-container-title'>
@@ -138,6 +116,28 @@ const App = React.createClass({
</div>
</div>
+ <div className='app-control-container'>
+ <label className='app-control'>
+ <input
+ type='checkbox'
+ checked={showGuides}
+ onChange={() => {this.setState({showGuides: !showGuides})}} />
+ <div>
+ Show guides
+ </div>
+ </label>
+
+ <label className='app-control'>
+ <input
+ type='checkbox'
+ checked={useCircle}
+ onChange={() => {this.setState({useCircle: !useCircle})}} />
+ <div>
+ Make the canvas a circle
+ </div>
+ </label>
+ </div>
+
{base64 && (<div className='padding-2 results'>
<div>
{base64 && `The center is at ${toPercent(resultLeft)}% - ${toPercent(resultTop)}%`}
View
@@ -81,6 +81,7 @@ strong {
.demo-image-comparison {
text-align: center;
+ margin-top: 2rem;
}
.demo-image-container {
@@ -119,7 +120,7 @@ strong {
}
.app-control-container {
- padding: 1rem 0 1.5rem;
+ padding: 1.5rem 0 0;
}
.app-control {
user-select: none;

0 comments on commit 56478a1

Please sign in to comment.