add working slides container boilerplate

js/components/ascribe_slides_container/slides_container.js

@@ -0,0 +1,70 @@
+'use strict';
+
+import React from 'react';
+import ReactAddons from 'react/addons';
+
+let SlidesContainer = React.createClass({
+    propTypes: {
+        children: React.PropTypes.arrayOf(React.PropTypes.element)
+    },
+
+    getInitialState() {
+        return {
+            containerWidth: 0,
+            pageNum: 0
+        };
+    },
+
+    componentDidMount() {
+        // init container width
+        this.handleContainerResize();
+
+        // we're using an event listener on window here,
+        // as it was not possible to listen to the resize events of a dom node
+        window.addEventListener('resize', this.handleContainerResize);
+    },
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleContainerResize);
+    },
+
+    handleContainerResize() {
+        this.setState({
+            containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth
+        });
+    },
+
+    // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
+    // Also, a key is nice to have!
+    renderChildren() {
+        return ReactAddons.Children.map(this.props.children, (child, i) => {
+            return ReactAddons.addons.cloneWithProps(child, {
+                style: {
+                    width: this.state.containerWidth
+                },
+                key: i
+            });
+        });
+    },
+
+    render() {
+        return (
+            <div
+                className="container ascribe-sliding-container-wrapper"
+                ref="containerWrapper">
+                <div
+                    className="container ascribe-sliding-container"
+                    style={{
+                        width: this.state.containerWidth * React.Children.count(this.props.children),
+                        transform: this.state.containerWidth * this.state.pageNum
+                    }}>
+                        <div className="row">
+                            {this.renderChildren()}
+                        </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default SlidesContainer;

js/components/register_piece.js

@@ -19,6 +19,7 @@ import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 
 import LoginContainer from './login_container';
+import SlidesContainer from './ascribe_slides_container/slides_container';
 
 import apiUrls from '../constants/api_urls';
 
@@ -130,29 +131,11 @@ 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="container ascribe-sliding-container-wrapper">
+            <SlidesContainer>
-                <div
+                <div className={'ascribe-slide'}>
-                    className="container ascribe-sliding-container"
+                    <h3 style={{'marginTop': 0}}>Lock down title</h3>
-                    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}
@@ -213,12 +196,10 @@ let RegisterPiece = React.createClass( {
                         <hr />
                     </Form>
                 </div>
-                        <div className={'col-md-6 ascribe-slide'}>
+                <div className={'ascribe-slide'}>
-                            <LoginContainer />
+                    chellas
-                        </div>
-                    </div>
-                </div>
                 </div>
+            </SlidesContainer>
         );
     }
 });

sass/ascribe_piece_register.scss

@@ -1,43 +1,6 @@
 $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) {
     max-width: 600px;

sass/ascribe_slides_container.scss

@@ -0,0 +1,16 @@
+.ascribe-sliding-container-wrapper {
+    overflow-x: hidden;
+    padding-left: 0;
+}
+
+.ascribe-sliding-container  {
+    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.ascribe-slide {
+    position: relative;
+    min-height: 1px;
+    padding-left: 15px;
+    padding-right: 15px;
+    float:left;
+}

sass/main.scss

@@ -23,6 +23,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_piece_register';
 @import 'offset_right';
 @import 'ascribe_settings';
+@import 'ascribe_slides_container';
 
 body {
     background-color: #FDFDFD;