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

layout basic table

This commit is contained in:
Tim Daubenschütz 2015-05-20 12:09:35 +02:00
parent ba71bd5788
commit 0b4765aa5c
5 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
css/main.css Normal file
View File

4
index.html
View File

@ -5,10 +5,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ascribe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
</head>
<body>
<div id="main" class="container-fluid"></div>
<div id="main" class="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

2
js/components/piece_list.js
View File

@ -17,7 +17,7 @@ let PieceList = React.createClass({
render() {
return (
<AltContainer store={PieceListStore}>
<Table />
<Table class="piecesTable" />
</AltContainer>
);
}

10
js/components/table.js
View File

@ -5,17 +5,13 @@ import TableItem from './table_item';
let Table = React.createClass({
render() {
return (
<ul>
<div className="row as-pieces-table">
{this.props.pieceList.map((piece, i) => {
return (
<li key={i}>
<TableItem piece={piece} />
</li>
<TableItem piece={piece} key={i}/>
);
})}
}
</ul>
</div>
);
}
});

26
js/components/table_item.js
View File

@ -2,13 +2,27 @@ import React from 'react';
let TableItem = React.createClass({
render() {
let piece = this.props.piece;
let columnClasses = 'col-xs-3 col-sm-3 col-md-3 col-lg-3';
return (
<ul>
<li>something</li>
<li></li>
<li></li>
<li></li>
</ul>
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div className="row">
<div className={columnClasses}>
<img src={piece.thumbnail} height="50" />
</div>
<div className={columnClasses}>
{piece.artist_name}
</div>
<div className={columnClasses}>
{piece.title}
</div>
<div className={columnClasses}>
{piece.availableActions}
</div>
</div>
</div>
);
}
});