From e0da166406fe72e75fa69af6fe456d22953a1f2a Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 9 Jan 2018 16:53:41 +0100
Subject: [PATCH] Our request page is redesigned with a new header and search
 bar. It also has a better way of redrawing when the page size is changed to a
 mobile device. This is not very reactonic, but this file contains the intire
 search and request logic of the page, but this means we still have things
 todo :)

---
 client/app/components/SearchRequest.jsx       | 43 ++++++---
 .../components/styles/searchRequestStyle.jsx  | 87 ++++++++++++++-----
 2 files changed, 93 insertions(+), 37 deletions(-)

diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx
index 39cdce2..bdb5098 100644
--- a/client/app/components/SearchRequest.jsx
+++ b/client/app/components/SearchRequest.jsx
@@ -47,7 +47,7 @@ class SearchRequest extends React.Component {
     // this.setState({responseMovieList: null})
     this.resetPageNumber();
     this.state.loadResults = true;
-    this.fetchTmdbList('upcoming');
+    this.fetchTmdbList('discover');
   }
   
     // Handles all errors of the response of a fetch call
@@ -384,25 +384,28 @@ class SearchRequest extends React.Component {
                     <div style={searchRequestCSS.body}>
                         <div className='backgroundHeader' style={searchRequestCSS.backgroundLargeHeader}>
                             <div className='pageTitle' style={searchRequestCSS.pageTitle}>
-                                <span style={searchRequestCSS.pageTitleLargeSpan}>Request new content</span>
+                                <span style={searchRequestCSS.pageTitleLargeSpan}>Request new content for plex</span>
                             </div>
                             
-                            <div className='box' style={searchRequestCSS.box}>
-                                <div style={searchRequestCSS.searchLargeContainer}>
-                                    <span style={searchRequestCSS.searchIcon}><i className="fa fa-search"></i></span>
+                            <div style={searchRequestCSS.searchLargeContainer}>
+                                <span style={searchRequestCSS.searchIcon}><i className="fa fa-search"></i></span>
 
-                                    <input style={searchRequestCSS.searchLargeBar} type="text" id="search" placeholder="Search for new content..." 
-                                    onKeyPress={(event) => this._handleQueryKeyPress(event)}
-                                    onChange={event => this.updateQueryState(event)}
-                                    value={this.state.searchQuery}/>
+                                <input style={searchRequestCSS.searchLargeBar} type="text" id="search" placeholder="Search for new content..." 
+                                onKeyPress={(event) => this._handleQueryKeyPress(event)}
+                                onChange={event => this.updateQueryState(event)}
+                                value={this.state.searchQuery}/>
 
-                                </div>
                             </div>
                         </div>
 
                         <div id='requestMovieList' ref='requestMovieList' style={searchRequestCSS.requestWrapper}>
-                           <span style={searchRequestCSS.resultLargeHeader}>{this.state.resultHeader}</span>
-                           <br></br><br></br>
+                            <div style={{marginLeft: '30px'}}>
+                               <div style={searchRequestCSS.resultLargeHeader}>{this.state.resultHeader}</div>
+                               <span style={{content: '', display: 'block', width: '2em', borderTop: '2px solid #000,'}}></span>
+                            
+                            </div>
+
+                           <br></br>
 
                            {this.state.responseMovieList}
                         </div>
@@ -441,7 +444,21 @@ class SearchRequest extends React.Component {
     )
   }
 
-  
+    // <form style={searchRequestCSS.controls}>
+    //     <label style={searchRequestCSS.withData}>
+    //         <div style={searchRequestCSS.sortOptions}>Discover</div>
+    //     </label>
+    // </form>
+
+    // <form style={searchRequestCSS.controls}>
+    //     <label style={searchRequestCSS.withData}>
+    //         <select style={searchRequestCSS.sortOptions}>
+    //             <option value="discover">All</option>
+    //             <option value="nowplaying">Movies</option>
+    //             <option value="nowplaying">TV Shows</option>
+    //         </select>
+    //     </label>
+    // </form>
 }
 
 export default SearchRequest;
diff --git a/client/app/components/styles/searchRequestStyle.jsx b/client/app/components/styles/searchRequestStyle.jsx
index 17b5b11..0700a4e 100644
--- a/client/app/components/styles/searchRequestStyle.jsx
+++ b/client/app/components/styles/searchRequestStyle.jsx
@@ -10,19 +10,19 @@ export default {
 
     backgroundLargeHeader: {
       width: '100%',
-      minHeight: '400px',
+      minHeight: '180px',
       backgroundColor: 'rgb(1, 28, 35)',
       // backgroundImage: 'radial-gradient(circle, #004c67 0, #005771 120%)',
       zIndex: 1,
-      marginBottom: '-100px'
+      marginBottom: '80px'
     },
 
     backgroundSmallHeader: {
       width: '100%',
-      minHeight: '300px',
+      minHeight: '120px',
       backgroundColor: '#011c23',
       zIndex: 1,
-      marginBottom: '-100px'
+      marginBottom: '40px'
     },
 
     requestWrapper: {
@@ -44,7 +44,7 @@ export default {
 
     pageTitleLargeSpan: {
       color: 'white',
-      fontSize: '4em',
+      fontSize: '3em',
       marginTop: '4vh',
       marginBottom: '6vh'
     },
@@ -54,39 +54,35 @@ export default {
       fontSize: '2em',
       marginTop: '3vh',
       marginBottom: '3vh'
-    },    
-
-    box: {
-      height: '50px',
     },
 
     searchLargeContainer: {
-      margin: '0 25%',
+      height: '52px',
+      width: '77%',
+      paddingLeft: '23%',
+      backgroundColor: 'white',
     },
 
     searchSmallContainer: {
-      margin: '0 10%',
     },
 
     searchIcon: {
       position: 'absolute',
-      fontSize: '1.2em',
-      marginTop: '12px',
-      marginLeft: '-13px',
-      color: '#4f5b66'
+      fontSize: '1.6em',
+      marginTop: '7px',
+      color: '#4f5b66',
+      display: 'block',
     },
 
     searchLargeBar: {
-      width: '100%',
+      width: '50%',
       height: '50px',
       background: '#ffffff',
       border: 'none',
-      fontSize: '10pt',
+      fontSize: '12pt',
       float: 'left',
       color: '#63717f',
-      paddingLeft: '45px',
-      marginLeft: '-25px',
-      borderRadius: '5px',
+      paddingLeft: '40px',
     },
 
     searchSmallBar: {
@@ -94,14 +90,58 @@ export default {
       height: '50px',
       background: '#ffffff',
       border: 'none',
-      fontSize: '13pt',
+      fontSize: '11pt',
       float: 'left',
       color: '#63717f',
-      paddingLeft: '45px',
+      paddingLeft: '65px',
       marginLeft: '-25px',
       borderRadius: '5px',
     },
 
+
+    // Dropdown for selecting tmdb lists
+    controls: {
+      textAlign: 'left',
+      paddingTop: '8px',
+      width: '33.3333%',
+      marginLeft: '0',
+      marginRight: '0',
+    },
+
+    withData: {
+      boxSizing: 'border-box',
+      marginBottom: '0',
+      display: 'block',
+      padding: '0',
+      verticalAlign: 'baseline',
+      font: 'inherit',
+      textAlign: 'left',
+      boxSizing: 'border-box',
+    },
+
+    sortOptions: {
+      border: '1px solid #000',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      lineHeight: 'normal',
+      textAlign: 'left',
+      padding: '4px 12px',
+      paddingRight: '2rem',
+      backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgPHRpdGxlPmFycm93LWRvd24tbWljcm88L3RpdGxlPgogIDxwb2x5bGluZSBwb2ludHM9IjE0IDQuNjcgOSAxMy4zMyA0IDQuNjciIHN0eWxlPSJmaWxsOiBub25lO3N0cm9rZTogIzAwMDtzdHJva2UtbWl0ZXJsaW1pdDogMTA7c3Ryb2tlLXdpZHRoOiAycHgiLz4KPC9zdmc+Cg==")',
+      backgroundSize: '18px 18px',
+      backgroundPosition: 'right 8px center',
+      backgroundRepeat: 'no-repeat',
+      width: 'auto',
+      display: 'inline-block',
+      outline: 'none',
+      boxSizing: 'border-box',
+      fontSize: '15px',
+      WebkitAppearance: 'none',
+      MozAppearance: 'none',
+      appearance: 'none',
+    },
+
+
     searchFilterActive: {
       color: '#00d17c',
       fontSize: '1em',
@@ -116,7 +156,6 @@ export default {
       cursor: 'pointer'
     },
 
-
     filter: {
       color: 'white',
       paddingLeft: '40px',
@@ -124,9 +163,9 @@ export default {
     },
 
     resultLargeHeader: {
-      paddingLeft: '30px',
       color: 'black',
       fontSize: '1.6em',
+      width: '20%',
     },
 
     resultSmallHeader: {