From 983248ccb737439de350299794700237ebe68a84 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Mon, 24 Jul 2017 11:12:11 -0400
Subject: [PATCH] fixes #402

---
 client/modules/IDE/components/SketchList.jsx | 88 ++++++++++----------
 client/styles/components/_asset-list.scss    |  2 +-
 client/styles/components/_sketch-list.scss   |  8 +-
 3 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 7094d72b..478bc265 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -20,49 +20,53 @@ class SketchList extends React.Component {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <div className="sketches-table-container">
-        <table className="sketches-table" summary="table containing all saved projects">
-          <thead>
-            <tr>
-              <th className="sketch-list__trash-column" scope="col"></th>
-              <th scope="col">Sketch</th>
-              <th scope="col">Date created</th>
-              <th scope="col">Date updated</th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.props.sketches.map(sketch =>
-              // eslint-disable-next-line
-              <tr 
-                className="sketches-table__row visibility-toggle"
-                key={sketch.id}
-                onClick={() => browserHistory.push(`/${username}/sketches/${sketch.id}`)}
-              >
-                <td className="sketch-list__trash-column">
-                {(() => { // eslint-disable-line
-                  if (this.props.username === this.props.user.username || this.props.username === undefined) {
-                    return (
-                      <button
-                        className="sketch-list__trash-button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          if (window.confirm(`Are you sure you want to delete "${sketch.name}"?`)) {
-                            this.props.deleteProject(sketch.id);
-                          }
-                        }}
-                      >
-                        <InlineSVG src={trashCan} alt="Delete Project" />
-                      </button>
-                    );
-                  }
-                })()}
-                </td>
-                <th scope="row"><Link to={`/${username}/sketches/${sketch.id}`}>{sketch.name}</Link></th>
-                <td>{moment(sketch.createdAt).format('MMM D, YYYY h:mm A')}</td>
-                <td>{moment(sketch.updatedAt).format('MMM D, YYYY h:mm A')}</td>
+        { this.props.sketches.length === 0 &&
+          <p className="sketches-table__empty">No sketches.</p>
+        }
+        { this.props.sketches.length > 0 &&
+          <table className="sketches-table" summary="table containing all saved projects">
+            <thead>
+              <tr>
+                <th className="sketch-list__trash-column" scope="col"></th>
+                <th scope="col">Sketch</th>
+                <th scope="col">Date created</th>
+                <th scope="col">Date updated</th>
               </tr>
-            )}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {this.props.sketches.map(sketch =>
+                // eslint-disable-next-line
+                <tr 
+                  className="sketches-table__row visibility-toggle"
+                  key={sketch.id}
+                  onClick={() => browserHistory.push(`/${username}/sketches/${sketch.id}`)}
+                >
+                  <td className="sketch-list__trash-column">
+                  {(() => { // eslint-disable-line
+                    if (this.props.username === this.props.user.username || this.props.username === undefined) {
+                      return (
+                        <button
+                          className="sketch-list__trash-button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            if (window.confirm(`Are you sure you want to delete "${sketch.name}"?`)) {
+                              this.props.deleteProject(sketch.id);
+                            }
+                          }}
+                        >
+                          <InlineSVG src={trashCan} alt="Delete Project" />
+                        </button>
+                      );
+                    }
+                  })()}
+                  </td>
+                  <th scope="row"><Link to={`/${username}/sketches/${sketch.id}`}>{sketch.name}</Link></th>
+                  <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>
+          </table>}
       </div>
     );
   }
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 5b716170..76013deb 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -1,5 +1,5 @@
 .asset-table-container {
-  flex: 1 1 0%;
+  // flex: 1 1 0%;
   overflow-y: scroll;
   max-width: 100%;
   width: #{1000 / $base-font-size}rem;
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 034ab59b..1369699c 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -1,9 +1,8 @@
-
 .sketches-table-container {
-  flex: 1 1 0%;
   overflow-y: scroll;
   max-width: 100%;
   width: #{1000 / $base-font-size}rem;
+  min-height: #{400 / $base-font-size}rem;
 }
 
 .sketches-table {
@@ -72,3 +71,8 @@
       }
   }
 }
+
+.sketches-table__empty {
+  text-align: center;
+  font-size: #{16 / $base-font-size}rem;
+}