Create boilerplate code for portfolioreview

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -0,0 +1,85 @@
+'use strict';
+
+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 { getLangText } from '../../../../../../utils/lang_utils';
+
+
+const PRRegisterPieceForm = React.createClass({
+    getInitialState(){
+        return {
+            isUploadReady: false
+        };
+    },
+
+    handleSuccess() {
+
+    },
+
+    render() {
+        return (
+            <div>
+                <Form
+                    className="ascribe-form-bordered"
+                    ref="registerPieceFields">
+                    <Property
+                        name='artist_name'
+                        label={getLangText('Full name')}>
+                        <input
+                            type="text"
+                            placeholder="(e.g. Andy Warhol)"
+                            required/>
+                    </Property>
+                    <Property
+                        name='title'
+                        label={getLangText('Title of the Work')}>
+                        <input
+                            type="text"
+                            placeholder="(e.g. 32 Campbell's Soup Cans)"
+                            required/>
+                    </Property>
+                    <Property
+                        name='date_created'
+                        label={getLangText('Year of creation')}>
+                        <input
+                            type="number"
+                            placeholder="(e.g. 1962)"
+                            min={1}
+                            required/>
+                    </Property>
+                </Form>
+                <Form
+                    className="ascribe-form-bordered"
+                    ref="additionalData">
+                    <Property
+                        name='biography'
+                        label={getLangText('Biography')}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            placeholder={getLangText('THIS NEEDS TEXT')}/>
+                    </Property>
+                    <Property
+                        name='artist_statement'
+                        label={getLangText("Artist's statement")}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            placeholder={getLangText('THIS NEEDS TEXT')}/>
+                    </Property>
+                    <Property
+                        name='exhibition'
+                        label={getLangText('Exhibition / Publication history (optional)')}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            placeholder={getLangText('THIS NEEDS TEXT')}/>
+                    </Property>
+                </Form>
+            </div>
+        );
+    }
+});
+
+export default PRRegisterPieceForm;

js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import React from 'react';
+
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+
+import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+
+
+const PRRegisterPiece = React.createClass({
+    render() {
+        return (
+            <Row>
+                <Col xs={4}>
+                    <div className="register-piece--hero">
+                        <h1>Portfolio Review</h1>
+                        <h2>{getLangText('Submission closing on %s', ' 21 Dec 2015')}</h2>
+                        <p>{getLangText('Submissions are open to everyone, we accept only PDFs.')}</p>
+                        <p>{getLangText('We accept only one PDF with up to 20 images from every participant.')}</p>
+                        <p>{getLangText('You need to pay 50€ in order to apply. We only accept PayPal.')}</p>
+                    </div>
+                </Col>
+                <Col xs={8}>
+                    <PRRegisterPieceForm />
+                </Col>
+            </Row>
+        );
+    }
+});
+
+export default PRRegisterPiece;

js/components/whitelabel/prize/prize_routes.js

@@ -14,6 +14,7 @@ import SPApp from './simple_prize/prize_app';
 
 import PRApp from './portfolioreview/pr_app';
 import PRLanding from './portfolioreview/components/pr_landing';
+import PRRegisterPiece from './portfolioreview/components/pr_register_piece';
 
 import EditionContainer from '../../ascribe_detail/edition_container';
 import LogoutContainer from '../../logout_container';
@@ -63,7 +64,7 @@ const ROUTES = {
             <IndexRoute component={PRLanding} />
             <Route
                 path='register_piece'
-                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SPRegisterPiece)}
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(PRRegisterPiece)}
                 headerTitle='+ NEW WORK'/>
             <Route
                 path='login'

js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js

@@ -43,9 +43,10 @@ let PrizeRegisterPiece = React.createClass({
 
         if(this.state.prize && this.state.prize.active){
             return (
+                <div>
                     <RegisterPiece
                         enableLocalHashing={false}
-                    headerMessage={getLangText('Submit to the prize')}
+                        headerMessage={''}
                         submitMessage={getLangText('Submit')}
                         location={location}>
                         <Property
@@ -82,6 +83,7 @@ let PrizeRegisterPiece = React.createClass({
                             </InputCheckbox>
                         </Property>
                     </RegisterPiece>
+                </div>
             );
         }
         else {

sass/whitelabel/prize/index.scss

@@ -1,4 +1,5 @@
-@import 'sluice/sluice_custom_style';
+@import 'simple_prize/simple_prize_custom_style';
+@import 'portfolioreview/portfolioreview_custom_style';
 
 .ascribe-prize-app {
     border-radius: 0;

sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss

@@ -0,0 +1,33 @@
+.client--portfolioreview {
+    padding-top: 20px !important;
+
+    .register-piece--hero {
+        text-align: center;
+        
+        h1, h2 {
+            font-variant: small-caps;
+        }
+
+        h1 {
+            font-size: 5em;
+            color: #757575;
+        }
+
+        h2 {
+            font-size: 1.25em;
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        p + p {
+            margin-top: 0;
+        }
+
+        p:last-child {
+            margin-bottom: 1.5em;
+        }
+
+    }
+}