From e542d3b2a519eab0bc7a2fae01cc57a949e2bd6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 2 Jul 2015 11:49:17 +0200
Subject: [PATCH] piece registration animation process

---
 js/components/register_piece.js  | 153 ++++++++++++++++++-------------
 sass/ascribe_piece_register.scss |  42 ++++++++-
 2 files changed, 130 insertions(+), 65 deletions(-)

diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index ef84e9ea..f1602694 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -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>
         );
diff --git a/sass/ascribe_piece_register.scss b/sass/ascribe_piece_register.scss
index cd3eef28..ee11f946 100644
--- a/sass/ascribe_piece_register.scss
+++ b/sass/ascribe_piece_register.scss
@@ -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;
+}
\ No newline at end of file