From c945fc315ba0bc91acb684158a9af7243088241d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 8 Jul 2015 14:37:20 +0200 Subject: [PATCH] various visual changes --- .../accordion_list_item.js | 1 - .../collapsible_paragraph.js | 7 +-- js/components/ascribe_forms/form.js | 11 +++- .../ascribe_forms/form_property_header.js | 19 +++++++ js/components/ascribe_media/media_player.js | 2 +- js/components/edition.js | 52 ++++++++++--------- js/components/header.js | 5 +- js/components/register_piece.js | 7 ++- sass/ascribe_edition.scss | 13 ++--- sass/ascribe_form.scss | 16 ++++++ sass/ascribe_settings.scss | 4 +- sass/ascribe_uploader.scss | 2 +- sass/main.scss | 9 ++-- 13 files changed, 98 insertions(+), 50 deletions(-) create mode 100644 js/components/ascribe_forms/form_property_header.js create mode 100644 sass/ascribe_form.scss diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index c5b6b3b3..593e84d6 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -51,7 +51,6 @@ let AccordionListItem = React.createClass({

{getLangText('by %s', this.props.content.artist_name)}

{this.props.content.date_created.split('-')[0]} - this.props. {/* {getLangText('%s license', this.props.content.license_type.code)} */} diff --git a/js/components/ascribe_collapsible/collapsible_paragraph.js b/js/components/ascribe_collapsible/collapsible_paragraph.js index d133b2f1..84e795dd 100644 --- a/js/components/ascribe_collapsible/collapsible_paragraph.js +++ b/js/components/ascribe_collapsible/collapsible_paragraph.js @@ -6,7 +6,7 @@ import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin'; import classNames from 'classnames'; -import { getLangText } from '../../utils/lang_utils.js' +import { getLangText } from '../../utils/lang_utils.js'; const CollapsibleParagraph = React.createClass({ @@ -43,13 +43,14 @@ const CollapsibleParagraph = React.createClass({ render() { let styles = this.getCollapsibleClassSet(); - let text = this.isExpanded() ? '[' + getLangText('hide') + ']' : '[' + getLangText('show') + ']'; + let text = this.isExpanded() ? '-' : '+'; + if(this.props.show) { return (
- {this.props.title}{text} + {text} {this.props.title}
{this.props.children} diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 4bda9c97..414c1aab 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -18,7 +18,8 @@ let Form = React.createClass({ children: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array - ]) + ]), + className: React.PropTypes.string }, getInitialState() { @@ -141,10 +142,16 @@ let Form = React.createClass({ }); }, render() { + let className = 'ascribe-form'; + + if(this.props.className) { + className += ' ' + this.props.className; + } + return (
{this.getErrors()} diff --git a/js/components/ascribe_forms/form_property_header.js b/js/components/ascribe_forms/form_property_header.js new file mode 100644 index 00000000..870ac763 --- /dev/null +++ b/js/components/ascribe_forms/form_property_header.js @@ -0,0 +1,19 @@ +'use strict'; + +import React from 'react'; + +let FormPropertyHeader = React.createClass({ + propTypes: { + children: React.PropTypes.arrayOf(React.PropTypes.element) + }, + + render() { + return ( +
+ {this.props.children} +
+ ); + } +}); + +export default FormPropertyHeader; \ No newline at end of file diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js index 786c40a4..3d032bef 100644 --- a/js/components/ascribe_media/media_player.js +++ b/js/components/ascribe_media/media_player.js @@ -150,7 +150,7 @@ let MediaPlayer = React.createClass({ }, render() { - if (this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) { + if (this.props.mimetype === 'video' && this.props.encodingStatus !== undefined && this.props.encodingStatus !== 100) { return (

Please be patient, the video is been encoded

diff --git a/js/components/edition.js b/js/components/edition.js index ba28373a..bfe94f89 100644 --- a/js/components/edition.js +++ b/js/components/edition.js @@ -77,29 +77,6 @@ let Edition = React.createClass({ currentUser={this.state.currentUser} edition={this.props.edition} /> - -1 || this.props.edition.public_note)}> - - - - - -1 - || Object.keys(this.props.edition.extra_data).length > 0 - || this.props.edition.other_data !== null}> - - - -1}> @@ -133,6 +110,30 @@ let Edition = React.createClass({ + + -1 || this.props.edition.public_note)}> + + + + + -1 + || Object.keys(this.props.edition.extra_data).length > 0 + || this.props.edition.other_data !== null}> + + + ); @@ -177,7 +178,7 @@ let MediaContainer = React.createClass({

}> + +

{getLangText('Register your work')}

+ {this.getLicenses()} -
diff --git a/sass/ascribe_edition.scss b/sass/ascribe_edition.scss index f1af95d2..4af3168f 100644 --- a/sass/ascribe_edition.scss +++ b/sass/ascribe_edition.scss @@ -11,13 +11,12 @@ .ascribe-edition-collapsible-wrapper > div:first-child { width: 100%; cursor: pointer; - background-color: #EEE; + background-color: #F5F5F5; padding: 10px; - border: 1px solid #CCC; - + margin-top: 20px; } .ascribe-edition-collapsible-wrapper > div > span { - font-size:1.3em; + font-size: 1.2em; margin-right: .5em; } .ascribe-edition-collapsible-wrapper > div > span:nth-child(2) { @@ -26,8 +25,6 @@ .ascribe-edition-collapible-content { width:100%; - margin-top: 1em; - } .coa-file-wrapper{ @@ -44,4 +41,8 @@ vertical-align: middle; border: 1px solid #CCC; background-color: #F8F8F8; +} + +.ascribe-button-list { + margin-top: 1em; } \ No newline at end of file diff --git a/sass/ascribe_form.scss b/sass/ascribe_form.scss new file mode 100644 index 00000000..dd4af008 --- /dev/null +++ b/sass/ascribe_form.scss @@ -0,0 +1,16 @@ +.ascribe-form-bordered { + border: 1px solid #F5F5F5; +} + +.ascribe-form-header { + padding-bottom: 0; + margin-bottom: 0; + background-color: white; +} + +.ascribe-form-header > h3 { + padding: .75em 0 .75em 1em; + margin-top: 0; + margin-bottom: 0; + color: #616161; +} \ No newline at end of file diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index 30d472ac..42587654 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -4,7 +4,7 @@ text-align: center; padding-bottom: 1em; - background-color: rgba(0,0,0,0); + background-color: white; border-left: 3px solid rgba(0,0,0,0); @@ -22,7 +22,7 @@ .is-focused { background-color: rgba(2, 182, 163, 0.05); - border-left: 3px solid rgba(2, 182, 163, 1)!important; + border-left: 3px solid rgba(2, 182, 163, 1) !important; } .is-error { diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 05d4a109..c07fccf8 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -4,7 +4,7 @@ vertical-align: middle; text-align: center; height: auto; - background-color: #FAFAFA; + background-color: #FEFEFE; overflow: auto; margin-top: 1em; diff --git a/sass/main.scss b/sass/main.scss index 49283f19..df8b4285 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -26,6 +26,7 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'offset_right'; @import 'ascribe_settings'; @import 'ascribe_slides_container'; +@import 'ascribe_form'; body { background-color: #FDFDFD; @@ -37,6 +38,10 @@ html { overflow-y: scroll; } +hr { + margin-bottom: 15px; +} + .hidden { display: none; } @@ -187,10 +192,6 @@ html { background-color: rgba(2, 182, 163, 0.5); } -.ascribe-detail-header { - margin-top: 2em; -} - .ascribe-detail-title { font-size: 2em; margin-bottom: -0.2em;