ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

add working slides container boilerplate

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-02 13:31:35 +02:00
parent 1f6d20fb15
commit 4b87d21259
5 changed files with 154 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
js/components/ascribe_slides_container/slides_container.js Normal file
View File

@ -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;

153
js/components/register_piece.js
View File

@ -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>
);
}
});

37
sass/ascribe_piece_register.scss
View File

@ -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;

16
sass/ascribe_slides_container.scss Normal file
View File

@ -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;
}

1
sass/main.scss
View File

@ -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;