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

Merge pull request #1371 from processing/collection-sketches-alignment 

Fixes #1355 - sketches overflowing on collection page
This commit is contained in:
Cassie Tarakajian 2020-04-07 19:21:18 -04:00 committed by GitHub
parent a6d39b2804 4a64bae376
commit 1cfe5dcbd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/modules/User/components/Collection.jsx
View File

@ -327,6 +327,7 @@ class Collection extends React.Component {
</Helmet> </Helmet>
{this._renderLoader()} {this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()} {this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-content">
<div className="collection-table-wrapper"> <div className="collection-table-wrapper">
{this._renderEmptyTable()} {this._renderEmptyTable()}
{this.hasCollectionItems() && {this.hasCollectionItems() &&
@ -366,6 +367,7 @@ class Collection extends React.Component {
) )
} }
</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;