r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fix sketch list view bug which made the nav look ugly

Browse source
This commit is contained in:
catarak 2016-08-15 13:03:52 -04:00
parent 17efc42778
commit 89c641c845
3 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
client/modules/Sketch/pages/SketchListView.js
View file

@ -22,24 +22,26 @@ class SketchListView extends React.Component {
exportProjectAsZip={this.props.exportProjectAsZip}
cloneProject={this.props.cloneProject}
/>
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
</tr>
</thead>
<tbody>
{this.props.sketches.map(sketch =>
<tr className="sketches-table__row" key={sketch.id}>
<td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
<div className="sketches-table-container">
<table className="sketches-table" summary="table containing all saved projects">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
</tr>
)}
</tbody>
</table>
</thead>
<tbody>
{this.props.sketches.map(sketch =>
<tr className="sketches-table__row" key={sketch.id}>
<td scope="row"><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}

1
client/styles/components/_sketch-list.scss
View file

@ -2,6 +2,7 @@
width: 100%;
padding: #{10 / $base-font-size}rem 0;
padding-left: #{170 / $base-font-size}rem;
height: 100%;
}
.sketches-table__row {

5
client/styles/layout/_sketch-list.scss
View file

@ -4,3 +4,8 @@
height: 100%;
flex-flow: column;
}
.sketches-table-container {
flex: 1 0 0%;
overflow-y: scroll;
}