ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

refactor table to bootstrap table

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-04 17:21:38 +02:00
parent 6aa74d6b42
commit 6f73f1ebfd
9 changed files with 47 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -18,10 +18,10 @@ let AccordionListItem = React.createClass({
<div className="row"> <div className="row">
<div className={this.props.className}> <div className={this.props.className}>
<div className="wrapper"> <div className="wrapper">
<div className="col-md-4 thumbnail-wrapper"> <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4 thumbnail-wrapper">
<img src={this.props.content.thumbnail} /> <img src={this.props.content.thumbnail} />
</div> </div>
<div className="col-md-8"> <div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h1>{this.props.content.title}</h1> <h1>{this.props.content.title}</h1>
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3> <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
<h3>{this.props.content.date_created.split('-')[0]}</h3> <h3>{this.props.content.date_created.split('-')[0]}</h3>

11
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -25,11 +25,12 @@ let AccordionListItemTable = React.createClass({
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<Table <Table
columnList={this.props.columnList} className="ascribe-table"
itemList={this.props.itemList} columnList={this.props.columnList}
changeOrder={this.props.changeOrder} itemList={this.props.itemList}
orderBy={this.props.orderBy} changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc}> orderBy={this.props.orderBy}
orderAsc={this.props.orderAsc}>
{this.props.itemList.map((item, i) => { {this.props.itemList.map((item, i) => {
return ( return (
<TableItem <TableItem

9
js/components/ascribe_table/table.js
View File

@ -12,6 +12,7 @@ let Table = React.createClass({
changeOrder: React.PropTypes.func, changeOrder: React.PropTypes.func,
orderBy: React.PropTypes.string, orderBy: React.PropTypes.string,
orderAsc: React.PropTypes.bool, orderAsc: React.PropTypes.bool,
className: React.PropTypes.string
}, },
renderChildren() { renderChildren() {
@ -27,17 +28,17 @@ let Table = React.createClass({
render() { render() {
return ( return (
<div className="ascribe-table"> <table className={'table ' + this.props.className}>
<TableHeader <TableHeader
columnList={this.props.columnList} columnList={this.props.columnList}
itemList={this.props.itemList} itemList={this.props.itemList}
changeOrder={this.props.changeOrder} changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy} /> orderBy={this.props.orderBy} />
<div className="row"> <tbody>
{this.renderChildren()} {this.renderChildren()}
</div> </tbody>
</div> </table>
); );
} }
}); });

8
js/components/ascribe_table/table_header.js
View File

@ -18,8 +18,8 @@ let TableHeader = React.createClass({
render() { render() {
return ( return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row"> <thead>
<div className="row"> <tr>
{this.props.columnList.map((val, i) => { {this.props.columnList.map((val, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12); let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
@ -39,8 +39,8 @@ let TableHeader = React.createClass({
</TableHeaderItem> </TableHeaderItem>
); );
})} })}
</div> </tr>
</div> </thead>
); );
} }

16
js/components/ascribe_table/table_header_item.js
View File

@ -25,28 +25,28 @@ let TableHeaderItem = React.createClass({
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) { if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
if(this.props.columnName === this.props.orderBy) { if(this.props.columnName === this.props.orderBy) {
return ( return (
<div <th
className={this.props.columnClasses + ' ascribe-table-header-column'} className={'ascribe-table-header-column'}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span> <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
</div> </th>
); );
} else { } else {
return ( return (
<div <th
className={this.props.columnClasses + ' ascribe-table-header-column'} className={'ascribe-table-header-column'}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName}</span> <span>{this.props.displayName}</span>
</div> </th>
); );
} }
} else { } else {
return ( return (
<div className={this.props.columnClasses + ' ascribe-table-header-column'}> <th className={'ascribe-table-header-column'}>
<span> <span>
{this.props.displayName} {this.props.displayName}
</span> </span>
</div> </th>
); );
} }
} }

16
js/components/ascribe_table/table_item.js
View File

@ -10,22 +10,16 @@ let TableItem = React.createClass({
propTypes: { propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)), columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(ColumnModel)),
columnContent: React.PropTypes.object, columnContent: React.PropTypes.object,
onClick: React.PropTypes.func, // See: https://facebook.github.io/react/tips/expose-component-functions.html
className: React.PropTypes.string className: React.PropTypes.string
}, },
render() { render() {
return ( return (
<div className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'} <TableItemWrapper
onClick={this.props.onClick}> columnList={this.props.columnList}
<div className="row"> columnContent={this.props.columnContent}
<TableItemWrapper columnWidth={12}>
columnList={this.props.columnList} </TableItemWrapper>
columnContent={this.props.columnContent}
columnWidth={12}>
</TableItemWrapper>
</div>
</div>
); );
} }
}); });

28
js/components/ascribe_table/table_item_wrapper.js
View File

@ -16,7 +16,7 @@ let TableItemWrapper = React.createClass({
render() { render() {
return ( return (
<div> <tr>
{this.props.columnList.map((column, i) => { {this.props.columnList.map((column, i) => {
let TypeElement = column.displayType; let TypeElement = column.displayType;
@ -24,16 +24,13 @@ let TableItemWrapper = React.createClass({
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth); let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
//
if(!column.transition) { if(!column.transition) {
return ( return (
<div <td
className={columnClass + ' ascribe-table-item-column'} className={'ascribe-table-item-column'}
key={i}> key={i}>
<TypeElement {...typeElementProps} /> <TypeElement {...typeElementProps} />
</div> </td>
); );
} else { } else {
@ -44,17 +41,18 @@ let TableItemWrapper = React.createClass({
* programmatically * programmatically
*/ */
return ( return (
<Link <td key={i}>
className={columnClass + ' ascribe-table-item-column'} <Link
key={i} className={'ascribe-table-item-column'}
onClick={column.transition.callback} onClick={column.transition.callback}
{...linkProps}> {...linkProps}>
<TypeElement {...typeElementProps} /> <TypeElement {...typeElementProps} />
</Link> </Link>
</td>
); );
} }
})} })}
</div> </tr>
); );
} }
}); });

2
sass/ascribe_accordion_list.scss
View File

@ -1,4 +1,4 @@
$ascribe-accordion-list-item-height: 9em; $ascribe-accordion-list-item-height: 8em;
$ascribe-accordion-list-font: 'Source Sans Pro'; $ascribe-accordion-list-font: 'Source Sans Pro';
.ascribe-accordion-list-item { .ascribe-accordion-list-item {

21
sass/main.scss
View File

@ -37,15 +37,8 @@
float: none; float: none;
} }
.ascribe-table-header-row { .ascribe-table {
border-bottom: 2px solid #E0E0E0; margin-bottom:0;
padding: 0;
}
.ascribe-table-header-column {
display: table;
height:3em;
padding: 0;
} }
.ascribe-table-header-column > span { .ascribe-table-header-column > span {
@ -59,14 +52,6 @@
.ascribe-table-header-column > span > .glyphicon { .ascribe-table-header-column > span > .glyphicon {
font-size: .5em; font-size: .5em;
} }
/*
.ascribe-table-item:nth-child(even) {
background-color: #F5F5F5;
}*/
/*.ascribe-table-item:hover {
background-color: #EEEEEE;
}*/
.ascribe-table-item-column { .ascribe-table-item-column {
display: table; display: table;
@ -78,9 +63,9 @@
.ascribe-table-item-column > * { .ascribe-table-item-column > * {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.ascribe-table-item-selected { .ascribe-table-item-selected {