finalize delete and cancel functionality

gulpfile.js

@@ -93,7 +93,8 @@ gulp.task('browser-sync', function() {
     browserSync({
         files: config.filesToWatch,
         proxy: 'http://localhost:4000',
-        port: 3000
+        port: 3000,
+        browser: "chromium-browser"
     });
 });
 

js/actions/coa_actions.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import alt from '../alt';
+import CoaFetcher from '../fetchers/coa_fetcher';
+
+
+class CoaActions {
+    constructor() {
+        this.generateActions(
+            'updateCoa'
+        );
+    }
+
+    fetchOne(id) {
+        CoaFetcher.fetchOne(id)
+            .then((res) => {
+                this.actions.updateCoa(res.coa);
+                console.log(res.coa);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+    create(edition) {
+        CoaFetcher.create(edition.bitcoin_id)
+            .then((res) => {
+                this.actions.updateCoa(res.coa);
+                console.log(res.coa);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+}
+
+export default alt.createActions(CoaActions);

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -107,7 +107,7 @@ var FileDragAndDrop = React.createClass({
     },
 
     render: function () {
-        let hasFiles = this.props.filesToUpload.length > 0;
+        let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0;
         let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
         className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
 

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -16,13 +16,17 @@ let FileDragAndDropPreviewIterator = React.createClass({
             return (
                 <div>
                     {this.props.files.map((file, i) => {
-                        return (
+                        if(file.status !== 'deleted' && file.status !== 'canceled') {
-                            <FileDragAndDropPreview
+                            return (
-                                key={i}
+                                <FileDragAndDropPreview
-                                file={file}
+                                    key={i}
-                                handleDeleteFile={this.props.handleDeleteFile}
+                                    file={file}
-                                handleCancelFile={this.props.handleCancelFile}/>
+                                    handleDeleteFile={this.props.handleDeleteFile}
-                        );
+                                    handleCancelFile={this.props.handleCancelFile}/>
+                            );
+                        } else {
+                            return null;
+                        }
                     })}
                 </div>
             );

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -6,6 +6,9 @@ import promise from 'es6-promise';
 promise.polyfill();
 
 import fetch from 'isomorphic-fetch';
+import AppConstants from '../../constants/application_constants';
+
+import { getCookie } from '../../utils/fetch_api_utils';
 
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
@@ -18,7 +21,8 @@ var ReactS3FineUploader = React.createClass({
     propTypes: {
         keyRoutine: React.PropTypes.shape({
             url: React.PropTypes.string,
-            fileClass: React.PropTypes.string
+            fileClass: React.PropTypes.string,
+            bitcoinId: React.PropTypes.string
         }),
         createBlobRoutine: React.PropTypes.shape({
             url: React.PropTypes.string
@@ -79,8 +83,67 @@ var ReactS3FineUploader = React.createClass({
         })
     },
 
+    getDefaultProps() {
+        return {
+            autoUpload: true,
+            debug: false,
+            objectProperties: {
+                acl: 'public-read',
+                bucket: 'ascribe0'
+            },
+            request: {
+                endpoint: 'https://ascribe0.s3.amazonaws.com',
+                accessKey: 'AKIAIVCZJ33WSCBQ3QDA'
+            },
+            uploadSuccess: {
+                params: {
+                    isBrowserPreviewCapable: fineUploader.supportedFeatures.imagePreviews
+                }
+            },
+            signature: {
+                endpoint: AppConstants.serverUrl + 's3/signature/',
+                customHeaders: {
+                   'X-CSRFToken': getCookie('csrftoken')
+                },
+            },
+            deleteFile: {
+                enabled: true,
+                method: 'DELETE',
+                endpoint: AppConstants.serverUrl + 's3/delete',
+                customHeaders: {
+                   'X-CSRFToken': getCookie('csrftoken')
+                }
+            },
+            cors: {
+                expected: true,
+                sendCredentials: true
+            },
+            chunking: {
+                enabled: true
+            },
+            resume: {
+                enabled: true
+            },
+            retry: {
+                enableAuto: false
+            },
+            session: {
+                endpoint: null
+            },
+            messages: {
+                unsupportedBrowser: '<h3>Upload is not functional in IE7 as IE7 has no support for CORS!</h3>'
+            },
+            formatFileName: function(name){// fix maybe
+                if (name !== undefined && name.length > 26) {
+                    name = name.slice(0, 15) + '...' + name.slice(-15);
+                }
+                return name;
+            },
+            multiple: false
+        };
+    },
+
     getInitialState() {
-        console.log(this.props);
         return {
             filesToUpload: [],
             uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
@@ -143,7 +206,8 @@ var ReactS3FineUploader = React.createClass({
                 credentials: 'include',
                 body: JSON.stringify({
                     'filename': filename,
-                    'file_class': 'digitalwork'
+                    'file_class': this.props.keyRoutine.fileClass,
+                    'bitcoin_id': this.props.keyRoutine.bitcoinId
                 })
             })
             .then((res) => {
@@ -270,7 +334,7 @@ var ReactS3FineUploader = React.createClass({
 
         // If multiple set and user already uploaded its work,
         // cancel upload
-        if(!this.props.multiple && this.state.filesToUpload.length > 0) {
+        if(!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0) {
             return;
         }
 
@@ -313,6 +377,7 @@ var ReactS3FineUploader = React.createClass({
             }
         }
 
+        // set the new file array
         let newState = React.addons.update(this.state, {
             filesToUpload: { $set: oldAndNewFiles }
         });
@@ -341,7 +406,7 @@ var ReactS3FineUploader = React.createClass({
                 handleDeleteFile={this.handleDeleteFile}
                 handleCancelFile={this.handleCancelFile}
                 multiple={this.props.multiple}
-                dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
+                dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
         );
     }
 

js/components/coa_verify_container.js

@@ -0,0 +1,101 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import GlobalNotificationModel from '../models/global_notification_model';
+import GlobalNotificationActions from '../actions/global_notification_actions';
+
+import Form from './ascribe_forms/form';
+import Property from './ascribe_forms/property';
+import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
+
+import apiUrls from '../constants/api_urls';
+
+
+let CoaVerifyContainer = React.createClass({
+    mixins: [Router.Navigation],
+
+    render() {
+        return (
+            <div className="ascribe-login-wrapper">
+                <br/>
+                <div className="ascribe-login-text ascribe-login-header">
+                    Verify your Certificate of Authenticity
+                </div>
+
+                <CoaVerifyForm />
+                <br />
+                <br />
+                ascribe is using the following public key for verification:
+                <br />
+                <pre>
+                -----BEGIN PUBLIC KEY-----
+                MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDddadqY31kKPFYk8PQA8BWSTbm
+                gaGf9KEYBALp2nWAJcwq80qBzGF+gfi0Z+yb4ooeKHl27GnuxZYValE1Z5ZujfeJ
+                TgO4li59ZMYiah8oXZp/OysrBwCvWw0PtWd8/D9Nc4PqyOz5gzEh6kFah5VsuAke
+                Znu2w7KmeLZ85SmwEQIDAQAB
+                -----END PUBLIC KEY-----
+                </pre>
+            </div>
+        );
+    }
+});
+
+
+let CoaVerifyForm = React.createClass({
+    mixins: [Router.Navigation],
+
+    handleSuccess(response){
+        let notification = null;
+        if (response.verdict){
+            notification = new GlobalNotificationModel('Certificate of Authenticity successfully verified', 'success');
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        }
+    },
+
+    render() {
+        return (
+            <div>
+                <Form
+                    url={apiUrls.coa_verify}
+                    handleSuccess={this.handleSuccess}
+                    buttons={
+                        <button
+                            type="submit"
+                            className="btn ascribe-btn ascribe-btn-login">
+                            Verify your Certificate of Authenticity
+                        </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
+                        name='message'
+                        label="Message">
+                        <input
+                            type="text"
+                            placeholder="Copy paste the message on the bottom of your Certificate of Authenticity"
+                            autoComplete="on"
+                            name="username"
+                            required/>
+                    </Property>
+                    <Property
+                        name='signature'
+                        label="Signature">
+                        <InputTextAreaToggable
+                            rows={3}
+                            editable={true}
+                            placeholder="Copy paste the signature on the bottom of your Certificate of Authenticity"
+                            required/>
+                    </Property>
+                    <hr />
+                </Form>
+            </div>
+        );
+    }
+});
+
+
+export default CoaVerifyContainer;

js/components/edition.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
 
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@@ -9,6 +10,8 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
+import CoaActions from '../actions/coa_actions';
+import CoaStore from '../stores/coa_store';
 
 import MediaPlayer from './ascribe_media/media_player';
 
@@ -24,12 +27,16 @@ import RequestActionForm from './ascribe_forms/form_request_action';
 import EditionActions from '../actions/edition_actions';
 import AclButtonList from './ascribe_buttons/acl_button_list';
 
+import fineUploader from 'fineUploader';
+import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
+
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
-import requests from '../utils/requests';
 import apiUrls from '../constants/api_urls';
+import AppConstants from '../constants/application_constants';
 
+let Link = Router.Link;
 /**
  * This is the component that implements display-specific functionality
  */
@@ -93,6 +100,7 @@ let Edition = React.createClass({
                 <Col md={6} className="ascribe-edition-details">
                     <EditionHeader edition={this.props.edition}/>
                     <EditionSummary
+                        currentUser={this.state.currentUser}
                         edition={this.props.edition} />
 
                     <CollapsibleParagraph
@@ -109,13 +117,20 @@ let Edition = React.createClass({
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
-                        title="Further Details (all editions)"
+                        title="Further Details"
                         show={this.props.edition.acl.indexOf('edit') > -1 || Object.keys(this.props.edition.extra_data).length > 0}>
                         <EditionFurtherDetails
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
                     </CollapsibleParagraph>
 
+                    <CollapsibleParagraph
+                        title="Certificate of Authenticity"
+                        show={this.props.edition.acl.indexOf('coa') > -1}>
+                        <CoaDetails
+                            edition={this.props.edition}/>
+                    </CollapsibleParagraph>
+
                     <CollapsibleParagraph
                         title="Provenance/Ownership History"
                         show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
@@ -191,6 +206,9 @@ let EditionSummary = React.createClass({
         edition: React.PropTypes.object
     },
 
+    getTransferWithdrawData(){
+        return {'bitcoin_id': this.props.edition.bitcoin_id};
+    },
     handleSuccess(){
         EditionActions.fetchOne(this.props.edition.id);
     },
@@ -202,7 +220,24 @@ let EditionSummary = React.createClass({
     render() {
         let status = null;
         if (this.props.edition.status.length > 0){
-            status = <EditionDetailProperty label="STATUS" value={ this.props.edition.status.join().replace(/_/, ' ') } />;
+            let statusStr = this.props.edition.status.join().replace(/_/, ' ');
+            status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
+            if (this.props.edition.pending_new_owner && this.props.edition.acl.indexOf('withdraw_transfer') > -1){
+                status = (
+                    <Form
+                        url={apiUrls.ownership_transfers_withdraw}
+                        getFormData={this.getTransferWithdrawData}
+                        handleSuccess={this.showNotification}>
+                        <EditionDetailProperty label="STATUS" value={ statusStr }>
+                            <button
+                                type="submit"
+                                className="pull-right btn btn-default btn-sm">
+                                WITHDRAW
+                            </button>
+                        </EditionDetailProperty>
+                    </Form>
+                );
+            }
         }
         let actions = null;
         if (this.props.edition.request_action && this.props.edition.request_action.length > 0){
@@ -262,6 +297,18 @@ let EditionDetailProperty = React.createClass({
     },
 
     render() {
+        let value = this.props.value;
+        if (this.props.children){
+            value = (
+                <div className="row-same-height">
+                    <div className="col-xs-6 col-xs-height col-bottom no-padding">
+                        { this.props.value }
+                    </div>
+                    <div className="col-xs-6 col-xs-height">
+                        { this.props.children }
+                    </div>
+                </div>);
+        }
         return (
             <div className="row ascribe-detail-property">
                 <div className="row-same-height">
@@ -269,7 +316,7 @@ let EditionDetailProperty = React.createClass({
                         <div>{ this.props.label + this.props.separator}</div>
                     </div>
                     <div className={this.props.valueClassName + ' col-xs-height col-bottom'}>
-                        <div>{ this.props.value }</div>
+                        {value}
                     </div>
                 </div>
             </div>
@@ -284,19 +331,20 @@ let EditionDetailHistoryIterator = React.createClass({
 
     render() {
         return (
-            <div>
+            <Form>
                 {this.props.history.map((historicalEvent, i) => {
                     return (
-                        <EditionDetailProperty
+                        <Property
-                            key={i}
+                                name={i}
-                            label={historicalEvent[0]}
+                                key={i}
-                            value={historicalEvent[1]}
+                                label={ historicalEvent[0] }
-                            labelClassName="col-xs-4 col-sm-4 col-md-4 col-lg-4"
+                                editable={false}>
-                            valueClassName="col-xs-8 col-sm-8 col-md-8 col-lg-8"
+                            <pre className="ascribe-pre">{ historicalEvent[1] }</pre>
-                            separator="" />
+                        </Property>
                     );
                 })}
-            </div>
+                <hr />
+            </Form>
         );
     }
 });
@@ -415,10 +463,92 @@ let EditionFurtherDetails = React.createClass({
                         handleSuccess={this.showNotification}
                         editable={editable}
                         edition={this.props.edition} />
+                    <FileUploader
+                        edition={this.props.edition}
+                        ref='uploader'/>
                 </Col>
             </Row>
         );
     }
 });
 
+let FileUploader = React.createClass( {
+    handleChange(){
+        this.setState({other_data_key: this.refs.fineuploader.state.filesToUpload[0].key});
+    },
+    render() {
+        return (
+            <ReactS3FineUploader
+                ref='fineuploader'
+                keyRoutine={{
+                    url: AppConstants.serverUrl + 's3/key/',
+                    fileClass: 'otherdata',
+                    bitcoinId: this.props.edition.bitcoin_id
+                }}
+                createBlobRoutine={{
+                    url: apiUrls.blob_digitalworks
+                }}
+                handleChange={this.handleChange}
+                validation={{
+                    itemLimit: 100000,
+                    sizeLimit: '10000000'
+                }}/>
+        );
+    }
+});
+
+let CoaDetails = React.createClass({
+    propTypes: {
+        edition: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return CoaStore.getState();
+    },
+
+    componentDidMount() {
+        CoaStore.listen(this.onChange);
+        if (this.props.edition.coa) {
+            CoaActions.fetchOne(this.props.edition.coa);
+        }
+        else{
+            console.log('create coa');
+            CoaActions.create(this.props.edition);
+        }
+    },
+
+    componentWillUnmount() {
+        CoaStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        if (this.state.coa.url_safe) {
+            return (
+                <div>
+                    <p className="text-center">
+                        <Button bsSize="xsmall" href={this.state.coa.url_safe} target="_blank">
+                            Download <Glyphicon glyph="cloud-download"/>
+                        </Button>
+                        <Link to="coa_verify">
+                            <Button bsSize="xsmall">
+                                Verify <Glyphicon glyph="check"/>
+                            </Button>
+                        </Link>
+
+                    </p>
+                </div>
+            );
+        }
+        return (
+            <div className="text-center">
+                <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+            </div>);
+
+    }
+});
+
 export default Edition;

js/components/login_container.js

@@ -12,6 +12,7 @@ import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 
 import apiUrls from '../constants/api_urls';
+import AppConstants from '../constants/application_constants';
 
 
 let LoginContainer = React.createClass({
@@ -65,7 +66,7 @@ let LoginForm = React.createClass({
         Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
         Until then, we redirect the HARD way, but reloading the whole page using window.location
         */
-        window.location = '/collection';
+        window.location = AppConstants.baseUrl + 'collection';
     },
 
     render() {

js/components/register_piece.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
+import { getCookie } from '../utils/fetch_api_utils';
 import AppConstants from '../constants/application_constants';
-import fineUploader from 'fineUploader';
 
 import Router from 'react-router';
 
@@ -19,6 +19,7 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 
 import DatePicker from 'react-datepicker/dist/react-datepicker';
 
+
 let RegisterPiece = React.createClass( {
     mixins: [Router.Navigation],
 
@@ -135,61 +136,10 @@ let FileUploader = React.createClass({
                     url: apiUrls.blob_digitalworks
                 }}
                 handleChange={this.props.handleChange}
-                autoUpload={true}
-                debug={false}
-                objectProperties={{
-                    acl: 'public-read',
-                    bucket: 'ascribe0'
-                }}
-                request={{
-                    endpoint: 'https://ascribe0.s3.amazonaws.com',
-                    accessKey: 'AKIAIVCZJ33WSCBQ3QDA'
-                }}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/'
-                }}
-                uploadSuccess={{
-                    params: {
-                        isBrowserPreviewCapable: fineUploader.supportedFeatures.imagePreviews
-                    }
-                }}
-                cors={{
-                    expected: true
-                }}
-                chunking={{
-                    enabled: true
-                }}
-                resume={{
-                    enabled: true
-                }}
-                retry={{
-                    enableAuto: false
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                        'X-CSRFToken': 'asdasd'
-                    }
-                }}
                 validation={{
                     itemLimit: 100000,
                     sizeLimit: '25000000000'
-                }}
+                }}/>
-                session={{
-                    endpoint: null
-                }}
-                messages={{
-                    unsupportedBrowser: '<h3>Upload is not functional in IE7 as IE7 has no support for CORS!</h3>'
-                }}
-                formatFileName={(name) => {// fix maybe
-                    if (name !== undefined && name.length > 26) {
-                        name = name.slice(0, 15) + '...' + name.slice(-15);
-                    }
-                    return name;
-                }}
-                multiple={true}/>
         );
     }
 });

js/components/signup_container.js

@@ -137,7 +137,7 @@ let SignupForm = React.createClass({
                     name='promo_code'
                     label="Promocode">
                     <input
-                        type="password"
+                        type="text"
                         placeholder="Enter a promocode here (Optional)"/>
                 </Property>
                 <hr />

js/constants/api_urls.js

@@ -6,6 +6,9 @@ let apiUrls = {
     'applications': AppConstants.apiEndpoint + 'applications/',
     'application_token_refresh': AppConstants.apiEndpoint + 'applications/refresh_token/',
     'blob_digitalworks': AppConstants.apiEndpoint + 'blob/digitalworks/',
+    'coa': AppConstants.apiEndpoint + 'coa/${id}/',
+    'coa_create': AppConstants.apiEndpoint + 'coa/',
+    'coa_verify': AppConstants.apiEndpoint + 'coa/verify_coa/',
     'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
     'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
     'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
@@ -20,6 +23,7 @@ let apiUrls = {
     'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/',
     'ownership_shares': AppConstants.apiEndpoint + 'ownership/shares/',
     'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/',
+    'ownership_transfers_withdraw': AppConstants.apiEndpoint + 'ownership/transfers/withdraw/',
     'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',
     'ownership_unconsigns_deny': AppConstants.apiEndpoint + 'ownership/unconsigns/deny/',
     'ownership_unconsigns_request': AppConstants.apiEndpoint + 'ownership/unconsigns/request/',

js/fetchers/coa_fetcher.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+let CoaFetcher = {
+    /**
+     * Fetch one user from the API.
+     * If no arg is supplied, load the current user
+     */
+    fetchOne(id) {
+        return requests.get('coa', {'id': id});
+    },
+    create(bitcoinId) {
+        console.log(bitcoinId);
+        return requests.post('coa_create', {body: {'bitcoin_id': bitcoinId}});
+    }
+};
+
+export default CoaFetcher;

js/routes.js

@@ -12,6 +12,8 @@ import SignupContainer from './components/signup_container';
 import PasswordResetContainer from './components/password_reset_container';
 
 import SettingsContainer from './components/settings_container';
+import CoaVerifyContainer from './components/coa_verify_container';
+
 import AppConstants from './constants/application_constants';
 import RegisterPiece from './components/register_piece';
 
@@ -28,6 +30,7 @@ let routes = (
         <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
+        <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
 
         <Redirect from={baseUrl} to="login" />
         <Redirect from={baseUrl + '/'} to="login" />

js/stores/coa_store.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import alt from '../alt';
+import CoaActions from '../actions/coa_actions';
+
+
+class CoaStore {
+    constructor() {
+        this.coa = {};
+        this.bindActions(CoaActions);
+    }
+
+    onUpdateCoa(coa) {
+        this.coa = coa;
+    }
+}
+
+export default alt.createStore(CoaStore, 'CoaStore');

package.json

@@ -35,7 +35,6 @@
   "devDependencies": {
     "babel-eslint": "^3.1.11",
     "babel-jest": "^5.2.0",
-    "browserify-shim": "^3.8.9",
     "jest-cli": "^0.4.0"
   },
   "dependencies": {
@@ -44,6 +43,7 @@
     "bootstrap-sass": "^3.3.4",
     "browser-sync": "^2.7.5",
     "browserify": "^9.0.8",
+    "browserify-shim": "^3.8.9",
     "classnames": "^1.2.2",
     "compression": "^1.4.4",
     "envify": "^3.4.0",

sass/ascribe_edition.scss

@@ -28,4 +28,20 @@
   width:100%;
   margin-top: 1em;
 
+}
+
+.coa-file-wrapper{
+  display: table;
+  height: 200px;
+  overflow: hidden;
+  margin: 0 auto;
+  width: 100%;
+  padding: 1em;
+}
+
+.coa-file {
+  display: table-cell;
+  vertical-align: middle;
+  border: 1px solid #CCC;
+  background-color: #F8F8F8;
 }

sass/ascribe_textarea.scss

@@ -5,7 +5,8 @@
 }
 
 .ascribe-textarea-editable:hover {
-    border: 1px solid #AAA;
+    //border: 1px solid #AAA;;
+    border: none;
 }
 
 .ascribe-pre{

sass/main.scss

@@ -32,6 +32,12 @@ body {
     display: none;
 }
 
+.no-margin{
+    margin: 0;
+}
+.no-padding{
+    padding: 0;
+}
 .navbar-default {
     border: none;
     border-left:0;