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 (
<section className="sketch-list" aria-label="project list" tabIndex="0" role="main" id="sketchlist">
<header className="sketch-list__header">
<h2>Sketches</h2>
<h2>Open a Sketch</h2>
<button className="sketch-list__exit-button" onClick={this.closeSketchList}>
<InlineSVG src={exitUrl} alt="Close Sketch List Overlay" />
</button>
@ -39,9 +39,9 @@ class SketchList extends React.Component {
<thead>
<tr>
<th className="sketch-list__trash-column" scope="col"></th>
<th scope="col">Name</th>
<th scope="col">Created</th>
<th scope="col">Last Updated</th>
<th scope="col">Sketch</th>
<th scope="col">Date created</th>
<th scope="col">Date updated</th>
</tr>
</thead>
<tbody>
@ -66,8 +66,8 @@ class SketchList extends React.Component {
})()}
</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.updatedAt).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 A')}</td>
</tr>
)}
</tbody>

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

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

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

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

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

@ -5,12 +5,17 @@
flex-flow: column;
width: #{1000 / $base-font-size}rem;
height: 80%;
outline: none;
}
.sketch-list__header {
display: flex;
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 {
@ -24,24 +29,53 @@
.sketches-table {
width: 100%;
padding: #{10 / $base-font-size}rem 0;
padding-left: #{20 / $base-font-size}rem;
padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
max-height: 100%;
border-spacing: 0;
& .sketch-list__trash-column {
width: #{22 / $base-font-size}rem;
}
}
.sketches-table thead th {
height: #{32 / $base-font-size}rem;
}
.sketches-table__row {
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 {
@include themify() {
@extend %icon;
}
margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
}
.visibility-toggle .sketch-list__trash-button {