ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +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 Property from './ascribe_forms/property';
import LoginContainer from './login_container'; import LoginContainer from './login_container';
import SlidesContainer from './ascribe_slides_container/slides_container';
import apiUrls from '../constants/api_urls'; import apiUrls from '../constants/api_urls';
@ -130,95 +131,75 @@ let RegisterPiece = React.createClass( {
return null; return null;
}, },
toggleLoginTransition() {
this.setState({
isLoginShown: !this.state.isLoginShown
});
},
getTranslationX() {
if(this.state.isLoginShown) {
return {'transform': 'translateX(-1174px)'};
} else {
return {'transform': 'translateX(0)'};
}
},
render() { render() {
return ( 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()}> <Form
<div className="row"> ref='form'
<div className={'col-md-6 ascribe-slide'}> url={apiUrls.pieces_list}
<h3 style={{'marginTop': 0}} onClick={this.toggleLoginTransition}>Lock down title</h3> getFormData={this.getFormData}
<Form handleSuccess={this.handleSuccess}
ref='form' buttons={<button
url={apiUrls.pieces_list} type="submit"
getFormData={this.getFormData} className="btn ascribe-btn ascribe-btn-login"
handleSuccess={this.handleSuccess} disabled={!this.state.isUploadReady}>
buttons={<button Register your artwork
type="submit" </button>}
className="btn ascribe-btn ascribe-btn-login" spinner={
disabled={!this.state.isUploadReady}> <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
Register your artwork <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</button>} </button>
spinner={ }>
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <Property label="Files to upload">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <FileUploader
</button> submitKey={this.submitKey}
}> setIsUploadReady={this.setIsUploadReady}
<Property label="Files to upload"> isReadyForFormSubmission={this.isReadyForFormSubmission}/>
<FileUploader </Property>
submitKey={this.submitKey} <Property
setIsUploadReady={this.setIsUploadReady} name='artist_name'
isReadyForFormSubmission={this.isReadyForFormSubmission}/> label="Artist Name">
</Property> <input
<Property type="text"
name='artist_name' placeholder="The name of the creator"
label="Artist Name"> required/>
<input </Property>
type="text" <Property
placeholder="The name of the creator" name='title'
required/> label="Artwork title">
</Property> <input
<Property type="text"
name='title' placeholder="The title of the artwork"
label="Artwork title"> required/>
<input </Property>
type="text" <Property
placeholder="The title of the artwork" name='date_created'
required/> label="Year Created">
</Property> <input
<Property type="number"
name='date_created' placeholder="Year Created (e.g. 2015)"
label="Year Created"> min={0}
<input required/>
type="number" </Property>
placeholder="Year Created (e.g. 2015)" <Property
min={0} name='num_editions'
required/> label="Number of editions">
</Property> <input
<Property type="number"
name='num_editions' placeholder="Specify the number of unique editions for this artwork"
label="Number of editions"> min={1}
<input required/>
type="number" </Property>
placeholder="Specify the number of unique editions for this artwork" {this.getLicenses()}
min={1} <hr />
required/> </Form>
</Property>
{this.getLicenses()}
<hr />
</Form>
</div>
<div className={'col-md-6 ascribe-slide'}>
<LoginContainer />
</div>
</div>
</div> </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-small: 764px;
$break-medium: 991px; $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 { .ascribe-row {
@media screen and (max-width: $break-medium) { @media screen and (max-width: $break-medium) {
max-width: 600px; 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 'ascribe_piece_register';
@import 'offset_right'; @import 'offset_right';
@import 'ascribe_settings'; @import 'ascribe_settings';
@import 'ascribe_slides_container';
body { body {
background-color: #FDFDFD; background-color: #FDFDFD;