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} exportProjectAsZip={this.props.exportProjectAsZip}
cloneProject={this.props.cloneProject} cloneProject={this.props.cloneProject}
/> />
<table className="sketches-table" summary="table containing all saved projects"> <div className="sketches-table-container">
<thead> <table className="sketches-table" summary="table containing all saved projects">
<tr> <thead>
<th scope="col">Name</th> <tr>
<th scope="col">Created</th> <th scope="col">Name</th>
<th scope="col">Last Updated</th> <th scope="col">Created</th>
</tr> <th scope="col">Last Updated</th>
</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> </tr>
)} </thead>
</tbody> <tbody>
</table> {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> </div>
); );
} }

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

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

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

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