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

42
sass/ascribe_piece_register.scss
View File

@ -1,6 +1,42 @@
$break-small: 764px;
$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 {
@media screen and (max-width: $break-medium) {
@ -9,5 +45,9 @@ $break-medium: 991px;
@media screen and (min-width: $break-medium) {
max-width: 1200px;
}
margin: 0 auto
margin: 0 auto;
}
.ascribe-row > div {
padding-left: 0;
}