editions styling

fix otherdata
collapsible styling

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -59,15 +59,16 @@ let AccordionListItem = React.createClass({
                                 overlay={<Tooltip>{this.props.content.title}</Tooltip>}>
                                 <h1 className="truncate" onClick={this.handleClick}>{this.props.content.title}</h1>
                             </OverlayTrigger>
-                            <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
+                            <h3 onClick={this.handleClick}>{getLangText('by %s', this.props.content.artist_name)}</h3>
+                            <div>
+                                <span onClick={this.handleClick}>{this.props.content.date_created.split('-')[0]}</span>
+                            </div>
                             <div>
-                                <span>{this.props.content.date_created.split('-')[0]}</span>
                                 <AccordionListItemEditionWidget
                                     piece={this.props.content} />
                                 {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
                                     {getLangText('%s license', this.props.content.license_type.code)}
                                 </a> */}
-
                             </div>
                         </div>
                         <span style={{'clear': 'both'}}></span>

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -75,15 +75,24 @@ let AccordionListItemEditionWidget = React.createClass({
                 <span
                     onClick={this.toggleTable}
                     className="ascribe-accordion-list-item-edition-widget">
-                    {', ' + editionMapping + ' ' + getLangText('Edition')} {this.getGlyphicon()}
+                    {editionMapping + ' ' + getLangText('Edition')} {this.getGlyphicon()}
                 </span>
             );
-        } else {
+        } else if(numEditions === 0){
             return (
                 <span
                     onClick={this.toggleTable}
                     className="ascribe-accordion-list-item-edition-widget">
-                    {', ' + numEditions + ' ' + getLangText('Editions')} {this.getGlyphicon()}
+                    {'+ Editions'}
+                </span>
+            );
+        }
+        else {
+            return (
+                <span
+                    onClick={this.toggleTable}
+                    className="ascribe-accordion-list-item-edition-widget">
+                    {numEditions + ' ' + getLangText('Editions')} {this.getGlyphicon()}
                 </span>
             );
         }

js/components/ascribe_detail/edition.js

@@ -275,7 +275,7 @@ let EditionPersonalNote = React.createClass({
                         label={getLangText('Personal note (private)')}
                         editable={true}>
                         <InputTextAreaToggable
-                            rows={3}
+                            rows={1}
                             editable={true}
                             defaultValue={this.props.edition.note_from_user}
                             placeholder={getLangText('Enter a personal note%s', '...')}
@@ -314,7 +314,7 @@ let EditionPublicEditionNote = React.createClass({
                         label={getLangText('Edition note (public)')}
                         editable={isEditable}>
                         <InputTextAreaToggable
-                            rows={3}
+                            rows={1}
                             editable={isEditable}
                             defaultValue={this.props.edition.public_note}
                             placeholder={getLangText('Enter a public note for this edition%', '...')}

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -276,7 +276,7 @@ var ReactS3FineUploader = React.createClass({
             body: JSON.stringify({
                 'filename': file.name,
                 'key': file.key,
-                'bitcoin_id': this.props.createBlobRoutine.pieceId
+                'piece_id': this.props.createBlobRoutine.pieceId
             })
         })
         .then((res) => {

sass/ascribe_accordion_list.scss

@@ -19,7 +19,7 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     border-right: 0.1em solid rgba(0,0,0,.2);
     border-top: 0.1em solid rgba(0,0,0,.2);
     border-radius: 1px;
-    border-bottom: 0.1em solid rgba(0,0,0,.2);
+    border-bottom: 0.1em solid rgba(0,0,0,0);
     .wrapper {
         &:hover{
             background-color: rgba(2, 182, 163, 0.05);
@@ -44,13 +44,14 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
                 }
         }
         h1 {
-            margin-top: .3em;
-            font-size: 2.25em;
+            margin: .1em 0 .1em 0;
+            font-size: 2.2em;
             cursor: pointer;
         }
         h3 {
-            font-size: 1.1em;
-            margin: .2em 0 0 0;
+            font-size: 1.3em;
+            margin: .2em 0 .3em 0;
+            cursor: pointer;
         }
         a {
             color: #666;
@@ -88,6 +89,7 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             }
         }
         border-left: 3px solid rgba(0,0,0,0);
+        border-top: 1px solid rgba(0,0,0,.1);
         border-bottom: 1px solid rgba(0,0,0,.05);
     }
     tbody {
@@ -143,9 +145,12 @@ span.ascribe-accordion-list-table-toggle {
 
 .ascribe-accordion-list-item-edition-widget {
     cursor: pointer;
-    //margin-left: 0.3em;
 
     &:hover {
-        color: $ascribe-color-full;
+        color: $ascribe-color-dark;
+    }
+    .glyphicon {
+        top: 1px !important;
+        font-size: 0.8em;
     }
 }

sass/ascribe_edition.scss

@@ -11,8 +11,8 @@
 .ascribe-edition-collapsible-wrapper > div:first-child {
     width: 100%;
     cursor: pointer;
-    background-color: #F5F5F5;
-    padding: 10px;
+    background-color: rgba(0,0,0,0);
+    padding: 0 10px 10px 0;
     margin-top: 20px;
 }
 .ascribe-edition-collapsible-wrapper > div > span {