diff --git a/css/main.css b/css/main.css index fb8a4cf4..b2f2393a 100644 --- a/css/main.css +++ b/css/main.css @@ -13,16 +13,20 @@ .ascribe-table-header-column { display: table; - font-weight: bold; height:4em; } .ascribe-table-header-column > span { display:table-cell; vertical-align: middle; - font-family: 'mercury_light'; + font-family: 'Source Sans Pro'; + font-weight: 600; color: rgba(2, 182, 163, 1); - font-size: 1.25em; + font-size: 1.4em; +} + +.ascribe-table-header-column > span > .glyphicon { + font-size: .6em; } .ascribe-table-item:nth-child(even) { @@ -35,6 +39,8 @@ .ascribe-table-item-column { display: table; + font-family: 'Source Sans Pro'; + font-size: 1.2em; height:4em; } diff --git a/index.html b/index.html index 9c8665a9..824eeaee 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - +
diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 7d4f7c4d..97cc5901 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -9,8 +9,8 @@ class PieceListActions { ); } - fetchPieceList() { - PieceListFetcher.fetch(1, 10) + fetchList(page, pageSize, search, ordering) { + PieceListFetcher.fetch(page, pageSize, search, ordering) .then((res) => { this.actions.updatePieceList(res.pieces); }) diff --git a/js/components/piece_list.js b/js/components/piece_list.js index b141a3c2..80284c51 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -15,7 +15,7 @@ let Link = Router.Link; let PieceList = React.createClass({ componentDidMount() { - PieceListActions.fetchPieceList(); + PieceListActions.fetchList(1, 10); }, render() { @@ -26,22 +26,26 @@ let PieceList = React.createClass({ 'thumbnail': { 'displayName': '', 'displayType': TableItemImg, - 'rowWidth': 2 + 'rowWidth': 2, + 'canBeOrdered': false }, 'artist_name': { 'displayName': 'Artist', 'displayType': TableItemText, - 'rowWidth': 5 + 'rowWidth': 4, + 'canBeOrdered': true }, 'title': { 'displayName': 'Title', 'displayType': TableItemText, - 'rowWidth': 5 + 'rowWidth': 4, + 'canBeOrdered': true } }; + return ( - - + +
); } diff --git a/js/components/table.js b/js/components/table.js index 625d9487..3b155303 100644 --- a/js/components/table.js +++ b/js/components/table.js @@ -14,7 +14,7 @@ let Table = React.createClass({ return (
- + {this.props.itemList.map((item, i) => { return ( diff --git a/js/components/table_header.js b/js/components/table_header.js index 59fcb554..d17405d4 100644 --- a/js/components/table_header.js +++ b/js/components/table_header.js @@ -7,13 +7,44 @@ import GeneralUtils from '../utils/general_utils'; let TableHeader = React.createClass({ mixins: [TableColumnMixin], propTypes: { - columnMap: React.PropTypes.object.isRequired + columnMap: React.PropTypes.object.isRequired, + itemList: React.PropTypes.array.isRequired, + fetchList: React.PropTypes.func.isRequired + }, + + sortIndex(i) { + this.props.fetchList(1, 10, null, '-' + Object.keys(this.props.columnMap)[i]); }, render() { let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap); + let calcHeaderText = (val, i, columnClass) => { + let s = ""; + + if(columnMapValuesList[i].canBeOrdered) { + + let boundClick = this.sortIndex.bind(this, i) + return ( +
+ + + {val.displayName} + +
+ ); + } else { + return ( +
+ + {val.displayName} + +
+ ); + } + }; + return (
@@ -22,10 +53,8 @@ let TableHeader = React.createClass({ let columnClass = this.calcColumnClasses(this.props.columnMap, i); return ( -
- - {val.displayName} - +
+ {calcHeaderText(val, i, columnClass)}
); })}