KevinMidboe/seasonedShows
1
0
Fork 0
Code Issues 20 Pull Requests 2 Packages Projects Releases 8 Wiki Activity

Changed so that the output is split in two idependent mediaQuery items at the second most parent. This is a lazy way to controll all elements of when resizing to a smaller screen.

Browse Source
This commit is contained in:
Kevin
2017-09-27 00:18:06 +02:00
parent daa9a7749e
commit 86c479de15
1 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
client/app/components/SearchRequest.jsx
View File

@@ -9,6 +9,8 @@ import movieStyle from './styles/movieObjectStyle.jsx';
import URI from 'urijs'; import URI from 'urijs';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
var MediaQuery = require('react-responsive');
// TODO add option for searching multi, movies or tv shows // TODO add option for searching multi, movies or tv shows
class SearchRequest extends React.Component { class SearchRequest extends React.Component {
constructor(props){ constructor(props){
@@ -36,7 +38,7 @@ class SearchRequest extends React.Component {
this.URLs = { this.URLs = {
searchRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request', searchRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request',
// request: 'http://localhost:31459/api/v1/plex/request?page='+this.state.page+'&query=', // searchRequest: 'http://localhost:31459/api/v1/plex/request',
upcoming: 'https://apollo.kevinmidboe.com/api/v1/tmdb/upcoming', upcoming: 'https://apollo.kevinmidboe.com/api/v1/tmdb/upcoming',
// upcoming: 'http://localhost:31459/api/v1/tmdb/upcoming', // upcoming: 'http://localhost:31459/api/v1/tmdb/upcoming',
sendRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' sendRequest: 'https://apollo.kevinmidboe.com/api/v1/plex/request?query='
@@ -379,17 +381,18 @@ class SearchRequest extends React.Component {
loader={loader} loader={loader}
initialLoad={this.state.loadResults}> initialLoad={this.state.loadResults}>
<MediaQuery minWidth={600}>
<div style={searchStyle.body}> <div style={searchStyle.body}>
<div className='backgroundHeader' style={searchStyle.backgroundHeader}> <div className='backgroundHeader' style={searchStyle.backgroundLargeHeader}>
<div className='pageTitle' style={searchStyle.pageTitle}> <div className='pageTitle' style={searchStyle.pageTitle}>
<span style={searchStyle.pageTitleSpan}>Request new content</span> <span style={searchStyle.pageTitleLargeSpan}>Request new content</span>
</div> </div>
<div className='box' style={searchStyle.box}> <div className='box' style={searchStyle.box}>
<div style={searchStyle.container}> <div style={searchStyle.searchLargeContainer}>
<span style={searchStyle.searchIcon}><i className="fa fa-search"></i></span> <span style={searchStyle.searchIcon}><i className="fa fa-search"></i></span>
<input style={searchStyle.searchBar} type="text" id="search" placeholder="Search for new content..." <input style={searchStyle.searchLargeBar} type="text" id="search" placeholder="Search for new content..."
onKeyPress={(event) => this._handleQueryKeyPress(event)} onKeyPress={(event) => this._handleQueryKeyPress(event)}
onChange={event => this.updateQueryState(event)} onChange={event => this.updateQueryState(event)}
value={this.state.searchQuery}/> value={this.state.searchQuery}/>
@@ -399,15 +402,42 @@ class SearchRequest extends React.Component {
</div> </div>
<div id='requestMovieList' ref='requestMovieList' style={searchStyle.requestWrapper}> <div id='requestMovieList' ref='requestMovieList' style={searchStyle.requestWrapper}>
<span style={searchStyle.resultLargeHeader}>{this.state.resultHeader}</span>
<h1 style={searchStyle.resultHeader}>{this.state.resultHeader}</h1> <br></br><br></br>
{this.state.responseMovieList} {this.state.responseMovieList}
</div> </div>
</div>
</MediaQuery>
<MediaQuery maxWidth={600}>
<div style={searchStyle.body}>
<div className='backgroundHeader' style={searchStyle.backgroundSmallHeader}>
<div className='pageTitle' style={searchStyle.pageTitle}>
<span style={searchStyle.pageTitleSmallSpan}>Request new content</span>
</div>
<div className='box' style={searchStyle.box}>
<div style={searchStyle.searchSmallContainer}>
<span style={searchStyle.searchIcon}><i className="fa fa-search"></i></span>
<input style={searchStyle.searchSmallBar} type="text" id="search" placeholder="Search for new content..."
onKeyPress={(event) => this._handleQueryKeyPress(event)}
onChange={event => this.updateQueryState(event)}
value={this.state.searchQuery}/>
<div style={searchStyle.pageNavigationBar}>
</div> </div>
</div> </div>
</div>
<div id='requestMovieList' ref='requestMovieList' style={searchStyle.requestWrapper}>
<span style={searchStyle.resultSmallHeader}>{this.state.resultHeader}</span>
<br></br><br></br>
{this.state.responseMovieList}
</div>
</div>
</MediaQuery>
</InfiniteScroll> </InfiniteScroll>
) )
} }