Merge pull request #1371 from processing/collection-sketches-alignment
Fixes #1355 - sketches overflowing on collection page
This commit is contained in:
commit
1cfe5dcbd2
2 changed files with 59 additions and 42 deletions
|
@ -327,44 +327,46 @@ class Collection extends React.Component {
|
|||
</Helmet>
|
||||
{this._renderLoader()}
|
||||
{this.hasCollection() && this._renderCollectionMetadata()}
|
||||
<div className="collection-table-wrapper">
|
||||
{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()}
|
||||
collection={this.props.collection}
|
||||
/>))}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
{
|
||||
this.state.isAddingSketches && (
|
||||
<Overlay
|
||||
title="Add sketch"
|
||||
actions={<SketchSearchbar />}
|
||||
closeOverlay={this.hideAddSketches}
|
||||
isFixedHeight
|
||||
>
|
||||
<div className="collection-add-sketch">
|
||||
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
|
||||
</div>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
<div className="collection-content">
|
||||
<div className="collection-table-wrapper">
|
||||
{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()}
|
||||
collection={this.props.collection}
|
||||
/>))}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
{
|
||||
this.state.isAddingSketches && (
|
||||
<Overlay
|
||||
title="Add sketch"
|
||||
actions={<SketchSearchbar />}
|
||||
closeOverlay={this.hideAddSketches}
|
||||
isFixedHeight
|
||||
>
|
||||
<div className="collection-add-sketch">
|
||||
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
|
||||
</div>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
.collection-container {
|
||||
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.collection-metadata {
|
||||
|
@ -114,15 +116,28 @@
|
|||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.collection-table-wrapper {
|
||||
width: #{1012 / $base-font-size}rem;
|
||||
margin: 0 auto;
|
||||
.collection-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
max-width: #{1012 / $base-font-size}rem;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
@include themify() {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
Loading…
Reference in a new issue