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

made accordion table responsive

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={this.props.className}>
<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} />
</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>
<h3>{getLangText('by %s', this.props.content.artist_name)}</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 (
<div className={this.props.className}>
<Table
responsive
className="ascribe-table"
columnList={this.props.columnList}
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,
5,
true,
transition
transition,
'hidden-xs visible-sm'
),
new ColumnModel(
(item) => {

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

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

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

@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
action="transfer"
editions={this.props.editions}
currentUser={this.state.currentUser}
handleSuccess={this.props.handleSuccess} />
handleSuccess={this.props.handleSuccess}/>
<AclButton
availableAcls={this.props.availableAcls}
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>
<p></p>
<div className="row">
<div className="row-fluid">
<AclButtonList
availableAcls={availableAcls}
editions={selectedEditions}
handleSuccess={this.handleSuccess}
className="text-center ascribe-button-list"/>
className="text-center ascribe-button-list collapse-group"/>
</div>
</div>
</div>

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

@ -2,7 +2,7 @@
export class ColumnModel {
// 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.columnName = columnName;
this.displayName = displayName;
@ -10,6 +10,7 @@ export class ColumnModel {
this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered;
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 (
<thead>
<tr>
{this.props.columnList.map((val, i) => {
{this.props.columnList.map((column, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
let columnName = this.props.columnList[i].columnName;
let canBeOrdered = this.props.columnList[i].canBeOrdered;
let columnName = column.columnName;
let canBeOrdered = column.canBeOrdered;
return (
<TableHeaderItem
className={column.className}
key={i}
columnClasses={columnClasses}
displayName={val.displayName}
displayName={column.displayName}
columnName={columnName}
canBeOrdered={canBeOrdered}
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,
changeOrder: React.PropTypes.func,
orderAsc: React.PropTypes.bool,
orderBy: React.PropTypes.string
orderBy: React.PropTypes.string,
className: React.PropTypes.string
},
changeOrder() {
@ -28,7 +29,7 @@ let TableHeaderItem = React.createClass({
if(this.props.columnName === this.props.orderBy) {
return (
<th
className={'ascribe-table-header-column'}
className={'ascribe-table-header-column ' + this.props.className}
onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
</th>
@ -36,7 +37,7 @@ let TableHeaderItem = React.createClass({
} else {
return (
<th
className={'ascribe-table-header-column'}
className={'ascribe-table-header-column ' + this.props.className}
onClick={this.changeOrder}>
<span>{this.props.displayName}</span>
</th>
@ -44,7 +45,7 @@ let TableHeaderItem = React.createClass({
}
} else {
return (
<th className={'ascribe-table-header-column'}>
<th className={'ascribe-table-header-column ' + this.props.className}>
<span>
{this.props.displayName}
</span>

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

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

2
sass/ascribe_piece_list_bulk_modal.scss
View File

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

1
sass/main.scss
View File

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