ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

piece registration animation process

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-02 11:49:17 +02:00
parent d0b8610050
commit e542d3b2a5
2 changed files with 130 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
js/components/register_piece.js
View File

@ -18,6 +18,8 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
import Form from './ascribe_forms/form'; import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property'; import Property from './ascribe_forms/property';
import LoginContainer from './login_container';
import apiUrls from '../constants/api_urls'; import apiUrls from '../constants/api_urls';
import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader'; import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
@ -36,7 +38,8 @@ let RegisterPiece = React.createClass( {
{ {
digitalWorkKey: null, digitalWorkKey: null,
uploadStatus: false, uploadStatus: false,
selectedLicense: 0 selectedLicense: 0,
isLoginShown: false
}); });
}, },
@ -127,71 +130,93 @@ let RegisterPiece = React.createClass( {
return null; return null;
}, },
toggleLoginTransition() {
this.setState({
isLoginShown: !this.state.isLoginShown
});
},
getTranslationX() {
if(this.state.isLoginShown) {
return {'transform': 'translateX(-1174px)'};
} else {
return {'transform': 'translateX(0)'};
}
},
render() { render() {
return ( return (
<div className="row ascribe-row"> <div className="container ascribe-sliding-container-wrapper">
<div className="col-md-12"> <div
<h3 style={{'marginTop': 0}}>Lock down title</h3> className="container ascribe-sliding-container"
<Form style={this.getTranslationX()}>
ref='form' <div className="row">
url={apiUrls.pieces_list} <div className={'col-md-6 ascribe-slide'}>
getFormData={this.getFormData} <h3 style={{'marginTop': 0}} onClick={this.toggleLoginTransition}>Lock down title</h3>
handleSuccess={this.handleSuccess} <Form
buttons={<button ref='form'
type="submit" url={apiUrls.pieces_list}
className="btn ascribe-btn ascribe-btn-login" getFormData={this.getFormData}
disabled={!this.state.isUploadReady}> handleSuccess={this.handleSuccess}
Register your artwork buttons={<button
</button>} type="submit"
spinner={ className="btn ascribe-btn ascribe-btn-login"
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> disabled={!this.state.isUploadReady}>
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> Register your artwork
</button> </button>}
}> spinner={
<Property <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
label="Files to upload"> <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<FileUploader </button>
submitKey={this.submitKey} }>
setIsUploadReady={this.setIsUploadReady} <Property label="Files to upload">
isReadyForFormSubmission={this.isReadyForFormSubmission}/> <FileUploader
</Property> submitKey={this.submitKey}
<Property setIsUploadReady={this.setIsUploadReady}
name='artist_name' isReadyForFormSubmission={this.isReadyForFormSubmission}/>
label="Artist Name"> </Property>
<input <Property
type="text" name='artist_name'
placeholder="The name of the creator" label="Artist Name">
required/> <input
</Property> type="text"
<Property placeholder="The name of the creator"
name='title' required/>
label="Artwork title"> </Property>
<input <Property
type="text" name='title'
placeholder="The title of the artwork" label="Artwork title">
required/> <input
</Property> type="text"
<Property placeholder="The title of the artwork"
name='date_created' required/>
label="Year Created"> </Property>
<input <Property
type="number" name='date_created'
placeholder="Year Created (e.g. 2015)" label="Year Created">
min={0} <input
required/> type="number"
</Property> placeholder="Year Created (e.g. 2015)"
<Property min={0}
name='num_editions' required/>
label="Number of editions"> </Property>
<input <Property
type="number" name='num_editions'
placeholder="Specify the number of unique editions for this artwork" label="Number of editions">
min={1} <input
required/> type="number"
</Property> placeholder="Specify the number of unique editions for this artwork"
{this.getLicenses()} min={1}
<hr /> required/>
</Form> </Property>
{this.getLicenses()}
<hr />
</Form>
</div>
<div className={'col-md-6 ascribe-slide'}>
<LoginContainer />
</div>
</div>
</div> </div>
</div> </div>
); );

42
sass/ascribe_piece_register.scss
View File

@ -1,6 +1,42 @@
$break-small: 764px; $break-small: 764px;
$break-medium: 991px; $break-medium: 991px;
.ascribe-sliding-container-wrapper {
overflow-x: hidden;
padding-left: 0;
}
.ascribe-sliding-container {
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
@media(max-width:767px){
.ascribe-sliding-container {
padding-left: 0;
}
}
@media(min-width:768px){
.ascribe-sliding-container {
padding-left: 0;
width: $container-sm * 2;
}
}
@media(min-width:992px){
.ascribe-sliding-container {
padding-left: 0;
width: $container-md * 2;
}
}
@media(min-width:1200px){
.ascribe-sliding-container {
padding-left: 0;
width: $container-lg * 2;
}
}
.ascribe-row { .ascribe-row {
@media screen and (max-width: $break-medium) { @media screen and (max-width: $break-medium) {
@ -9,5 +45,9 @@ $break-medium: 991px;
@media screen and (min-width: $break-medium) { @media screen and (min-width: $break-medium) {
max-width: 1200px; max-width: 1200px;
} }
margin: 0 auto margin: 0 auto;
} }
.ascribe-row > div {
padding-left: 0;
}