various visual changes

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -51,7 +51,6 @@ let AccordionListItem = React.createClass({
                             <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
                             <div>
                                 <span>{this.props.content.date_created.split('-')[0]}</span>
-                                <span className="pull-right">this.props.</span>
                                 {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
                                     {getLangText('%s license', this.props.content.license_type.code)}
                                 </a> */}

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -6,7 +6,7 @@ import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 
 import classNames from 'classnames';
 
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 
 const CollapsibleParagraph = React.createClass({
@@ -43,13 +43,14 @@ const CollapsibleParagraph = React.createClass({
 
     render() {
         let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? '[' + getLangText('hide') + ']' : '[' + getLangText('show') + ']';
+        let text = this.isExpanded() ? '-' : '+';
+
         if(this.props.show) {
             return (
                 <div className="ascribe-detail-header">
                     <div className="ascribe-edition-collapsible-wrapper">
                         <div onClick={this.handleToggle}>
-                            <span>{this.props.title}</span><span className="pull-right">{text}</span>
+                            <span>{text} {this.props.title}</span>
                         </div>
                         <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
                             {this.props.children}

js/components/ascribe_forms/form.js

@@ -18,7 +18,8 @@ let Form = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     getInitialState() {
@@ -141,10 +142,16 @@ let Form = React.createClass({
         });
     },
     render() {
+        let className = 'ascribe-form';
+
+        if(this.props.className) {
+            className += ' ' + this.props.className;
+        }
+
         return (
             <form
                 role="form"
-                className="ascribe-form"
+                className={className}
                 onSubmit={this.submit}
                 autoComplete="on">
                 {this.getErrors()}

js/components/ascribe_forms/form_property_header.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import React from 'react';
+
+let FormPropertyHeader = React.createClass({
+    propTypes: {
+        children: React.PropTypes.arrayOf(React.PropTypes.element)
+    },
+
+    render() {
+        return (
+            <div className="ascribe-form-header">
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+export default FormPropertyHeader;

js/components/ascribe_media/media_player.js

@@ -150,7 +150,7 @@ let MediaPlayer = React.createClass({
     },
 
     render() {
-        if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
+        if (this.props.mimetype === 'video' && this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) {
             return (
                 <div className="ascribe-detail-header ascribe-media-player">
                     <p><em>Please be patient, the video is been encoded</em></p>

js/components/edition.js

@@ -77,29 +77,6 @@ let Edition = React.createClass({
                         currentUser={this.state.currentUser}
                         edition={this.props.edition} />
 
-                    <CollapsibleParagraph
-                        title="Notes"
-                        show={(this.state.currentUser.username && true || false) ||
-                                (this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note)}>
-                        <EditionPersonalNote
-                            currentUser={this.state.currentUser}
-                            handleSuccess={this.props.loadEdition}
-                            edition={this.props.edition}/>
-                        <EditionPublicEditionNote
-                            handleSuccess={this.props.loadEdition}
-                            edition={this.props.edition}/>
-                    </CollapsibleParagraph>
-
-                    <CollapsibleParagraph
-                        title={getLangText('Further Details')}
-                        show={this.props.edition.acl.indexOf('edit') > -1
-                            || Object.keys(this.props.edition.extra_data).length > 0
-                            || this.props.edition.other_data !== null}>
-                        <EditionFurtherDetails
-                            handleSuccess={this.props.loadEdition}
-                            edition={this.props.edition}/>
-                    </CollapsibleParagraph>
-
                     <CollapsibleParagraph
                         title={getLangText('Certificate of Authenticity')}
                         show={this.props.edition.acl.indexOf('coa') > -1}>
@@ -133,6 +110,30 @@ let Edition = React.createClass({
                         <SpoolDetails
                             edition={this.props.edition} />
                     </CollapsibleParagraph>
+
+                    <CollapsibleParagraph
+                        title="Notes"
+                        show={(this.state.currentUser.username && true || false) ||
+                                (this.props.edition.acl.indexOf('edit') > -1 || this.props.edition.public_note)}>
+                        <EditionPersonalNote
+                            currentUser={this.state.currentUser}
+                            handleSuccess={this.props.loadEdition}
+                            edition={this.props.edition}/>
+                        <EditionPublicEditionNote
+                            handleSuccess={this.props.loadEdition}
+                            edition={this.props.edition}/>
+                    </CollapsibleParagraph>
+
+                    <CollapsibleParagraph
+                        title={getLangText('Further Details')}
+                        show={this.props.edition.acl.indexOf('edit') > -1
+                            || Object.keys(this.props.edition.extra_data).length > 0
+                            || this.props.edition.other_data !== null}>
+                        <EditionFurtherDetails
+                            handleSuccess={this.props.loadEdition}
+                            edition={this.props.edition}/>
+                    </CollapsibleParagraph>
+
                 </Col>
             </Row>
         );
@@ -177,7 +178,7 @@ let MediaContainer = React.createClass({
                 <MediaPlayer mimetype={mimetype}
                     preview={thumbnail}
                     url={this.props.edition.digital_work.url}
-                    extraData={extraData} 
+                    extraData={extraData}
                     encodingStatus={encodingStatus} />
                 <p className="text-center">
                     <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.edition.digital_work.url} target="_blank">
@@ -326,7 +327,8 @@ let EditionDetailProperty = React.createClass({
         ]),
         separator: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
-        valueClassName: React.PropTypes.string
+        valueClassName: React.PropTypes.string,
+        children: React.PropTypes.arrayOf(React.PropTypes.element)
     },
 
     getDefaultProps() {

js/components/header.js

@@ -102,9 +102,8 @@ let Header = React.createClass({
             <div>
                 <Navbar
                     brand={
-                        <Link className="navbar-brand" to="pieces">
-                            {this.getLogo()}
-                        </Link>}
+                        this.getLogo()
+                    }
                     toggleNavKey={0}
                     fixedTop={true}>
                     <CollapsibleNav eventKey={0}>

js/components/register_piece.js

@@ -23,6 +23,7 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
+import FormPropertyHeader from './ascribe_forms/form_property_header';
 
 import LoginContainer from './login_container';
 import SlidesContainer from './ascribe_slides_container/slides_container';
@@ -167,8 +168,8 @@ let RegisterPiece = React.createClass( {
                     onFocus={this.changeSlide}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
-                            <h3 style={{'marginTop': 0, 'marginLeft': '1em'}}>{getLangText('Register your work')}</h3>
                             <Form
+                                className="ascribe-form-bordered"
                                 ref='form'
                                 url={apiUrls.pieces_list}
                                 getFormData={this.getFormData}
@@ -184,6 +185,9 @@ let RegisterPiece = React.createClass( {
                                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                                     </button>
                                     }>
+                                <FormPropertyHeader>
+                                    <h3>{getLangText('Register your work')}</h3>
+                                </FormPropertyHeader>
                                 <Property
                                     ignoreFocus={true}>
                                     <FileUploader
@@ -218,7 +222,6 @@ let RegisterPiece = React.createClass( {
                                         required/>
                                 </Property>
                                 {this.getLicenses()}
-                                <hr />
                             </Form>
                         </Col>
                     </Row>

sass/ascribe_edition.scss

@@ -11,13 +11,12 @@
 .ascribe-edition-collapsible-wrapper > div:first-child {
     width: 100%;
     cursor: pointer;
-    background-color: #EEE;
+    background-color: #F5F5F5;
     padding: 10px;
-    border: 1px solid #CCC;
-
+    margin-top: 20px;
 }
 .ascribe-edition-collapsible-wrapper > div > span {
-  font-size:1.3em;
+  font-size: 1.2em;
   margin-right: .5em;
 }
 .ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
@@ -26,8 +25,6 @@
 
 .ascribe-edition-collapible-content {
   width:100%;
-  margin-top: 1em;
-
 }
 
 .coa-file-wrapper{
@@ -44,4 +41,8 @@
   vertical-align: middle;
   border: 1px solid #CCC;
   background-color: #F8F8F8;
+}
+
+.ascribe-button-list {
+  margin-top: 1em;
 }

sass/ascribe_form.scss

@@ -0,0 +1,16 @@
+.ascribe-form-bordered {
+    border: 1px solid #F5F5F5;
+}
+
+.ascribe-form-header {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    background-color: white;
+}
+
+.ascribe-form-header > h3 {
+    padding: .75em 0 .75em 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #616161;
+}

sass/ascribe_settings.scss

@@ -4,7 +4,7 @@
     text-align: center;
     padding-bottom: 1em;
 
-    background-color: rgba(0,0,0,0);
+    background-color: white;
 
     border-left: 3px solid rgba(0,0,0,0);
 
@@ -22,7 +22,7 @@
 
 .is-focused {
     background-color: rgba(2, 182, 163, 0.05);
-    border-left: 3px solid rgba(2, 182, 163, 1)!important;
+    border-left: 3px solid rgba(2, 182, 163, 1) !important;
 }
 
 .is-error {

sass/ascribe_uploader.scss

@@ -4,7 +4,7 @@
     vertical-align: middle;
     text-align: center;
     height: auto;
-    background-color: #FAFAFA;
+    background-color: #FEFEFE;
     overflow: auto;
     margin-top: 1em;
 

sass/main.scss

@@ -26,6 +26,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'offset_right';
 @import 'ascribe_settings';
 @import 'ascribe_slides_container';
+@import 'ascribe_form';
 
 body {
     background-color: #FDFDFD;
@@ -37,6 +38,10 @@ html {
     overflow-y: scroll;
 }
 
+hr {
+    margin-bottom: 15px;
+}
+
 .hidden {
     display: none;
 }
@@ -187,10 +192,6 @@ html {
     background-color: rgba(2, 182, 163, 0.5);
 }
 
-.ascribe-detail-header {
-    margin-top: 2em;
-}
-
 .ascribe-detail-title {
     font-size: 2em;
     margin-bottom: -0.2em;