add empty state

go1t · go1t · commit 724a6d262a8b · 2016-07-18T04:08:21.000-07:00
diff --git a/src/client/app/modules/components/search-form.jsx b/src/client/app/modules/components/search-form.jsx
@@ -132,34 +132,35 @@ export class SearchForm extends React.Component {
           <input className="FormInput" type="text" value={location} onChange={this.handleLocationChange} placeholder="File Path (absolute)"/>
         </div>
         <div className="ResultsContainer">
-          <div className="Summary">
-            {
-              (searchString === '' && location === '') ?
-                <span> Type in the searchbox to get started! </span> :
+          {
+            (searchString !== '' || location !== '') ?
+              <div className="Summary">
                 <span>
                   Search results for string <code>{searchString === '' ? '' : `'${searchString}'`}</code> at <code>{ location ===  '' ? 'any path' : `'${location}'`}</code>
                 </span>
-            }
-          </div>
+              </div> : null
+          }
           <div className="Results" ref={(ref) => this.resultView = this.resultView || ref} >
-            <ConnectedInfiniteScroll loadMore={() => this.loadMore(hashes)} hasMore={searchString || location}>
-              {
-                results.map((result, i) => {
-                  var {file, lno, above_lines, the_line, below_lines} = result;
-                  var code = above_lines.concat(the_line, below_lines);
-                  return (
-                    <ConnectedCodeView
-                      key={i}
-                      filePath={file}
-                      content={code.join('\n')+'\n'}
-                      length={code.length}
-                      start={lno-3}
-                      lno={lno}
-                    />
-                  );
-                })
-              }
-            </ConnectedInfiniteScroll>
+            { (results.length > 0) ?
+              <ConnectedInfiniteScroll loadMore={() => this.loadMore(hashes)} hasMore={searchString || location}>
+                {
+                  results.map((result, i) => {
+                    var {file, lno, above_lines, the_line, below_lines} = result;
+                    var code = above_lines.concat(the_line, below_lines);
+                    return (
+                      <ConnectedCodeView
+                        key={i}
+                        filePath={file}
+                        content={code.join('\n')+'\n'}
+                        length={code.length}
+                        start={lno-3}
+                        lno={lno}
+                      />
+                    );
+                  })
+                }
+              </ConnectedInfiniteScroll> : <div className="Empty">Type something to get started!</div>
+            }
           </div>
         </div>
         <div className="Footer">
diff --git a/src/client/sass/partials/_search.scss b/src/client/sass/partials/_search.scss
@@ -27,11 +27,10 @@
 }
 
 .Slogan {
-  margin-top: 4px;
+  margin-top: 9px;
   margin-right: 16px;
-  font-family: 'Lato', 'Open Sans';
-  font-weight: 800;
-  font-size: 24px;
+  font-family: 'Inconsolata', monospace;
+  font-size: 18px;
 }
 
 .FormContainer {
@@ -95,6 +94,7 @@
   .Results {
     flex: 1;
     overflow: scroll;
+    height: 100%;
   }
 }
 
@@ -120,6 +120,17 @@
   }
 }
 
+.Empty {
+  height: 100%;
+  padding-bottom: 50px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 34px;
+  color: #3a424c;
+}
+
 .Footer {
   display: flex;
   justify-content: space-between;
