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

Fix sketch list padding in collection view

Browse source
This commit is contained in:
Andrew Nicolaou 2019-09-16 23:13:20 +02:00 committed by Cassie Tarakajian
parent 7a1fa663af
commit 7f78fda073
2 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
client/modules/User/components/Collection.jsx
View file

@ -301,7 +301,7 @@ class Collection extends React.Component {
}
</h2>
<p className="collection-metadata__user">{items.length} sketches collected by {owner.username}</p>
<p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}</p>
<p className="collection-metadata__description">
{
@ -359,25 +359,28 @@ class Collection extends React.Component {
{this.hasCollection() && this._renderCollectionMetadata()}
{this._renderEmptyTable()}
{this.hasCollectionItems() &&
<table className="sketches-table" summary="table containing all collections">
<thead>
<tr>
{this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('createdAt', 'Date Added')}
{this._renderFieldHeader('user', 'Owner')}
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.props.collection.items.map(item =>
(<CollectionItemRow
key={item.id}
item={item}
user={this.props.user}
username={this.getUsername()}
/>))}
</tbody>
</table>}
<div className="collection-table-wrapper">
<table className="sketches-table" summary="table containing all collections">
<thead>
<tr>
{this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('createdAt', 'Date Added')}
{this._renderFieldHeader('user', 'Owner')}
<th scope="col"></th>
</tr>
</thead>
<tbody>
{this.props.collection.items.map(item =>
(<CollectionItemRow
key={item.id}
item={item}
user={this.props.user}
username={this.getUsername()}
/>))}
</tbody>
</table>
</div>
}
</div>
</section>
);

4
client/styles/components/_collection.scss
View file

@ -39,3 +39,7 @@
.collection-metadata__description .editable-input__input {
width: 100%;
}
.collection-table-wrapper {
margin: #{28 / $base-font-size}rem #{56 / $base-font-size}rem;
}