Complete visual styling

js/components/ascribe_buttons/acl_information.js

@@ -45,7 +45,7 @@ let AclInformation = React.createClass({
                 return (
                     <p>
                         <span className="info">
-                            {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/>
+                            {replaceSubstringAtIndex(info.slice(2), 's ', ' ')}
                         </span>
                         <span className="example">
                             {example}
@@ -60,7 +60,7 @@ let AclInformation = React.createClass({
                             {title}
                         </span>
                         <span className="info">
-                            {info} <br/>
+                            {info + ' '}
                         </span>
                         <span className="example">
                             {example}
@@ -108,18 +108,19 @@ let AclInformation = React.createClass({
     },
 
     render() {
-        const { aim, buttonListSize } = this.props;
+        const { aim, buttonListSize, verbs } = this.props;
         const { isVisible } = this.state;
 
         /* Lets just fucking get this widget out... */
-        const aclInformationSize = buttonListSize - 33;
+        const aclInformationSize = buttonListSize - 30;
 
         return (
             <span >
                 {this.getButton()}
                 <div
                     style={{
-                        width: aclInformationSize > 300 ? aclInformationSize : 400
+                        width: aclInformationSize > 300 ? aclInformationSize : 400,
+                        marginLeft: verbs.length === 1 ? '.25em' : null
                     }}
                     className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}>
                     <span>{this.produceInformationBlock()}</span>

js/components/ascribe_detail/detail_property.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+
 let DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
@@ -12,20 +13,29 @@ let DetailProperty = React.createClass({
         separator: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
-        ellipsis: React.PropTypes.bool
+        ellipsis: React.PropTypes.bool,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     getDefaultProps() {
         return {
             separator: '',
-            labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height col-bottom ascribe-detail-property-label',
+            labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height ascribe-detail-property-label',
             valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10 col-xs-height col-bottom ascribe-detail-property-value'
         };
     },
 
     render() {
-        let value = this.props.value;
         let styles = {};
+        const { labelClassName,
+                label,
+                separator,
+                valueClassName,
+                children,
+                value } = this.props;
 
         if(this.props.ellipsis) {
             styles = {
@@ -35,30 +45,16 @@ let DetailProperty = React.createClass({
             };
         }
 
-
-        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"
-                        style={styles}>
-                        { this.props.children }
-                    </div>
-                </div>);
-        }
         return (
             <div className="row ascribe-detail-property">
                 <div className="row-same-height">
-                    <div className={this.props.labelClassName}>
-                        { this.props.label } { this.props.separator}
+                    <div className={labelClassName}>
+                        {label} {separator}
                     </div>
                     <div
-                        className={this.props.valueClassName}
+                        className={valueClassName}
                         style={styles}>
-                        {value}
+                        {children || value}
                     </div>
                 </div>
             </div>

js/components/ascribe_detail/edition.js

@@ -211,30 +211,13 @@ let EditionSummary = React.createClass({
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
                 {this.getStatus()}
-                <div className="row ascribe-detail-property">
-                    <div className="row-same-height">
-                        <div className={this.props.labelClassName}>
-                            { this.props.label } { this.props.separator}
-                        </div>
-                        <div
-                            className={this.props.valueClassName}
-                            style={styles}>
-                            {value}
-                        </div>
-                    </div>
-                </div>
-                <div className="row">
-                    <div className="col-xs-4  no-padding">
-                        Actions
-                    </div>
-                    <div
-                        className="col-xs-8">
-                        <EditionActionPanel
-                            edition={edition}
-                            currentUser={currentUser}
-                            handleSuccess={this.handleSuccess} />
-                    </div>
-                </div>);
+                <EditionDetailProperty
+                    label={getLangText('ACTIONS')}>
+                    <EditionActionPanel
+                        edition={edition}
+                        currentUser={currentUser}
+                        handleSuccess={this.handleSuccess} />
+                </EditionDetailProperty>
                 <hr/>
             </div>
         );

js/components/ascribe_detail/piece_container.js

@@ -190,28 +190,29 @@ let PieceContainer = React.createClass({
                     currentUser={this.state.currentUser}
                     handleSuccess={this.loadPiece}
                     notifications={this.state.piece.notifications}/>);
-        }
-        else {
+        } else {
             return (
-                <AclButtonList
-                    className="ascribe-button-list"
-                    availableAcls={this.state.piece.acl}
-                    editions={this.state.piece}
-                    handleSuccess={this.loadPiece}>
-                        <CreateEditionsButton
-                            label={getLangText('CREATE EDITIONS')}
-                            className="btn-sm"
-                            piece={this.state.piece}
-                            toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
-                            onPollingSuccess={this.handlePollingSuccess}/>
-                        <DeleteButton
-                            handleSuccess={this.handleDeleteSuccess}
-                            piece={this.state.piece}/>
-                        <AclInformation
-                            aim="button"
-                            verbs={['acl_share', 'acl_create_editions', 'acl_loan', 'acl_delete', 'acl_consign']}
-                            aclObject={this.state.piece.acl}/>
-                </AclButtonList>
+                <DetailProperty label={getLangText('ACTIONS')}>
+                    <AclButtonList
+                        className="ascribe-button-list"
+                        availableAcls={this.state.piece.acl}
+                        editions={this.state.piece}
+                        handleSuccess={this.loadPiece}>
+                            <CreateEditionsButton
+                                label={getLangText('CREATE EDITIONS')}
+                                className="btn-sm"
+                                piece={this.state.piece}
+                                toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
+                                onPollingSuccess={this.handlePollingSuccess}/>
+                            <DeleteButton
+                                handleSuccess={this.handleDeleteSuccess}
+                                piece={this.state.piece}/>
+                            <AclInformation
+                                aim="button"
+                                verbs={['acl_share', 'acl_create_editions', 'acl_loan', 'acl_delete', 'acl_consign']}
+                                aclObject={this.state.piece.acl}/>
+                    </AclButtonList>
+                </DetailProperty>
             );
         }
     },

js/components/ascribe_forms/form_loan.js

@@ -233,7 +233,6 @@ let LoanForm = React.createClass({
                     <h3>{this.props.loanHeading}</h3>
                 </div>
                 <AclInformation aim={'form'} verbs={['acl_loan']}/>
-                <br></br>
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}

sass/ascribe_acl_information.scss

@@ -3,14 +3,12 @@
     padding: .5em .5em .5em 0;
 
     p {
-        margin: .5em .5em .5em 0;
-        line-height: 15px;
-        align: justify;
+        margin:  0 .5em 1em 0;
+        line-height: 1.2;
     }
 
     span {
         font-size: 11px;
-        line-height: 3px;
     }
 
     .title {

sass/ascribe_edition.scss

@@ -18,7 +18,3 @@
     display: table-cell;
     vertical-align: middle;
 }
-
-.ascribe-button-list {
-    margin-top: 1em;
-}

sass/lib/buttons.scss

@@ -4,5 +4,6 @@
 
     &:hover, &:active, &:focus {
         color:#424242;
+        outline: none;
     }
 }

sass/main.scss

@@ -158,6 +158,7 @@ hr {
 }
 
 .ascribe-detail-property-label {
+    vertical-align: top;
     font-size: .8em;
 }