Complete visual styling

2024-12-22 09:23:13 +01:00 · 2015-10-23 10:37:23 +02:00 · 2015-10-23 10:37:23 +02:00 · cd3c8b8f6e
commit cd3c8b8f6e
parent e8a9cd89a4
9 changed files with 57 additions and 81 deletions
--- a/js/components/ascribe_buttons/acl_information.js
+++ b/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>
--- a/js/components/ascribe_detail/detail_property.js
+++ b/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>
--- a/js/components/ascribe_detail/edition.js
+++ b/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>
        );
--- a/js/components/ascribe_detail/piece_container.js
+++ b/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>
            );
        }
    },
--- a/js/components/ascribe_forms/form_loan.js
+++ b/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')}
--- a/sass/ascribe_acl_information.scss
+++ b/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 {
--- a/sass/ascribe_edition.scss
+++ b/sass/ascribe_edition.scss
@ -17,8 +17,4 @@
    border: 1px solid #CCC;
    display: table-cell;
    vertical-align: middle;
-}
-
-.ascribe-button-list {
-    margin-top: 1em;
-}
+}
--- a/sass/lib/buttons.scss
+++ b/sass/lib/buttons.scss
@ -4,5 +4,6 @@

    &:hover, &:active, &:focus {
        color:#424242;
+        outline: none;
    }
 }
--- a/sass/main.scss
+++ b/sass/main.scss
@ -158,6 +158,7 @@ hr {
 }

 .ascribe-detail-property-label {
+    vertical-align: top;
    font-size: .8em;
 }