From 2b07c982e6295a1bd6d51160419aec848fb233c9 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sun, 7 Aug 2016 22:48:45 -0400
Subject: [PATCH] result display improvements, search to header

---
 js/app.js              |  11 ++-
 js/component/header.js |  25 +++---
 js/page/discover.js    | 168 +++++++++++++++--------------------------
 scss/_canvas.scss      |  45 +++++++----
 scss/_global.scss      |  16 ++++
 5 files changed, 126 insertions(+), 139 deletions(-)

diff --git a/js/app.js b/js/app.js
index a064fab1f..6d7d3f744 100644
--- a/js/app.js
+++ b/js/app.js
@@ -66,15 +66,18 @@ var App = React.createClass({
     sessionStorage.setItem('drawerOpen', false);
     this.setState({ drawerOpen: false });
   },
-  onSearchStart: function() {
-    this.setState({ viewingPage: 'discover' });
+  onSearch: function(term) {
+    this.setState({
+      viewingPage: 'discover',
+      pageArgs: term
+    });
   },
   getMainContent: function()
   {
     switch(this.state.viewingPage)
     {
       case 'discover':
-        return <DiscoverPage />;
+        return <DiscoverPage query={this.state.pageArgs} />;
       case 'settings':
         return <SettingsPage />;
       case 'help':
@@ -104,7 +107,7 @@ var App = React.createClass({
       <div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
         <Drawer onCloseDrawer={this.closeDrawer} viewingPage={this.state.viewingPage} />
         <div id="main-content">
-          <Header onOpenDrawer={this.openDrawer} onSearchStart={this.onSearchStart} />
+          <Header onOpenDrawer={this.openDrawer} onSearch={this.onSearch} />
           {mainContent}
         </div>
       </div>
diff --git a/js/component/header.js b/js/component/header.js
index b29f28ad2..81917a5b2 100644
--- a/js/component/header.js
+++ b/js/component/header.js
@@ -13,41 +13,44 @@ var Header = React.createClass({
       { subtree: true, characterData: true, childList: true }
     );
   },
-  componentDidMount() {
+  componentDidMount: function() {
     document.addEventListener('scroll', this.handleScroll);
   },
-  componentWillUnmount() {
+  componentWillUnmount: function() {
     document.removeEventListener('scroll', this.handleScroll);
+    if (this.userTypingTimer)
+    {
+      clearTimeout(this.userTypingTimer);
+    }
   },
-  handleScroll() {
+  handleScroll: function() {
     this.setState({
       isScrolled: event.srcElement.body.scrollTop > 0
     });
   },
   onQueryChange: function(event) {
 
-    this.props.onSearchStart();
-
     if (this.userTypingTimer)
     {
       clearTimeout(this.userTypingTimer);
     }
 
     //@TODO: Switch to React.js timing
-    this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower
+    var searchTerm = event.target.value;
+    this.userTypingTimer = setTimeout(() => {
+      this.props.onSearch(searchTerm);
+    }, 800); // 800ms delay, tweak for faster/slower
 
-    // this.setState({
-    //   searching: event.target.value.length > 0,
-    //   query: event.target.value
-    // });
   },
   render: function() {
     return (
       <header id="header" className={this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled'}>
         <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
         <h1>{ this.state.title }</h1>
-        <input type="search" onChange={this.onQueryChange}
+        <div className="header-search">
+          <input type="search" onChange={this.onQueryChange}
                placeholder="Find movies, music, games, and more"/>
+        </div>
       </header>
     );
   }
diff --git a/js/page/discover.js b/js/page/discover.js
index 7c02b7c96..c385075bc 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -14,10 +14,10 @@ var searchInputStyle = {
 var SearchActive = React.createClass({
   render: function() {
     return (
-      <section style={fetchResultsStyle}>
+      <div style={fetchResultsStyle}>
         Looking up the Dewey Decimals
         <span className="busy-indicator"></span>
-      </section>
+      </div>
     );
   }
 });
@@ -50,7 +50,7 @@ var SearchResults = React.createClass({
       );
     });
     return (
-      <section>{rows}</section>
+      <div>{rows}</div>
     );
   }
 });
@@ -94,21 +94,23 @@ var SearchResultRow = React.createClass({
   },
   render: function() {
     return (
-      <section className="row-fluid">
-        <div className="span3">
-          <img src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} />
-        </div>
-        <div className="span9">
-          <span style={searchRowCostStyle}>
-            <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
-          </span>
-          <h2 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h2>
-          <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
-          <p style={searchRowDescriptionStyle}><TruncatedText>{this.props.description}</TruncatedText></p>
-          <div>
-            <WatchLink streamName={this.props.name} button="primary" />
-            { ' ' }
-            <DownloadLink streamName={this.props.name} button="alt" />
+      <section className="card">
+        <div className="row-fluid">
+          <div className="span3">
+            <img src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} />
+          </div>
+          <div className="span9">
+            <span style={searchRowCostStyle}>
+              <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
+            </span>
+            <h2 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h2>
+            <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
+            <p style={searchRowDescriptionStyle}><TruncatedText>{this.props.description}</TruncatedText></p>
+            <div>
+              <WatchLink streamName={this.props.name} button="primary" />
+              { ' ' }
+              <DownloadLink streamName={this.props.name} button="alt" />
+            </div>
           </div>
         </div>
       </section>
@@ -117,16 +119,14 @@ var SearchResultRow = React.createClass({
 });
 
 var featuredContentItemStyle = {
-  fontSize: '0.95em',
-  marginTop: '10px',
-  maxHeight: '220px'
+  height: '120px',
+  overflowY: 'hidden'
 }, featuredContentItemImgStyle = {
   maxWidth: '100%',
-  maxHeight: '100%',
+  maxHeight: '120px',
   display: 'block',
   marginLeft: 'auto',
-  marginRight: 'auto',
-  marginTop: '5px',
+  marginRight: 'auto'
 }, featuredContentHeaderStyle = {
   fontWeight: 'bold',
   marginBottom: '5px'
@@ -135,7 +135,6 @@ var featuredContentItemStyle = {
   fontSize: '0.9em'
 }, featuredContentItemDescriptionStyle = {
   color: '#444',
-  marginBottom: '5px',
   fontSize: '0.9em',
 }, featuredContentItemCostStyle = {
   float: 'right'
@@ -189,28 +188,27 @@ var FeaturedContentItem = React.createClass({
     }
 
     return (
-      <div className="row-fluid" style={featuredContentItemStyle}>
-        <div className="span4">
-          <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
-        </div>
-        <div className="span8">
-          <h4 style={featuredContentHeaderStyle}><a href={'/?show=' + this.props.name}>{this.state.title}</a></h4>
-          <div style={featuredContentSubheaderStyle}>
-            <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
-            <WatchLink streamName={this.props.name} />
-            &nbsp;&nbsp;&nbsp;
-            <DownloadLink streamName={this.props.name} />
+      <section className="card">
+        <div className="row-fluid" style={featuredContentItemStyle}>
+          <div className="span4">
+            <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
+          </div>
+          <div className="span8">
+            <h4 style={featuredContentHeaderStyle}><a href={'/?show=' + this.props.name}>{this.state.title}</a></h4>
+            <div style={featuredContentSubheaderStyle}>
+              <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
+              <WatchLink streamName={this.props.name} />
+              &nbsp;&nbsp;&nbsp;
+              <DownloadLink streamName={this.props.name} />
+            </div>
+            <p style={featuredContentItemDescriptionStyle}><TruncatedText>{metadata.description}</TruncatedText></p>
           </div>
-          <p style={featuredContentItemDescriptionStyle}><TruncatedText>{metadata.description}</TruncatedText></p>
         </div>
-      </div>);
+      </section>);
   }
 });
 
-var featuredContentStyle = {
-  width: '100%',
-  marginTop: '-8px',
-}, featuredContentLegendStyle = {
+var featuredContentLegendStyle = {
   fontSize: '12px',
   color: '#aaa',
   verticalAlign: '15%',
@@ -218,56 +216,38 @@ var featuredContentStyle = {
 
 var FeaturedContent = React.createClass({
   render: function() {
-    return (<section style={featuredContentStyle}>
+    return (
       <div className="row-fluid">
         <div className="span6">
           <h3>Featured Content</h3>
+          <FeaturedContentItem name="what" />
+          <FeaturedContentItem name="itsadisaster" />
+          <FeaturedContentItem name="keynesvhayek" />
+          <FeaturedContentItem name="meetlbry1" />
         </div>
         <div className="span6">
           <h3>Community Content <ToolTipLink style={featuredContentLegendStyle} label="What's this?"
             tooltip='Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three" and "four" to put your content here!' /></h3>
-        </div>
-      </div>
-
-      <div className="row-fluid">
-        <div className="span6">
-          <FeaturedContentItem name="what" />
-        </div>
-        <div className="span6">
           <FeaturedContentItem name="one" />
-        </div>
-      </div>
-      <div className="row-fluid">
-        <div className="span6">
-          <FeaturedContentItem name="itsadisaster" narrow />
-        </div>
-        <div className="span6">
           <FeaturedContentItem name="two" />
-        </div>
-      </div>
-      <div className="row-fluid">
-        <div className="span6">
-          <FeaturedContentItem name="keynesvhayek" />
-        </div>
-        <div className="span6">
           <FeaturedContentItem name="three" />
-        </div>
-      </div>
-      <div className="row-fluid">
-        <div className="span6">
-          <FeaturedContentItem name="meetlbry1" />
-        </div>
-        <div className="span6">
           <FeaturedContentItem name="four" />
         </div>
       </div>
-    </section>);
+    );
   }
 });
 
 var DiscoverPage = React.createClass({
   userTypingTimer: null,
 
+  componentDidUpdate: function() {
+    if (this.props.query)
+    {
+      lbry.search(this.props.query, this.searchCallback.bind(this, this.props.query));
+    }
+  },
+
   componentDidMount: function() {
     document.title = "Discover";
   },
@@ -275,57 +255,29 @@ var DiscoverPage = React.createClass({
   getInitialState: function() {
     return {
       results: [],
-      searching: false,
-      query: ''
+      searching: this.props.query && this.props.query.length > 0
     };
   },
 
-  search: function() {
-    if (this.state.query)
-    {
-      lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query));
-    }
-    else
-    {
-      this.setState({
-        searching: false,
-        results: []
-      });
-    }
-  },
-
   searchCallback: function(originalQuery, results) {
+    console.log('search callback');
+    console.log(this.state);
     if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
     {
       this.setState({
         results: results,
-        searching: this.state.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about
+        searching: this.props.query != originalQuery, //multiple searches can be out, we're only done if we receive one we actually care about
       });
     }
   },
 
-  onQueryChange: function(event) {
-    if (this.userTypingTimer)
-    {
-      clearTimeout(this.userTypingTimer);
-    }
-
-    //@TODO: Switch to React.js timing
-    this.userTypingTimer = setTimeout(this.search, 800); // 800ms delay, tweak for faster/slower
-
-    this.setState({
-      searching: event.target.value.length > 0,
-      query: event.target.value
-    });
-  },
-
   render: function() {
     return (
       <main>
         { this.state.searching ? <SearchActive /> : null }
-        { !this.state.searching && this.state.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
-        { !this.state.searching && this.state.query && !this.state.results.length ? <SearchNoResults query={this.state.query} /> : null }
-        { !this.state.query && !this.state.searching ? <FeaturedContent /> : null }
+        { !this.state.searching && this.props.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
+        { !this.state.searching && this.props.query && !this.state.results.length ? <SearchNoResults query={this.props.query} /> : null }
+        { !this.props.query && !this.state.searching ? <FeaturedContent /> : null }
       </main>
     );
   }
diff --git a/scss/_canvas.scss b/scss/_canvas.scss
index 710f303a4..6c15ca4f0 100644
--- a/scss/_canvas.scss
+++ b/scss/_canvas.scss
@@ -68,6 +68,7 @@ $drawer-width: 240px;
 {
   #main-content { margin-left: $drawer-width; }
   .open-drawer-link { visibility: hidden; }
+  #header { padding-left: $drawer-width + $spacing-vertical / 2; }
 }
 
 #header
@@ -75,18 +76,29 @@ $drawer-width: 240px;
   background: $color-primary;
   color: white;
   height: $header-height;
-  padding: $spacing-vertical / 2 $spacing-vertical / 2 $spacing-vertical / 2 $drawer-width + $spacing-vertical / 2;
+  padding: $spacing-vertical / 2;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   box-sizing: border-box;
-  h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; display: inline-block; }
+  h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; display: inline-block; float: left; }
   &.header-scrolled
   {
     box-shadow: $default-box-shadow;
   }
 }
+.header-search
+{
+  margin-left: 60px;
+  text-align: center;
+  input[type="search"] {
+    background: rgba(255, 255, 255, 0.3);
+    color: white;
+    width: 400px;
+    @include placeholder-color(#e8e8e8);
+  }
+}
 
 #main-content
 {
@@ -97,6 +109,19 @@ $drawer-width: 240px;
     margin-top: $header-height;
     padding: $spacing-vertical;
   }
+  h2
+  {
+    margin-bottom: $spacing-vertical;
+  }
+  h3, h4
+  {
+    margin-bottom: $spacing-vertical / 2;
+    margin-top: $spacing-vertical;
+    &:first-child
+    {
+      margin-top: 0;
+    }
+  }
 }
 
 $header-icon-size: 1.5em;
@@ -105,7 +130,7 @@ $header-icon-size: 1.5em;
 {
   display: inline-block;
   font-size: $header-icon-size;
-  padding: 0 18px 0 6px;
+  padding: 2px 6px 0 6px;
   float: left;
 }
 .close-lbry-link
@@ -123,19 +148,7 @@ $header-icon-size: 1.5em;
   background: $color-bg;
   box-shadow: $default-box-shadow;
   border-radius: 2px;
-  h2
-  {
-    margin-bottom: $spacing-vertical;
-  }
-  h3, h4
-  {
-    margin-bottom: $spacing-vertical / 2;
-    margin-top: $spacing-vertical;
-    &:first-child
-    {
-      margin-top: 0;
-    }
-  }
+
 }
 
 .full-screen
diff --git a/scss/_global.scss b/scss/_global.scss
index 286645175..8bfde1b90 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -43,6 +43,22 @@ $default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0
           border-radius: $radius;
 }
 
+@mixin placeholder-color($color) {
+  /*do not group these it breaks because CSS*/
+  &:-moz-placeholder {
+    color: $color;
+  }
+  &::-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+}
+
 @mixin display-flex()
 {
   display: -webkit-box;