mirror of https://github.com/ascribe/onion.git
add working slides container boilerplate
This commit is contained in:
Tim Daubenschütz
parent
1f6d20fb15
commit
4b87d21259
|
|
@ -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;
|
||||
|
|
@ -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,95 +131,75 @@ 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">
|
||||
<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>
|
||||
<SlidesContainer>
|
||||
<div className={'ascribe-slide'}>
|
||||
<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>
|
||||
</div>
|
||||
<div className={'ascribe-slide'}>
|
||||
chellas
|
||||
</div>
|
||||
</SlidesContainer>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue