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
parent 8b058d8e56
commit 709aa8eccb
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> </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"> <p className="collection-metadata__description">
{ {
@ -359,25 +359,28 @@ class Collection extends React.Component {
{this.hasCollection() && this._renderCollectionMetadata()} {this.hasCollection() && this._renderCollectionMetadata()}
{this._renderEmptyTable()} {this._renderEmptyTable()}
{this.hasCollectionItems() && {this.hasCollectionItems() &&
<table className="sketches-table" summary="table containing all collections"> <div className="collection-table-wrapper">
<thead> <table className="sketches-table" summary="table containing all collections">
<tr> <thead>
{this._renderFieldHeader('name', 'Name')} <tr>
{this._renderFieldHeader('createdAt', 'Date Added')} {this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('user', 'Owner')} {this._renderFieldHeader('createdAt', 'Date Added')}
<th scope="col"></th> {this._renderFieldHeader('user', 'Owner')}
</tr> <th scope="col"></th>
</thead> </tr>
<tbody> </thead>
{this.props.collection.items.map(item => <tbody>
(<CollectionItemRow {this.props.collection.items.map(item =>
key={item.id} (<CollectionItemRow
item={item} key={item.id}
user={this.props.user} item={item}
username={this.getUsername()} user={this.props.user}
/>))} username={this.getUsername()}
</tbody> />))}
</table>} </tbody>
</table>
</div>
}
</div> </div>
</section> </section>
); );

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

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