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:
parent
d44cf295f0
commit
13caad7794
@ -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;
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
13
sass/ascribe_media_player.scss
Normal file
13
sass/ascribe_media_player.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.ascribe-media-player {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user