ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

piece_detail thumb + header

Browse Source
This commit is contained in:
ddejongh 2015-05-26 13:33:35 +02:00
parent 54866cda84
commit f564e909f7
9 changed files with 205 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/main.css
View File

@ -56,3 +56,74 @@
background-color: rgba(2, 182, 163, 0.5);
border-color: rgba(2, 182, 163, 0.5);
}
.ascribe-detail-header{
margin-top: 2em;
}
.ascribe-detail-header > div{
padding-bottom: 0.4em;
}
.ascribe-detail-title {
font-size: 2em;
margin-bottom: -0.2em;
}
/* columns of same height styles */
/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
@media (min-width: 768px) {
.col-sm-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 992px) {
.col-md-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 1200px) {
.col-lg-height {
display: table-cell;
float: none !important;
}
}
/* vertical alignment styles */
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
}

2
js/actions/edition_list_actions.js
View File

@ -19,6 +19,6 @@ class EditionListActions {
console.log(err);
});
}
};
}
export default alt.createActions(EditionListActions);

2
js/actions/piece_actions.js
View File

@ -18,6 +18,6 @@ class PieceActions {
console.log(err);
});
}
};
}
export default alt.createActions(PieceActions);

25
js/components/ascribe_media/image_viewer.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
/**
* This is the component that implements display-specific functionality
*/
let ImageViewer = React.createClass({
propTypes: {
thumbnail: React.PropTypes.string.isRequired
},
render() {
let thumbnail = <img className="img-responsive" src={this.props.thumbnail}/>;
let aligner = <span className="vcenter"></span>;
return (
<div>
<div>
{aligner}
{thumbnail}
</div>
</div>
);
}
});
export default ImageViewer;

96
js/components/piece.js
View File

@ -1,18 +1,106 @@
import React from 'react';
import ImageViewer from './ascribe_media/image_viewer';
/**
* This is the component that implements display-specific functionality
*/
let Piece = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired
},
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() {
return (
<p>Title: {this.props.title}</p>
<div>
<div className="col-md-7">
<ImageViewer thumbnail={this.props.piece.thumbnail}/>
</div>
<div className="col-md-5">
<PieceHeader piece={this.props.piece}/>
<PieceEdition piece={this.props.piece}/>
</div>
</div>
);
}
});
let PieceHeader = React.createClass({
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() {
return (
<div className="ascribe-detail-header">
<div className="row">
<div className="row-same-height">
<div className="col-md-2 col-xs-height col-bottom">
<div>TITLE:</div>
</div>
<div className="col-md-10 col-xs-height col-bottom">
<div className="ascribe-detail-title">{this.props.piece.title}</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-2">
<div>BY:</div>
</div>
<div className="col-md-10">
<div>{this.props.piece.artist_name}</div>
</div>
</div>
<div className="row">
<div className="col-md-2">
<div>DATE:</div>
</div>
<div className="col-md-10">
<div>{ this.props.piece.date_created.slice(0,4) }</div>
</div>
</div>
<hr/>
</div>
);
}
});
let PieceEdition = React.createClass({
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() {
return (
<div className="ascribe-detail-header">
<div className="row">
<div className="col-md-2">
<div>EDITION:</div>
</div>
<div className="col-md-10">
<div>{ this.props.piece.edition_number } of {this.props.piece.num_editions}</div>
</div>
</div>
<div className="row">
<div className="col-md-2">
<div>ID:</div>
</div>
<div className="col-md-10">
<div>{ this.props.piece.bitcoin_id }</div>
</div>
</div>
<div className="row">
<div className="col-md-2">
<div>OWNER:</div>
</div>
<div className="col-md-10">
<div>{ this.props.piece.owner }</div>
</div>
</div>
<hr/>
</div>
);
}
});
export default Piece;

2
js/components/piece_container.js
View File

@ -31,7 +31,7 @@ let PieceContainer = React.createClass({
if('title' in this.state.piece) {
return (
<Piece title={this.state.piece.title}></Piece>
<Piece piece={this.state.piece}></Piece>
);
} else {
return (

2
js/fetchers/piece_fetcher.js
View File

@ -11,7 +11,7 @@ let PieceFetcher = {
*
*/
fetchOne(pieceId) {
return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/', {
return fetch(AppConstants.baseUrl + 'editions/' + pieceId + '/', {
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
}

4
js/stores/piece_store.js
View File

@ -4,13 +4,13 @@ import PieceAction from '../actions/piece_actions';
class PieceStore {
constructor() {
this.piece = {}
this.piece = {};
this.bindActions(PieceAction);
}
onUpdatePiece(piece) {
this.piece = piece;
}
};
}
export default alt.createStore(PieceStore);

1
js/utils/general_utils.js
View File

@ -35,6 +35,7 @@ let GeneralUtils = {
l.forEach((num) => sum += parseFloat(num) || 0);
return sum;
}
};
export default GeneralUtils;