reached the spec with dirty tricks

img/tip.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
+    <title>tip</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="tip" sketch:type="MSLayerGroup" fill="#4A4A4A">
+            <path d="M6.49980487,0 C2.91004973,0 0,2.91030991 0,6.50006504 C0,10.0900804 2.91004973,13.0001301 6.49980487,13.0001301 C10.0898202,13.0001301 13,10.0900804 13,6.50006504 C13,2.91030991 10.0898202,0 6.49980487,0 L6.49980487,0 Z M7.20565779,10.6485445 C7.20565779,10.7801927 7.09807571,10.8879049 6.96629742,10.8879049 L5.96228473,10.8879049 C5.83050644,10.8879049 5.72292436,10.7801927 5.72292436,10.6485445 L5.72292436,9.74391843 C5.72292436,9.61240031 5.83063653,9.50455805 5.96228473,9.50455805 L6.96629742,9.50455805 C7.09807571,9.50455805 7.20565779,9.61240031 7.20565779,9.74391843 L7.20565779,10.6485445 L7.20565779,10.6485445 Z M9.13719192,5.40251969 C9.077612,5.60506539 8.99812875,5.77951227 8.89900233,5.92651076 C8.79974583,6.07337916 8.68670009,6.20450702 8.55973502,6.31950407 C8.43263987,6.43450112 8.3056748,6.54767694 8.17883982,6.65864129 C8.02793872,6.78573644 7.88887555,6.90866881 7.76217065,7.02782865 C7.63494541,7.1468584 7.52372089,7.27993756 7.42875727,7.42654579 C7.33340338,7.57341419 7.25990414,7.74630002 7.20851971,7.94442276 C7.1752174,8.07229844 7.15544415,8.21825623 7.14087439,8.38190588 C7.12006044,8.61554241 6.99244494,8.67069937 6.88733451,8.67069937 L6.10277886,8.67069937 C5.96111395,8.67069937 5.84845847,8.55479171 5.85223099,8.41325688 C5.85223099,8.41325688 5.86302823,8.02598741 5.89893228,7.78376512 C5.93444608,7.54180301 5.9919446,7.32950077 6.07168803,7.1468584 C6.15078102,6.9644762 6.24795613,6.80368847 6.36321335,6.6646253 C6.47808031,6.5258223 6.61506209,6.38897061 6.77389851,6.25381005 C6.90073349,6.14284571 7.02184464,6.0395565 7.13723195,5.94446279 C7.25222899,5.8491089 7.35538811,5.74386839 7.44657921,5.62874126 C7.53764022,5.51374421 7.60918816,5.38482783 7.66096285,5.24186205 C7.71247736,5.09902635 7.73810453,4.92848208 7.73810453,4.72996908 C7.73810453,4.49164941 7.69660673,4.28754265 7.61309077,4.11660813 C7.53009516,3.94606386 7.42875727,3.80921217 7.30972752,3.70579288 C7.19056768,3.60289394 7.06347253,3.52744339 6.92857214,3.4797014 C6.79354167,3.4320895 6.67451192,3.40828355 6.57135281,3.40828355 C6.07897291,3.40828355 5.71602974,3.56907128 5.48187285,3.89051665 C5.29831987,4.14262556 5.20244564,4.46355058 5.14702851,4.84769796 C5.10748201,5.12218186 4.94734472,5.18228213 4.8502997,5.18228213 L4.03101078,5.18228213 C3.88921577,5.18228213 3.78241422,5.06663465 3.79360171,4.92535999 C3.79360171,4.92535999 3.83887204,4.34881371 3.96973973,3.99159437 C4.10073749,3.63437503 4.29131518,3.32906047 4.54147279,3.07500025 C4.79137022,2.8212002 5.09304234,2.62450842 5.44622897,2.48557534 C5.79941561,2.34677234 6.19436022,2.27730579 6.63106281,2.27730579 C6.99608738,2.27730579 7.3352246,2.3309017 7.64912491,2.43809352 C7.96263497,2.54528534 8.23659852,2.69995897 8.47062532,2.9022445 C8.70465212,3.10479021 8.88911571,3.35676904 9.02414618,3.65844116 C9.15904656,3.96024336 9.22669188,4.30133189 9.22669188,4.68248727 C9.2265618,4.95996318 9.19664175,5.19997398 9.13719192,5.40251969 L9.13719192,5.40251969 Z" id="Shape-Copy-2" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

js/components/ascribe_buttons/acl_button_list.js

@@ -6,6 +6,7 @@ import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
 import AclButton from '../ascribe_buttons/acl_button';
+import {getLangText} from '../../utils/lang_utils';
 
 let AclButtonList = React.createClass({
     propTypes: {
@@ -15,13 +16,25 @@ let AclButtonList = React.createClass({
             React.PropTypes.array
         ]),
         availableAcls: React.PropTypes.object,
+        actionsLabelStyle: React.PropTypes.object,
+        buttonsStyle: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ])
     },
-
+    getDefaultProps(){
+        return {
+            actionsLabelStyle: {
+                float: 'left',
+                fontSize: '11.2px'
+                },
+            buttonsStyle: {
+                marginLeft: '0.25cm'
+            }
+        };
+    },
     getInitialState() {
         return UserStore.getState();
     },
@@ -42,37 +55,42 @@ let AclButtonList = React.createClass({
     render() {
         return (
             <div className={this.props.className}>
-                <AclButton
-                    availableAcls={this.props.availableAcls}
-                    action="acl_transfer"
-                    pieceOrEditions={this.props.editions}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.props.handleSuccess}/>
-                <AclButton
-                    availableAcls={this.props.availableAcls}
-                    action="acl_consign"
-                    pieceOrEditions={this.props.editions}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.props.handleSuccess} />
-                <AclButton
-                    availableAcls={this.props.availableAcls}
-                    action="acl_unconsign"
-                    pieceOrEditions={this.props.editions}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.props.handleSuccess} />
-                <AclButton
-                    availableAcls={this.props.availableAcls}
-                    action="acl_loan"
-                    pieceOrEditions={this.props.editions}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.props.handleSuccess} />
-                <AclButton
-                    availableAcls={this.props.availableAcls}
-                    action="acl_share"
-                    pieceOrEditions={this.props.editions}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.props.handleSuccess} />
-                {this.props.children}
+                <span style={this.props.actionsLabelStyle}>
+                    {getLangText('ACTIONS')}
+                </span>
+                <span style={this.props.buttonsStyle}>
+                    <AclButton
+                        availableAcls={this.props.availableAcls}
+                        action="acl_transfer"
+                        pieceOrEditions={this.props.editions}
+                        currentUser={this.state.currentUser}
+                        handleSuccess={this.props.handleSuccess}/>
+                    <AclButton
+                        availableAcls={this.props.availableAcls}
+                        action="acl_consign"
+                        pieceOrEditions={this.props.editions}
+                        currentUser={this.state.currentUser}
+                        handleSuccess={this.props.handleSuccess} />
+                    <AclButton
+                        availableAcls={this.props.availableAcls}
+                        action="acl_unconsign"
+                        pieceOrEditions={this.props.editions}
+                        currentUser={this.state.currentUser}
+                        handleSuccess={this.props.handleSuccess} />
+                    <AclButton
+                        availableAcls={this.props.availableAcls}
+                        action="acl_loan"
+                        pieceOrEditions={this.props.editions}
+                        currentUser={this.state.currentUser}
+                        handleSuccess={this.props.handleSuccess} />
+                    <AclButton
+                        availableAcls={this.props.availableAcls}
+                        action="acl_share"
+                        pieceOrEditions={this.props.editions}
+                        currentUser={this.state.currentUser}
+                        handleSuccess={this.props.handleSuccess} />
+                    {this.props.children}
+                </span>
             </div>
         );
     }

js/components/ascribe_buttons/acl_information_button.js

@@ -6,38 +6,38 @@
 import React from 'react';
 import DropdownButton from 'react-bootstrap/lib/Button';
 
-let aclInformationButton = React.createClass({
+let AclInformationButton = React.createClass({
     getDefaultProps: function() {
         let rows = [];
         let titleStyle = {
             color: '#02B6A3',
-            fontSize: '14px'
-        };
-
-        let exampleStyle = {
-            color: '#B2B2B2',
-            fontSize: '14px'
+            fontSize: '11px'
         };
 
         let infoStyle = {
             color: '#333333',
-
-            fontSize: '14px'
+            fontSize: '11px'
         };
 
+        let exampleStyle = {
+            color: '#B2B2B2',
+            fontSize: '11px'
+        };
+
+
         let titleList = ['TRANSFER', 'CONSIGN', 'LOAN', 'SHARE', 'DELETE'];
 
         let infoSentenceList = [
-            '- Changes ownership of an Edition. As with a physical piece of work, ' +
+            ' - Changes ownership of an Edition. As with a physical piece of work, ' +
             'transferring ownership of an Edition does not transfer copyright in the Work.',
 
-            '- Lets someone represent you in dealing with the work, under the terms you agree to.',
+            ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
 
-            '- Lets someone use or put the Work on display for a limited amount of time.',
+            ' - Lets someone use or put the Work on display for a limited amount of time.',
 
-            '- Lets someone view the Work or Edition, but does not give rights to publish or display it.',
+            ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
 
-            '- Removes the Work from your Wallet. Note that the previous registration and transfer ' +
+            ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
             'history will still exist on the blockchain and cannot be deleted.'];
 
         let exampleSentenceList = [
@@ -51,7 +51,9 @@ let aclInformationButton = React.createClass({
             '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
 
             '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'];
+
         console.log('Now will initialize the rows prop inside default props');
+
         let createJSXTextSnippet = function(title, info, example){
             console.log('creating text snippets');
             return (<p> <span style={titleStyle}> {title} </span>
@@ -64,7 +66,21 @@ let aclInformationButton = React.createClass({
                         titleStyle, infoStyle, exampleStyle));
         }
         return {
-            rows: rows
+            rows: rows,
+            dropdownButtonStyle: {
+                background: 'none',
+                color: 'black',
+                padding: 0,
+                border: 'none'
+            },
+            dropdownListStyle: {
+                textAlign: 'left',
+                border: '1px solid #02B6A3',
+                borderTop: 'none',
+                borderBottom: 'none',
+                float: 'right',
+                width: '80.8%'
+            }
         };
     },
     getInitialState: function(){
@@ -87,20 +103,18 @@ let aclInformationButton = React.createClass({
     render: function () {
         console.log('will start rendering');
         return (
-            <div className={'dropdown-container' + (this.state.isVisible ? ' show' : '')}>
-                <div className={'dropdown-display' +
+            <span>
+                <DropdownButton style={this.props.dropdownButtonStyle} className={'glyphicon glyphicon-question-sign' +
                         (this.state.isVisible ? ' clicked' : '')} onClick={this.show}>
                     {console.log(this.state.isVisible)}
-                    ?
+                </DropdownButton>
+                <p></p>
+                <div style = {this.props.dropdownListStyle}>
+                    {this.showInformation()}
                 </div>
-                <div className='dropdown-list'>
-                    <div>
-                        {this.showInformation()}
-                    </div>
-                </div>
-            </div>
+            </span>
         );
     }
 });
 
-export default aclInformationButton;
+export default AclInformationButton;

js/components/ascribe_detail/edition.js

@@ -175,7 +175,6 @@ let Edition = React.createClass({
                             url={ApiUrls.note_public_edition}
                             currentUser={this.state.currentUser}/>
                     </CollapsibleParagraph>
-
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
                         show={this.props.edition.acl.acl_edit
@@ -188,7 +187,6 @@ let Edition = React.createClass({
                             otherData={this.props.edition.other_data}
                             handleSuccess={this.props.loadEdition}/>
                     </CollapsibleParagraph>
-
                     <CollapsibleParagraph
                         title={getLangText('SPOOL Details')}>
                         <SpoolDetails
@@ -270,7 +268,7 @@ let EditionSummary = React.createClass({
             }
             actions = (
                 <Row>
-                    <Col md={12}>
+                    <Col md={11}>
                         <AclButtonList
                             className="text-center ascribe-button-list"
                             availableAcls={this.props.edition.acl}
@@ -280,8 +278,8 @@ let EditionSummary = React.createClass({
                             <DeleteButton
                                 handleSuccess={this.props.handleDeleteSuccess}
                                 editions={[this.props.edition]}/>
-                            <AclInformationButton/>
                             {unconsignRequestButton}
+                            <AclInformationButton/>
                         </AclButtonList>
                     </Col>
                 </Row>);

sass/main.scss

@@ -212,6 +212,7 @@ hr {
         border: 1px solid $ascribe-brand-danger;
     }
 }
+
 .btn-ascribe {
     border: 1px solid #444;
     line-height: 2em;
@@ -293,6 +294,10 @@ hr {
     height: 13em !important;
 }
 
+.textarea-ascribe-info {
+    text-align: left;
+}
+
 .input-checkbox-ascribe {
     text-align: left;
     line-height: 1.6;
@@ -395,10 +400,12 @@ hr {
 0% { -o-transform: rotate(0deg);}
 100% { -o-transform: rotate(360deg);}
 }
+
 @-ms-keyframes spin {
 0% { -ms-transform: rotate(0deg);}
 100% { -ms-transform: rotate(360deg);}
 }
+
 @-keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg);}