Fix alignment for AclInformationButton

js/components/ascribe_buttons/acl_button_list.js

@@ -24,17 +24,7 @@ let AclButtonList = React.createClass({
             React.PropTypes.element
         ])
     },
-    getDefaultProps(){
+
-        return {
-            actionsLabelStyle: {
-                float: 'left',
-                fontSize: '11.2px'
-                },
-            buttonsStyle: {
-                marginLeft: '0.25cm'
-            }
-        };
-    },
     getInitialState() {
         return UserStore.getState();
     },
@@ -55,9 +45,6 @@ let AclButtonList = React.createClass({
     render() {
         return (
             <div className={this.props.className}>
-                <span style={this.props.actionsLabelStyle}>
-                    {getLangText('ACTIONS')}
-                </span>
                 <span style={this.props.buttonsStyle}>
                     <AclButton
                         availableAcls={this.props.availableAcls}

js/components/ascribe_buttons/acl_information_button.js

@@ -4,8 +4,12 @@
 'use strict';
 
 import React from 'react';
+import classnames from 'classnames'; 
+
 import DropdownButton from 'react-bootstrap/lib/Button';
 
+
+
 let AclInformationButton = React.createClass({
     getDefaultProps: function() {
         let rows = [];
@@ -75,10 +79,6 @@ let AclInformationButton = React.createClass({
             },
             dropdownListStyle: {
                 textAlign: 'left',
-                border: '1px solid #02B6A3',
-                borderTop: 'none',
-                borderBottom: 'none',
-                float: 'right',
                 width: '80.8%'
             }
         };
@@ -101,15 +101,14 @@ let AclInformationButton = React.createClass({
         }
     },
     render: function () {
-        console.log('will start rendering');
         return (
             <span>
-                <DropdownButton style={this.props.dropdownButtonStyle} className={'glyphicon glyphicon-question-sign' +
+                <DropdownButton
-                        (this.state.isVisible ? ' clicked' : '')} onClick={this.show}>
+                    style={this.props.dropdownButtonStyle}
-                    {console.log(this.state.isVisible)}
+                    className="glyphicon glyphicon-question-sign" onClick={this.show} />
-                </DropdownButton>
+                <div
-                <p></p>
+                    style={this.props.dropdownListStyle}
-                <div style = {this.props.dropdownListStyle}>
+                    className={classnames({'hidden': !this.state.isVisible})}>
                     {this.showInformation()}
                 </div>
             </span>

js/components/ascribe_detail/edition.js

@@ -270,7 +270,7 @@ let EditionSummary = React.createClass({
                 <Row>
                     <Col md={11}>
                         <AclButtonList
-                            className="text-center ascribe-button-list"
+                            className="ascribe-button-list ascribe-button-list-detail"
                             availableAcls={this.props.edition.acl}
                             editions={[this.props.edition]}
                             handleSuccess={this.props.handleSuccess}>
@@ -300,6 +300,7 @@ let EditionSummary = React.createClass({
                     label={getLangText('OWNER')}
                     value={ this.props.edition.owner } />
                 {this.getStatus()}
+                <hr />
                 {this.getActions()}
                 <hr/>
             </div>

sass/main.scss

@@ -265,6 +265,11 @@ hr {
 
 .ascribe-detail-property-label {
     font-size: 0.8em;
+    
+}
+
+.ascribe-detail-property-label.col-bottom {
+    vertical-align: top;
 }
 
 .ascribe-detail-property-value {
@@ -369,6 +374,10 @@ hr {
     margin-top: 1px;
 }
 
+.ascribe-button-list-detail {
+    margin-top:0;
+}
+
 .margin-left-2px{
     margin-left: 2px;
 }