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

Finalize layouting submission form

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-11-09 10:35:23 +01:00
parent 7721d62319
commit 3e22ad1d9d
7 changed files with 222 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
js/components/ascribe_buttons/upload_file_button.js Normal file
View File

@ -0,0 +1,74 @@
'use strict';
import React from 'react';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import { getCookie } from '../../utils/fetch_api_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
const { shape, arrayOf, string, object, number, oneOfType } = React.PropTypes;
const UploadFileButton = React.createClass({
propTypes: {
keyRoutine: shape({
url: string,
fileClass: string
}).isRequired,
validation: shape({
itemLimit: number,
sizeLimit: oneOfType([string, number]),
allowedExtensions: arrayOf(string)
}),
location: object,
fileClassToUpload: shape({
singular: string,
plural: string
}).isRequired
},
submitFile(file) {
console.log(file);
},
render() {
const { fileClassToUpload, validation, keyRoutine } = this.props;
return (
<ReactS3FineUploader
fileInputElement={UploadButton}
keyRoutine={keyRoutine}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={validation}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
fileClassToUpload={fileClassToUpload}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
submitFile={this.submitFile}
location={this.props.location}/>
);
}
});
export default UploadFileButton;

1
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -56,7 +56,6 @@ let ContractSettingsUpdateButton = React.createClass({
render() {
return (
<ReactS3FineUploader
ref="fineuploader"
fileInputElement={UploadButton}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',

105
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -5,11 +5,22 @@ import React from 'react';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
import UploadFileButton from '../../../../../ascribe_buttons/upload_file_button';
import AppConstants from '../../../../../../constants/application_constants';
import { getLangText } from '../../../../../../utils/lang_utils';
const { object } = React.PropTypes;
const PRRegisterPieceForm = React.createClass({
propTypes: {
location: object
},
getInitialState(){
return {
isUploadReady: false
@ -21,8 +32,10 @@ const PRRegisterPieceForm = React.createClass({
},
render() {
const { location } = this.props;
return (
<div>
<div className="register-piece--form">
<Form
className="ascribe-form-bordered"
ref="registerPieceFields">
@ -77,6 +90,96 @@ const PRRegisterPieceForm = React.createClass({
placeholder={getLangText('THIS NEEDS TEXT')}/>
</Property>
</Form>
<div className="input-upload-file-button-property">
{getLangText('Select the PDF with your work')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'digitalwork'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload the Portfolio'),
plural: getLangText('Upload the Portfolios')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Featured Cover photo')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['png', 'jpg']
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload cover photo'),
plural: getLangText('Upload cover photos')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Supporting Materials (Optional)')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload'),
plural: getLangText('Upload')
}}/>
</div>
<div className="input-upload-file-button-property">
{getLangText('Proof of payment')}
<UploadFileButton
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'other_data'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
}}
location={location}
fileClassToUpload={{
singular: getLangText('Upload Screenshot'),
plural: getLangText('Upload Screenshots')
}}/>
</div>
<Form
className="ascribe-form-bordered"
ref="terms">
<Property
name="terms"
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
key="terms_explicitly"
defaultChecked={false}>
&nbsp;{getLangText('I agree to the Terms and Conditions of the Portfolio Review')}
</InputCheckbox>
</Property>
</Form>
<button
type="submit"
className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady}>
{getLangText('Submit to Portfolio Review')}
</button>
</div>
);
}

17
js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
View File

@ -8,13 +8,23 @@ import Row from 'react-bootstrap/lib/Row';
import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
const { object } = React.PropTypes;
const PRRegisterPiece = React.createClass({
propTypes: {
location: object
},
render() {
const { location } = this.props;
setDocumentTitle(getLangText('Submission form'));
return (
<Row>
<Col xs={4}>
<Col xs={6}>
<div className="register-piece--hero">
<h1>Portfolio Review</h1>
<h2>{getLangText('Submission closing on %s', ' 21 Dec 2015')}</h2>
@ -23,8 +33,9 @@ const PRRegisterPiece = React.createClass({
<p>{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}</p>
</div>
</Col>
<Col xs={8}>
<PRRegisterPieceForm />
<Col xs={6}>
<PRRegisterPieceForm
location={location}/>
</Col>
</Row>
);

2
sass/ascribe_form.scss
View File

@ -23,4 +23,4 @@
@media (max-width: 550px) {
width: 100%;
}
}
}

15
sass/ascribe_property.scss
View File

@ -219,3 +219,18 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-top: 0;
}
}
.input-upload-file-button-property {
background-color: white;
padding: 1.5em 0 1.5em 0;
text-align: right;
button {
font-size: 1em;
margin-right: 1em;
}
span + button {
margin-left: 1em;
}
}

14
sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
View File

@ -28,6 +28,20 @@
p:last-child {
margin-bottom: 1.5em;
}
}
.register-piece--form {
form {
border-top: none;
}
form:first-child {
border-bottom: none;
}
form + form, form:last-child {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
}
}