ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor table to bootstrap table

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={this.props.className}>
<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} />
</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>
<h3>{getLangText('by %s', this.props.content.artist_name)}</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 (
<div className={this.props.className}>
<Table
columnList={this.props.columnList}
itemList={this.props.itemList}
changeOrder={this.props.changeOrder}
orderBy={this.props.orderBy}
orderAsc={this.props.orderAsc}>
className="ascribe-table"
columnList={this.props.columnList}
itemList={this.props.itemList}
changeOrder={this.props.changeOrder}
orderBy={this.props.orderBy}
orderAsc={this.props.orderAsc}>
{this.props.itemList.map((item, i) => {
return (
<TableItem

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

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

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

@ -18,8 +18,8 @@ let TableHeader = React.createClass({
render() {
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
<div className="row">
<thead>
<tr>
{this.props.columnList.map((val, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
@ -39,8 +39,8 @@ let TableHeader = React.createClass({
</TableHeaderItem>
);
})}
</div>
</div>
</tr>
</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.columnName === this.props.orderBy) {
return (
<div
className={this.props.columnClasses + ' ascribe-table-header-column'}
<th
className={'ascribe-table-header-column'}
onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
</div>
</th>
);
} else {
return (
<div
className={this.props.columnClasses + ' ascribe-table-header-column'}
<th
className={'ascribe-table-header-column'}
onClick={this.changeOrder}>
<span>{this.props.displayName}</span>
</div>
</th>
);
}
} else {
return (
<div className={this.props.columnClasses + ' ascribe-table-header-column'}>
<th className={'ascribe-table-header-column'}>
<span>
{this.props.displayName}
</span>
</div>
</th>
);
}
}

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

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

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

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

21
sass/main.scss
View File

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