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 (
-
-
-
Lock down title
-
+
);
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