From 3e22ad1d9d3282d4a680b662d1a33dfbde2e2117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 9 Nov 2015 10:35:23 +0100 Subject: [PATCH] Finalize layouting submission form --- .../ascribe_buttons/upload_file_button.js | 74 ++++++++++++ .../contract_settings_update_button.js | 1 - .../pr_forms/pr_register_piece_form.js | 105 +++++++++++++++++- .../components/pr_register_piece.js | 17 ++- sass/ascribe_form.scss | 2 +- sass/ascribe_property.scss | 15 +++ .../portfolioreview_custom_style.scss | 14 +++ 7 files changed, 222 insertions(+), 6 deletions(-) create mode 100644 js/components/ascribe_buttons/upload_file_button.js diff --git a/js/components/ascribe_buttons/upload_file_button.js b/js/components/ascribe_buttons/upload_file_button.js new file mode 100644 index 00000000..7f76f2ef --- /dev/null +++ b/js/components/ascribe_buttons/upload_file_button.js @@ -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 ( + {/* 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; \ No newline at end of file diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js index f3bab156..265e6548 100644 --- a/js/components/ascribe_settings/contract_settings_update_button.js +++ b/js/components/ascribe_settings/contract_settings_update_button.js @@ -56,7 +56,6 @@ let ContractSettingsUpdateButton = React.createClass({ render() { return ( +
@@ -77,6 +90,96 @@ const PRRegisterPieceForm = React.createClass({ placeholder={getLangText('THIS NEEDS TEXT')}/>
+
+ {getLangText('Select the PDF with your work')} + +
+
+ {getLangText('Featured Cover photo')} + +
+
+ {getLangText('Supporting Materials (Optional)')} + +
+
+ {getLangText('Proof of payment')} + +
+
+ + +  {getLangText('I agree to the Terms and Conditions of the Portfolio Review')} + + +
+
); } diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js index ab705b61..5d1fd728 100644 --- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js +++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js @@ -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 ( - +

Portfolio Review

{getLangText('Submission closing on %s', ' 21 Dec 2015')}

@@ -23,8 +33,9 @@ const PRRegisterPiece = React.createClass({

{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}

- - + + ); diff --git a/sass/ascribe_form.scss b/sass/ascribe_form.scss index 41e17de1..1b265e91 100644 --- a/sass/ascribe_form.scss +++ b/sass/ascribe_form.scss @@ -23,4 +23,4 @@ @media (max-width: 550px) { width: 100%; } -} +} \ No newline at end of file diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss index e938a7c3..cb7662e8 100644 --- a/sass/ascribe_property.scss +++ b/sass/ascribe_property.scss @@ -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; + } +} \ No newline at end of file diff --git a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss index a0eb64ec..6c0d5d66 100644 --- a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss +++ b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss @@ -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); + } } } \ No newline at end of file