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

Fixes #1355 - sketches overflowing on collection page

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-07 19:20:29 -04:00
parent 4f52c5893d
commit 4a64bae376
2 changed files with 59 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -327,44 +327,46 @@ class Collection extends React.Component {
</Helmet> </Helmet>
{this._renderLoader()} {this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()} {this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-table-wrapper"> <div className="collection-content">
{this._renderEmptyTable()} <div className="collection-table-wrapper">
{this.hasCollectionItems() && {this._renderEmptyTable()}
<table className="sketches-table" summary="table containing all collections"> {this.hasCollectionItems() &&
<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}
collection={this.props.collection} username={this.getUsername()}
/>))} collection={this.props.collection}
</tbody> />))}
</table> </tbody>
} </table>
{ }
this.state.isAddingSketches && ( {
<Overlay this.state.isAddingSketches && (
title="Add sketch" <Overlay
actions={<SketchSearchbar />} title="Add sketch"
closeOverlay={this.hideAddSketches} actions={<SketchSearchbar />}
isFixedHeight closeOverlay={this.hideAddSketches}
> isFixedHeight
<div className="collection-add-sketch"> >
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} /> <div className="collection-add-sketch">
</div> <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</Overlay> </div>
) </Overlay>
} )
}
</div>
</div> </div>
</section> </section>
); );

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

@ -1,8 +1,10 @@
.collection-container { .collection-container {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
position: relative;
flex: 1; flex: 1;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction:column;
} }
.collection-metadata { .collection-metadata {
@ -114,15 +116,28 @@
flex-grow: 0; flex-grow: 0;
} }
.collection-table-wrapper { .collection-content {
width: #{1012 / $base-font-size}rem; display: flex;
margin: 0 auto; flex-direction: column;
flex: 1; flex: 1;
overflow: hidden;
max-width: #{1012 / $base-font-size}rem;
margin: 0 auto;
width: 100%;
@include themify() { @include themify() {
border: 1px solid getThemifyVariable('modal-border-color'); border: 1px solid getThemifyVariable('modal-border-color');
} }
} }
.collection-table-wrapper {
overflow-y: auto;
max-width: 100%;
min-height: 100%;
}
// maybe don't need this?
[data-has-items=false] .collection-table-wrapper { [data-has-items=false] .collection-table-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;