ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

made accordion table responsive

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-01 10:53:40 +02:00
parent 3cd14418e7
commit d67bbe7770
12 changed files with 26 additions and 19 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

@ -16,10 +16,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-xs-4 col-sm-4 col-md-4 col-lg-4 thumbnail-wrapper"> <div className="col-xs-5 col-sm-5 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-xs-7 col-sm-7 col-md-7 col-lg-7 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1"> <div className="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-md-offset-1 col-lg-offset-1">
<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>

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

@ -24,6 +24,7 @@ let AccordionListItemTable = React.createClass({
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<Table <Table
responsive
className="ascribe-table" className="ascribe-table"
columnList={this.props.columnList} columnList={this.props.columnList}
itemList={this.props.itemList} itemList={this.props.itemList}

3
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -134,7 +134,8 @@ let AccordionListItemTableEditions = React.createClass({
TableItemText, TableItemText,
5, 5,
true, true,
transition transition,
'hidden-xs visible-sm'
), ),
new ColumnModel( new ColumnModel(
(item) => { (item) => {

5
js/components/ascribe_buttons/acl_button.js
View File

@ -19,7 +19,8 @@ let AclButton = React.createClass({
availableAcls: React.PropTypes.array.isRequired, availableAcls: React.PropTypes.array.isRequired,
editions: React.PropTypes.array.isRequired, editions: React.PropTypes.array.isRequired,
currentUser: React.PropTypes.object, currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func.isRequired handleSuccess: React.PropTypes.func.isRequired,
className: React.PropTypes.string
}, },
actionProperties(){ actionProperties(){
@ -74,7 +75,7 @@ let AclButton = React.createClass({
return ( return (
<ModalWrapper <ModalWrapper
button={ button={
<button className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}> <button className={shouldDisplay ? 'btn btn-default btn-sm ' : 'hidden'}>
{this.props.action.toUpperCase()} {this.props.action.toUpperCase()}
</button> </button>
} }

2
js/components/ascribe_buttons/acl_button_list.js
View File

@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
action="transfer" action="transfer"
editions={this.props.editions} editions={this.props.editions}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} /> handleSuccess={this.props.handleSuccess}/>
<AclButton <AclButton
availableAcls={this.props.availableAcls} availableAcls={this.props.availableAcls}
action="consign" action="consign"

4
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
View File

@ -97,12 +97,12 @@ let PieceListBulkModal = React.createClass({
</div> </div>
</div> </div>
<p></p> <p></p>
<div className="row"> <div className="row-fluid">
<AclButtonList <AclButtonList
availableAcls={availableAcls} availableAcls={availableAcls}
editions={selectedEditions} editions={selectedEditions}
handleSuccess={this.handleSuccess} handleSuccess={this.handleSuccess}
className="text-center ascribe-button-list"/> className="text-center ascribe-button-list collapse-group"/>
</div> </div>
</div> </div>
</div> </div>

3
js/components/ascribe_table/models/table_models.js
View File

@ -2,7 +2,7 @@
export class ColumnModel { export class ColumnModel {
// ToDo: Add validation for all passed-in parameters // ToDo: Add validation for all passed-in parameters
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition) { constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) {
this.transformFn = transformFn; this.transformFn = transformFn;
this.columnName = columnName; this.columnName = columnName;
this.displayName = displayName; this.displayName = displayName;
@ -10,6 +10,7 @@ export class ColumnModel {
this.rowWidth = rowWidth; this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered; this.canBeOrdered = canBeOrdered;
this.transition = transition; this.transition = transition;
this.className = className ? className : '';
} }
} }

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

@ -23,17 +23,18 @@ let TableHeader = React.createClass({
return ( return (
<thead> <thead>
<tr> <tr>
{this.props.columnList.map((val, i) => { {this.props.columnList.map((column, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12); let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
let columnName = this.props.columnList[i].columnName; let columnName = column.columnName;
let canBeOrdered = this.props.columnList[i].canBeOrdered; let canBeOrdered = column.canBeOrdered;
return ( return (
<TableHeaderItem <TableHeaderItem
className={column.className}
key={i} key={i}
columnClasses={columnClasses} columnClasses={columnClasses}
displayName={val.displayName} displayName={column.displayName}
columnName={columnName} columnName={columnName}
canBeOrdered={canBeOrdered} canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}

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

@ -16,7 +16,8 @@ let TableHeaderItem = React.createClass({
canBeOrdered: React.PropTypes.bool, canBeOrdered: React.PropTypes.bool,
changeOrder: React.PropTypes.func, changeOrder: React.PropTypes.func,
orderAsc: React.PropTypes.bool, orderAsc: React.PropTypes.bool,
orderBy: React.PropTypes.string orderBy: React.PropTypes.string,
className: React.PropTypes.string
}, },
changeOrder() { changeOrder() {
@ -28,7 +29,7 @@ let TableHeaderItem = React.createClass({
if(this.props.columnName === this.props.orderBy) { if(this.props.columnName === this.props.orderBy) {
return ( return (
<th <th
className={'ascribe-table-header-column'} className={'ascribe-table-header-column ' + this.props.className}
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>
</th> </th>
@ -36,7 +37,7 @@ let TableHeaderItem = React.createClass({
} else { } else {
return ( return (
<th <th
className={'ascribe-table-header-column'} className={'ascribe-table-header-column ' + this.props.className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName}</span> <span>{this.props.displayName}</span>
</th> </th>
@ -44,7 +45,7 @@ let TableHeaderItem = React.createClass({
} }
} else { } else {
return ( return (
<th className={'ascribe-table-header-column'}> <th className={'ascribe-table-header-column ' + this.props.className}>
<span> <span>
{this.props.displayName} {this.props.displayName}
</span> </span>

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

@ -41,7 +41,7 @@ let TableItemWrapper = React.createClass({
* programmatically * programmatically
*/ */
return ( return (
<td key={i}> <td key={i} className={column.className}>
<Link <Link
className={'ascribe-table-item-column'} className={'ascribe-table-item-column'}
onClick={column.transition.callback} onClick={column.transition.callback}

2
sass/ascribe_piece_list_bulk_modal.scss
View File

@ -3,7 +3,7 @@
top:0; top:0;
left: 3%; left: 3%;
width:94%; width:94%;
max-width: 1174px;
background-color: #FAFAFA; background-color: #FAFAFA;
border-left: 0.1em solid #E0E0E0; border-left: 0.1em solid #E0E0E0;

1
sass/main.scss
View File

@ -245,4 +245,5 @@ body {
.ascribe-button-list button { .ascribe-button-list button {
margin-right: 1px; margin-right: 1px;
margin-top: 1px;
} }