1
0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00

Refactor and restyle

This commit is contained in:
vrde 2015-06-04 16:15:59 +02:00
parent d44cf295f0
commit 13caad7794
4 changed files with 36 additions and 13 deletions

View File

@ -15,7 +15,7 @@ import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
let Image = React.createClass({ let Image = React.createClass({
render() { render() {
return (<img className="img-responsive" src={this.props.preview} />); return (<img src={this.props.preview} />);
} }
}); });
@ -64,7 +64,7 @@ let resourceMap = {
'video': Video 'video': Video
} }
let ResourceViewer = React.createClass({ let MediaPlayer = React.createClass({
propTypes: { propTypes: {
mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired, mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired,
preview: React.PropTypes.string.isRequired, preview: React.PropTypes.string.isRequired,
@ -75,7 +75,7 @@ let ResourceViewer = React.createClass({
let Component = resourceMap[this.props.mimetype] || Image; let Component = resourceMap[this.props.mimetype] || Image;
return ( return (
<div className="media"> <div className="ascribe-media-player">
<Component preview={this.props.preview} <Component preview={this.props.preview}
url={this.props.url} url={this.props.url}
extraData={this.props.extraData} /> extraData={this.props.extraData} />
@ -84,4 +84,4 @@ let ResourceViewer = React.createClass({
} }
}); });
export default ResourceViewer; export default MediaPlayer;

View File

@ -1,5 +1,10 @@
import React from 'react'; import React from 'react';
import ResourceViewer from './ascribe_media/resource_viewer'; import MediaPlayer from './ascribe_media/media_player';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import EditionActions from '../actions/edition_actions' import EditionActions from '../actions/edition_actions'
import AclButton from './acl_button' import AclButton from './acl_button'
@ -18,19 +23,23 @@ let Edition = React.createClass({
} }
return ( return (
<div> <Row>
<div className="col-md-7"> <Col md={7}>
<ResourceViewer mimetype={mimetype} <MediaPlayer mimetype={mimetype}
preview={thumbnail} preview={thumbnail}
url={this.props.edition.digital_work.url} url={this.props.edition.digital_work.url}
extraData={extraData} /> extraData={extraData} />
</div> <p className="text-center">
<div className="col-md-5"> <Button bsSize="xsmall" href={this.props.edition.digital_work.url} target="_blank">
Download <Glyphicon glyph="cloud-download" />
</Button>
</p>
</Col>
<Col md={5}>
<EditionHeader edition={this.props.edition}/> <EditionHeader edition={this.props.edition}/>
<EditionDetails edition={this.props.edition} currentUser={ this.props.currentUser }/> <EditionDetails edition={this.props.edition} currentUser={ this.props.currentUser }/>
</div> </Col>
</Row>
</div>
); );
} }
}); });

View File

@ -0,0 +1,13 @@
.ascribe-media-player {
margin-bottom: 1em;
video {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
}

View File

@ -9,6 +9,7 @@
@import 'ascribe_accordion_list'; @import 'ascribe_accordion_list';
@import 'ascribe_piece_list_bulk_modal'; @import 'ascribe_piece_list_bulk_modal';
@import 'ascribe_piece_list_toolbar'; @import 'ascribe_piece_list_toolbar';
@import 'ascribe_media_player';
@import 'offset_right'; @import 'offset_right';
.hidden { .hidden {