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

37
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,11 +130,29 @@ 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>
<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}
@ -148,8 +169,7 @@ let RegisterPiece = React.createClass( {
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</button>
}>
<Property
label="Files to upload">
<Property label="Files to upload">
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
@ -193,6 +213,11 @@ let RegisterPiece = React.createClass( {
<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;
}