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

implement new design for sketchbook (#227)

Browse source 
* removing avenir font, using montserrat instead due to licensing issues

* updating headings for sketchlist

* removing old import statement for typeography scss file

* implementing new design for sketchbook closes #207

* removing seconds from sketchlist view

* remove outline from active icon
This commit is contained in:
Lauren McCarthy 2016-12-14 07:58:43 -08:00 committed by Cassie Tarakajian
parent 7216b95c00
commit 67c53f5781
4 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/modules/IDE/components/SketchList.jsx
View file

@ -29,7 +29,7 @@ class SketchList extends React.Component {
return ( return (
<section className="sketch-list" aria-label="project list" tabIndex="0" role="main" id="sketchlist"> <section className="sketch-list" aria-label="project list" tabIndex="0" role="main" id="sketchlist">
<header className="sketch-list__header"> <header className="sketch-list__header">
<h2>Sketches</h2> <h2>Open a Sketch</h2>
<button className="sketch-list__exit-button" onClick={this.closeSketchList}> <button className="sketch-list__exit-button" onClick={this.closeSketchList}>
<InlineSVG src={exitUrl} alt="Close Sketch List Overlay" /> <InlineSVG src={exitUrl} alt="Close Sketch List Overlay" />
</button> </button>
@ -39,9 +39,9 @@ class SketchList extends React.Component {
<thead> <thead>
<tr> <tr>
<th className="sketch-list__trash-column" scope="col"></th> <th className="sketch-list__trash-column" scope="col"></th>
<th scope="col">Name</th> <th scope="col">Sketch</th>
<th scope="col">Created</th> <th scope="col">Date created</th>
<th scope="col">Last Updated</th> <th scope="col">Date updated</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -66,8 +66,8 @@ class SketchList extends React.Component {
})()} })()}
</td> </td>
<td scope="row"><Link to={`/${username}/sketches/${sketch._id}`}>{sketch.name}</Link></td> <td scope="row"><Link to={`/${username}/sketches/${sketch._id}`}>{sketch.name}</Link></td>
<td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm:ss A')}</td> <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm A')}</td>
<td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm:ss A')}</td> <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm A')}</td>
</tr> </tr>
)} )}
</tbody> </tbody>

1
client/styles/abstracts/_placeholders.scss
View file

@ -47,6 +47,7 @@
} }
background-color: transparent; background-color: transparent;
border: none; border: none;
outline: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
} }

2
client/styles/components/_overlay.scss
View file

@ -5,7 +5,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 9999; z-index: 9999;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.5);
overflow-y: hidden; overflow-y: hidden;
} }

44
client/styles/components/_sketch-list.scss
View file

@ -5,12 +5,17 @@
flex-flow: column; flex-flow: column;
width: #{1000 / $base-font-size}rem; width: #{1000 / $base-font-size}rem;
height: 80%; height: 80%;
outline: none;
} }
.sketch-list__header { .sketch-list__header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: #{20 / $base-font-size}rem; }
.sketch-list__header h2 {
font-size: #{21 / $base-font-size}rem;
padding: #{40 / $base-font-size}rem #{16 / $base-font-size}rem #{12 / $base-font-size}rem #{21 / $base-font-size}rem;
} }
.sketch-list__header h2 { .sketch-list__header h2 {
@ -24,24 +29,53 @@
.sketches-table { .sketches-table {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem 0; padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
padding-left: #{20 / $base-font-size}rem;
max-height: 100%; max-height: 100%;
border-spacing: 0;
& .sketch-list__trash-column { & .sketch-list__trash-column {
width: #{22 / $base-font-size}rem; width: #{22 / $base-font-size}rem;
} }
} }
.sketches-table thead th {
height: #{32 / $base-font-size}rem;
}
.sketches-table__row { .sketches-table__row {
margin: #{10 / $base-font-size}rem; margin: #{10 / $base-font-size}rem;
height: #{25 / $base-font-size}rem; height: #{72 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
}
.sketches-table__row:nth-child(odd) {
@include themify() {
background: getThemifyVariable('console-header-background-color');
}
}
.sketches-table__row a {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.sketches-table thead {
font-size: #{12 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('inactive-text-color')
}
}
.sketches-table th {
font-weight: normal;
} }
.sketch-list__exit-button { .sketch-list__exit-button {
@include themify() { @include themify() {
@extend %icon; @extend %icon;
} }
margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
} }
.visibility-toggle .sketch-list__trash-button { .visibility-toggle .sketch-list__trash-button {