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

collections: add styling changes for dashboard pages

Browse source
This commit is contained in:
Cassie Tarakajian 2019-11-14 16:01:33 -05:00
parent 13c45490a2
commit b751353243
4 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/modules/User/pages/DashboardView.jsx
View file

@ -79,17 +79,17 @@ class DashboardView extends React.Component {
case TabKey.collections: case TabKey.collections:
return this.isOwner() && ( return this.isOwner() && (
<React.Fragment> <React.Fragment>
<CollectionSearchbar />
<Link className="dashboard__action-button" to={`/${username}/collections/create`}> <Link className="dashboard__action-button" to={`/${username}/collections/create`}>
Create collection Create collection
</Link> </Link>
<CollectionSearchbar />
</React.Fragment>); </React.Fragment>);
case TabKey.sketches: case TabKey.sketches:
default: default:
return ( return (
<React.Fragment> <React.Fragment>
<SketchSearchbar />
{this.isOwner() && <Link className="dashboard__action-button" to="/">New sketch</Link>} {this.isOwner() && <Link className="dashboard__action-button" to="/">New sketch</Link>}
<SketchSearchbar />
</React.Fragment> </React.Fragment>
); );
} }

1
client/styles/components/_asset-size.scss
View file

@ -1,5 +1,6 @@
.asset-size { .asset-size {
font-size: #{14 / $base-font-size}rem; font-size: #{14 / $base-font-size}rem;
margin-bottom: #{18 / $base-font-size}rem;
} }
.asset-size-bar { .asset-size-bar {

10
client/styles/components/_dashboard-header.scss
View file

@ -7,6 +7,12 @@
flex-direction:column; flex-direction:column;
} }
.dashboard-header__header {
max-width: #{1012 / $base-font-size}rem;
margin: 0 auto;
width: 100%;
}
.dashboard-header--no-vertical-padding { .dashboard-header--no-vertical-padding {
padding: 0 66px; padding: 0 66px;
} }
@ -70,8 +76,8 @@
.dashboard-header__actions { .dashboard-header__actions {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: #{24 / $base-font-size}rem; padding: #{24 / $base-font-size}rem 0;
padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem; justify-content: space-between;
} }
.dashboard-header__actions > *:not(:first-child) { .dashboard-header__actions > *:not(:first-child) {

3
client/styles/layout/_dashboard.scss
View file

@ -14,6 +14,9 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow: hidden; 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');