diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 68b99f30..31858181 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -354,8 +354,6 @@ class Collection extends React.Component {
}
-
By {owner.username}
-
{
this.isOwner() ?
@@ -368,6 +366,8 @@ class Collection extends React.Component {
}
+ Collection by {owner.username}
+
{items.length} sketch{items.length === 1 ? '' : 'es'}
@@ -404,7 +404,7 @@ class Collection extends React.Component {
const hasCollectionItems = this.props.collection != null && this.props.collection.items.length > 0;
if (!isLoading && !hasCollectionItems) {
- return (No sketches in collection
);
+ return (No sketches in collection
);
}
return null;
}
@@ -434,37 +434,35 @@ class Collection extends React.Component {
const title = this.hasCollection() ? this.getCollectionName() : null;
return (
-
+
{this.getTitle()}
-
- {this._renderLoader()}
- {this.hasCollection() && this._renderCollectionMetadata()}
+ {this._renderLoader()}
+ {this.hasCollection() && this._renderCollectionMetadata()}
+
{this._renderEmptyTable()}
{this.hasCollectionItems() &&
-
-
-
-
- {this._renderFieldHeader('name', 'Name')}
- {this._renderFieldHeader('createdAt', 'Date Added')}
- {this._renderFieldHeader('user', 'Owner')}
- |
-
-
-
- {this.props.collection.items.map(item =>
- ())}
-
-
-
+
+
+
+ {this._renderFieldHeader('name', 'Name')}
+ {this._renderFieldHeader('createdAt', 'Date Added')}
+ {this._renderFieldHeader('user', 'Owner')}
+ |
+
+
+
+ {this.props.collection.items.map(item =>
+ ())}
+
+
}
{
this.state.isAddingSketches && (
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index 88e1fa53..28c7ce14 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -1,15 +1,11 @@
.collection-container {
-
+ width: 1012px;
+ margin: 0 auto;
}
.collection-metadata {
margin: 0px #{56 / $base-font-size}rem;
padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem;
-
- @include themify() {
- background-color: getThemifyVariable('modal-background-color');
- border-bottom: 1px dotted getThemifyVariable('modal-border-color');
- }
}
.collection-metadata__columns {
@@ -109,3 +105,22 @@
@extend %primary-button;
flex-grow: 0;
}
+
+.collection-table-wrapper {
+ min-height: 100%;
+
+ @include themify() {
+ border: 1px solid getThemifyVariable('modal-border-color');
+ }
+}
+
+[data-has-items=false] .collection-table-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.collection-empty-message {
+ text-align: center;
+ font-size: #{16 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 65fb367b..ebb9c312 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -72,11 +72,6 @@
align-items: center;
margin-bottom: #{24 / $base-font-size}rem;
padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem;
-
- @include themify() {
- background-color: getThemifyVariable('modal-background-color');
- border-bottom: 1px dotted getThemifyVariable('modal-border-color');
- }
}
.dashboard-header__actions > *:not(:first-child) {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index a78ec308..8367517a 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -95,9 +95,6 @@
font-weight: normal;
}
-.sketches-table__row--is-add-mode {
- cursor: pointer;
-}
.sketch-list__dropdown-button {
width:#{25 / $base-font-size}rem;
@@ -124,10 +121,6 @@
right: calc(100% - 26px);
}
-.sketch-list__action-option {
-
-}
-
.sketches-table__empty {
text-align: center;
font-size: #{16 / $base-font-size}rem;
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index 74a94d23..850537a9 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/client/styles/layout/_dashboard.scss
@@ -14,4 +14,8 @@
flex-direction: column;
flex: 1;
overflow: hidden;
+
+ @include themify() {
+ border: 1px solid getThemifyVariable('modal-border-color');
+ }
}