mirror of
https://github.com/ascribe/onion.git
synced 2025-01-03 10:25:08 +01:00
integrate table component into accordion list
This commit is contained in:
parent
ed66c4150e
commit
ade6ab7f26
@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
import AccordionListItemTable from './accordion_list_item_table';
|
||||
|
||||
|
||||
let AccordionListItem = React.createClass({
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
@ -8,16 +11,20 @@ let AccordionListItem = React.createClass({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={this.props.className}>
|
||||
<div className="wrapper">
|
||||
<div className="thumbnail-wrapper">
|
||||
<img src={this.props.content.thumbnail} />
|
||||
</div>
|
||||
<div className="info-wrapper">
|
||||
<h1>{this.props.content.title}</h1>
|
||||
<h3>by {this.props.content.artist_name}</h3>
|
||||
<div className="row">
|
||||
<div className={this.props.className}>
|
||||
<div className="wrapper">
|
||||
<div className="thumbnail-wrapper">
|
||||
<img src={this.props.content.thumbnail} />
|
||||
</div>
|
||||
<div className="info-wrapper">
|
||||
<h1>{this.props.content.title}</h1>
|
||||
<h3>by {this.props.content.artist_name}</h3>
|
||||
</div>
|
||||
<span style={{'clear': 'both'}}></span>
|
||||
</div>
|
||||
</div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
|
||||
import Table from '../ascribe_table/table';
|
||||
import TableItemSelectable from '../ascribe_table/table_item_selectable';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
|
||||
let AccordionListItemTable = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
'show': false
|
||||
};
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
parentId: React.PropTypes.number,
|
||||
fetchData: React.PropTypes.func,
|
||||
itemList: React.PropTypes.array,
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel))
|
||||
},
|
||||
|
||||
toggleTable() {
|
||||
this.props.fetchData();
|
||||
this.setState({
|
||||
'show': !this.state.show
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
if(this.props.itemList && this.state.show) {
|
||||
return (
|
||||
<div className={this.props.className}>
|
||||
<Table
|
||||
columnList={this.props.columnList}
|
||||
itemList={this.props.itemList}>
|
||||
{this.props.itemList.map((item, i) => {
|
||||
return (
|
||||
<TableItemSelectable
|
||||
className="ascribe-table-item-selectable"
|
||||
key={i}>
|
||||
</TableItemSelectable>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
<AccordionListItemTableToggle
|
||||
className="ascribe-accordion-list-table-toggle"
|
||||
onClick={this.toggleTable} />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={this.props.className}>
|
||||
<AccordionListItemTableToggle
|
||||
className="ascribe-accordion-list-table-toggle"
|
||||
onClick={this.toggleTable} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let AccordionListItemTableToggle = React.createClass({
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span
|
||||
className={this.props.className}
|
||||
onClick={this.props.onClick}>Show all X Editions</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default AccordionListItemTable;
|
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
|
||||
import EditionListStore from '../../stores/edition_list_store';
|
||||
import EditionListActions from '../../actions/edition_list_actions';
|
||||
|
||||
import AccordionListItemTable from './accordion_list_item_table';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
|
||||
import TableItemImg from '../ascribe_table/table_item_img';
|
||||
import TableItemText from '../ascribe_table/table_item_text';
|
||||
import TableItemAcl from '../ascribe_table/table_item_acl';
|
||||
|
||||
let AccordionListItemTableEditions = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
parentId: React.PropTypes.number
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return EditionListStore.getState();
|
||||
},
|
||||
|
||||
onChange(state) {
|
||||
this.setState(state);
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
EditionListStore.listen(this.onChange);
|
||||
},
|
||||
|
||||
componentDidUnmount() {
|
||||
EditionListStore.unlisten(this.onChange);
|
||||
},
|
||||
|
||||
getEditionList() {
|
||||
EditionListActions.fetchEditionList(this.props.parentId);
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let columnList = [
|
||||
new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
|
||||
new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, false),
|
||||
new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, false)
|
||||
];
|
||||
|
||||
return (
|
||||
<AccordionListItemTable
|
||||
className={this.props.className}
|
||||
parentId={this.props.parentId}
|
||||
fetchData={this.getEditionList}
|
||||
itemList={this.state.editionList[this.props.parentId]}
|
||||
columnList={columnList}>
|
||||
</AccordionListItemTable>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default AccordionListItemTableEditions;
|
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import TableColumnMixin from '../../mixins/table_column_mixin';
|
||||
import GeneralUtils from '../../utils/general_utils';
|
||||
import TableHeaderItem from './table_header_item';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
|
||||
|
||||
let TableHeader = React.createClass({
|
||||
mixins: [TableColumnMixin],
|
||||
propTypes: {
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
|
||||
itemList: React.PropTypes.array.isRequired,
|
||||
changeOrder: React.PropTypes.func,
|
||||
orderAsc: React.PropTypes.bool,
|
||||
orderBy: React.PropTypes.string
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
|
||||
<div className="row">
|
||||
{this.props.columnList.map((val, i) => {
|
||||
|
||||
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
|
||||
let columnName = this.props.columnList[i].columnName;
|
||||
let canBeOrdered = this.props.columnList[i].canBeOrdered;
|
||||
|
||||
return (
|
||||
<TableHeaderItem
|
||||
key={i}
|
||||
columnClasses={columnClasses}
|
||||
displayName={val.displayName}
|
||||
columnName={columnName}
|
||||
canBeOrdered={canBeOrdered}
|
||||
orderAsc={this.props.orderAsc}
|
||||
orderBy={this.props.orderBy}
|
||||
changeOrder={this.props.changeOrder}>
|
||||
</TableHeaderItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
export default TableHeader;
|
@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import TableHeaderItemCarret from './table_header_item_carret';
|
||||
|
||||
let TableHeaderItem = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
columnClasses: React.PropTypes.string.isRequired,
|
||||
displayName: React.PropTypes.string.isRequired,
|
||||
columnName: React.PropTypes.string.isRequired,
|
||||
canBeOrdered: React.PropTypes.bool,
|
||||
changeOrder: React.PropTypes.func,
|
||||
orderAsc: React.PropTypes.bool,
|
||||
orderBy: React.PropTypes.string
|
||||
},
|
||||
|
||||
changeOrder() {
|
||||
this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
|
||||
},
|
||||
|
||||
render() {
|
||||
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'}
|
||||
onClick={this.changeOrder}>
|
||||
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className={this.props.columnClasses + ' ascribe-table-header-column'}
|
||||
onClick={this.changeOrder}>
|
||||
<span>{this.props.displayName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<div className={this.props.columnClasses + ' ascribe-table-header-column'}>
|
||||
<span>
|
||||
{this.props.displayName}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default TableHeaderItem;
|
@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
let TableHeaderItemCarret = React.createClass({
|
||||
propTypes: {
|
||||
orderAsc: React.PropTypes.bool.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
let carretDirection = 'glyphicon-triangle-';
|
||||
|
||||
if(this.props.orderAsc) {
|
||||
carretDirection += 'bottom';
|
||||
} else {
|
||||
carretDirection += 'top';
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={'glyphicon ' + carretDirection}>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableHeaderItemCarret;
|
@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
let TableItemAcl = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.array.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
{this.props.content.join('/')}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemAcl;
|
@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* This could be enhanced further by specifying an optional description for example
|
||||
*/
|
||||
let TableItemImg = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.string.isRequired,
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<img src={this.props.content} width="50" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemImg;
|
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
|
||||
import TableItem from './table_item';
|
||||
|
||||
// This component is implemented as recommended here: http://stackoverflow.com/a/25723635/1263876
|
||||
let TableItemSelectable = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
|
||||
columnContent: React.PropTypes.object,
|
||||
parentId: React.PropTypes.number,
|
||||
className: React.PropTypes.string
|
||||
},
|
||||
|
||||
selectItem() {
|
||||
this.props.selectItem(this.props.parentId, this.props.columnContent.edition_number);
|
||||
},
|
||||
|
||||
render() {
|
||||
let tableItemClasses = classNames({
|
||||
'ascribe-table-item-selected': this.props.columnContent.selected
|
||||
});
|
||||
|
||||
return (
|
||||
<TableItem
|
||||
className={tableItemClasses + ' ' + this.props.className}
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}
|
||||
onClick={this.selectItem}>
|
||||
</TableItem>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemSelectable;
|
@ -1,110 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
|
||||
import EditionListStore from '../../stores/edition_list_store';
|
||||
import EditionListActions from '../../actions/edition_list_actions';
|
||||
|
||||
|
||||
import Table from './table';
|
||||
import TableItemWrapper from './table_item_wrapper';
|
||||
import TableItemText from './table_item_text';
|
||||
import TableItemAcl from './table_item_acl';
|
||||
import TableItemSelectable from './table_item_selectable';
|
||||
import TableItemSubtableButton from './table_item_subtable_button';
|
||||
|
||||
|
||||
let TableItemSubtable = React.createClass({
|
||||
propTypes: {
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
|
||||
columnContent: React.PropTypes.object
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
'open': false
|
||||
};
|
||||
},
|
||||
|
||||
onChange(state) {
|
||||
this.setState(state);
|
||||
},
|
||||
|
||||
componentDidMount() {
|
||||
EditionListStore.listen(this.onChange);
|
||||
},
|
||||
|
||||
loadEditionList() {
|
||||
if(this.state.open) {
|
||||
this.setState({
|
||||
'open': false
|
||||
});
|
||||
} else {
|
||||
|
||||
EditionListActions.fetchEditionList(this.props.columnContent.id);
|
||||
this.setState({
|
||||
'open': true,
|
||||
'editionList': EditionListStore.getState()
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
selectItem(parentId, itemId) {
|
||||
EditionListActions.selectEdition({
|
||||
'pieceId': parentId,
|
||||
'editionId': itemId
|
||||
});
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
let renderEditionListTable = () => {
|
||||
|
||||
let columnList = [
|
||||
new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
|
||||
new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
|
||||
new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
|
||||
];
|
||||
|
||||
if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
|
||||
{this.state.editionList[this.props.columnContent.id].map((edition, i) => {
|
||||
return (
|
||||
<TableItemSelectable
|
||||
className="ascribe-table-item-selectable"
|
||||
selectItem={this.selectItem}
|
||||
parentId={this.props.columnContent.id}
|
||||
key={i}>
|
||||
</TableItemSelectable>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
|
||||
<div className="row">
|
||||
<TableItemWrapper
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}
|
||||
columnWidth={12}>
|
||||
</TableItemWrapper>
|
||||
<div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
|
||||
<TableItemSubtableButton content="+" onClick={this.loadEditionList}>
|
||||
</TableItemSubtableButton>
|
||||
</div>
|
||||
</div>
|
||||
{renderEditionListTable()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemSubtable;
|
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
let TableItemSubtableButton = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
content: React.PropTypes.string.isRequired,
|
||||
onClick: React.PropTypes.func.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
|
||||
{this.props.content}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemSubtableButton;
|
@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
let TableItemText = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.number
|
||||
])
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
{this.props.content}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemText;
|
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import TableColumnContentModel from '../../models/table_column_content_model';
|
||||
import TableColumnMixin from '../../mixins/table_column_mixin';
|
||||
|
||||
let TableItemWrapper = React.createClass({
|
||||
mixins: [TableColumnMixin],
|
||||
propTypes: {
|
||||
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
|
||||
columnContent: React.PropTypes.object,
|
||||
columnWidth: React.PropTypes.number.isRequired
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.columnList.map((column, i) => {
|
||||
|
||||
let TypeElement = column.displayType;
|
||||
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
|
||||
|
||||
return (
|
||||
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
|
||||
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
|
||||
</div>
|
||||
);
|
||||
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default TableItemWrapper;
|
@ -24,24 +24,20 @@ let Table = React.createClass({
|
||||
},
|
||||
|
||||
render() {
|
||||
if(this.props.itemList && this.props.itemList.length > 0) {
|
||||
return (
|
||||
<div className="ascribe-table">
|
||||
<TableHeader
|
||||
columnList={this.props.columnList}
|
||||
itemList={this.props.itemList}
|
||||
fetchList={this.props.fetchList}
|
||||
changeOrder={this.props.changeOrder}
|
||||
orderAsc={this.props.orderAsc}
|
||||
orderBy={this.props.orderBy} />
|
||||
return (
|
||||
<div className="ascribe-table">
|
||||
<TableHeader
|
||||
columnList={this.props.columnList}
|
||||
itemList={this.props.itemList}
|
||||
fetchList={this.props.fetchList}
|
||||
changeOrder={this.props.changeOrder}
|
||||
orderAsc={this.props.orderAsc}
|
||||
orderBy={this.props.orderBy} />
|
||||
<div className="row">
|
||||
{this.renderChildren()}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<p>Loading</p>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -16,8 +16,7 @@ let TableItem = React.createClass({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
|
||||
<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
|
||||
|
@ -24,14 +24,25 @@ let TableItemSelectable = React.createClass({
|
||||
'ascribe-table-item-selected': this.props.columnContent.selected
|
||||
});
|
||||
|
||||
return (
|
||||
<TableItem
|
||||
className={tableItemClasses + ' ' + this.props.className}
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}
|
||||
onClick={this.selectItem}>
|
||||
</TableItem>
|
||||
);
|
||||
if(this.props.onClick) {
|
||||
return (
|
||||
<TableItem
|
||||
className={tableItemClasses + ' ' + this.props.className}
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}
|
||||
onClick={this.selectItem}>
|
||||
</TableItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<TableItem
|
||||
className={tableItemClasses + ' ' + this.props.className}
|
||||
columnList={this.props.columnList}
|
||||
columnContent={this.props.columnContent}>
|
||||
</TableItem>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -6,6 +6,7 @@ import PieceListActions from '../actions/piece_list_actions';
|
||||
|
||||
import AccordionList from './ascribe_accordion_list/accordion_list';
|
||||
import AccordionListItem from './ascribe_accordion_list/accordion_list_item';
|
||||
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
|
||||
|
||||
import Pagination from './ascribe_pagination/pagination';
|
||||
|
||||
@ -48,9 +49,9 @@ let PieceList = React.createClass({
|
||||
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
|
||||
|
||||
return (
|
||||
<div class="row">
|
||||
<div>
|
||||
<AccordionList
|
||||
className="ascribe-accordion-list row"
|
||||
className="ascribe-accordion-list"
|
||||
changeOrder={this.accordionChangeOrder}
|
||||
itemList={this.state.pieceList}
|
||||
itemListCount={this.state.pieceListCount}
|
||||
@ -64,7 +65,11 @@ let PieceList = React.createClass({
|
||||
<AccordionListItem
|
||||
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
|
||||
content={item}
|
||||
key={i} />
|
||||
key={i}>
|
||||
<AccordionListItemTableEditions
|
||||
className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
|
||||
parentId={item.id} />
|
||||
</AccordionListItem>
|
||||
);
|
||||
})}
|
||||
</AccordionList>
|
||||
|
@ -5,22 +5,20 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
|
||||
background-color: rgba(0,0,0,0.004);
|
||||
border: 1px solid black;
|
||||
height: $ascribe-accordion-list-item-height;
|
||||
margin-bottom: 3em;
|
||||
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border-left: 0.1em solid #E0E0E0;
|
||||
border-right: 0.1em solid #E0E0E0;
|
||||
border-top: 0.1em solid #E0E0E0;
|
||||
border-radius: 5px;
|
||||
border-bottom: 0.25em solid #E0E0E0;
|
||||
border-bottom: 0.2em solid #E0E0E0;
|
||||
.wrapper {
|
||||
width:100%;
|
||||
height:100%;
|
||||
// ToDo: Include media queries for thumbnail
|
||||
.thumbnail-wrapper {
|
||||
float:left;
|
||||
@ -49,3 +47,32 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-accordion-list-item-table {
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
background-color: rgba(0,0,0,0.004);
|
||||
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0.15em solid #E0E0E0;
|
||||
border-left: 0.1em solid #E0E0E0;
|
||||
border-right: 0.1em solid #E0E0E0;
|
||||
}
|
||||
|
||||
span.ascribe-accordion-list-table-toggle {
|
||||
::selection { background: transparent; }
|
||||
::-moz-selection { background: transparent; }
|
||||
&:hover {
|
||||
color: $ascribe-color-dark;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.ascribe-accordion-list-table-list {
|
||||
margin-bottom: .5em;
|
||||
th, td {
|
||||
font-size:.85em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
@ -1 +1,2 @@
|
||||
$ascribe-color: rgba(2, 182, 163, 0.5);
|
||||
$ascribe-color-dark: rgba(2, 182, 163, 0.8);
|
@ -28,8 +28,7 @@
|
||||
}
|
||||
|
||||
.ascribe-table-header-row {
|
||||
border-bottom: 2px solid rgba(2, 182, 163, 0.5);
|
||||
border-top: 2px solid rgba(2, 182, 163, 0.5);
|
||||
border-bottom: 2px solid #E0E0E0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -44,8 +43,8 @@
|
||||
vertical-align: middle;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 600;
|
||||
color: rgba(2, 182, 163, 1);
|
||||
font-size: 1.4em;
|
||||
color: #424242;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.ascribe-table-header-column > span > .glyphicon {
|
||||
@ -63,7 +62,7 @@
|
||||
.ascribe-table-item-column {
|
||||
display: table;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-size: 1.2em;
|
||||
font-size: .8em;
|
||||
height:3em;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user