diff --git a/client/src/App.css b/client/src/App.css index cce19c6d220c51e570c272c00136f3ba081aec4a..ecc57d331c1f4eb33220aa97a599ef6cafd7749b 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -14,7 +14,6 @@ } .header { - background-color: rgb(1, 0, 34); min-height: 5vh; display: flex; @@ -23,7 +22,7 @@ justify-content: center; font-size: calc(10px + 2vmin); color: white; - font-size: large; + font-size: 1vw; margin: auto; } @@ -93,4 +92,107 @@ table th:second-child{ .thumbnails{ width: 5vw; height: auto; -} \ No newline at end of file +} + +.button { + background-color: #4CAF50; /* Green */ + border: none; + color: white; + padding: 6px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; +} + +.button2 { + background-color: white; + color: black; + border: 2px solid #008CBA; +} + +.button2:hover { + background-color: #008CBA; + color: white; +} + + +/*ARLEMs table*/ +.table-responsive { + width: 100%; + border-collapse: collapse; + +} + +.table-responsive td, th { + border-bottom: 1px solid #ccc; + text-align: center; +} + + +input[type="text"]{ padding: 10px 0.5vw; line-height: 10px; width: 15%;} + +@media only screen and (max-width: 840px) { + + .header { + + font-size: 3vw; + flex-direction: column; + } + + input[type="text"]{ padding: 10px 1vw; line-height: 10px; width: 70%;} + + + /* Force table to not be like tables anymore */ + .table-responsive, thead, tbody, td, tr { + display: block; + } + + .table-responsive th { + display: none; + } + + + /* Hide table headers (but not display: none;, for accessibility) */ + .table-responsive thead tr { + position: absolute; + + + } + + .table-responsive tr { border: 2px solid #ccc; } + + .table-responsive td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid #eee; + position: relative; + } + + .table-responsive td:before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + top: 1px; + left: 6px; + padding-right: 10px; + white-space: nowrap; + font-weight: bold; + } + + + .table-responsive td:nth-of-type(1):before { content: "Title"; } + .table-responsive td:nth-of-type(2):before { content: "Genre"; } + .table-responsive td:nth-of-type(3):before { content: "Year released"; } + .table-responsive td:nth-of-type(4):before { content: "Director"; } + .table-responsive td:nth-of-type(5):before { content: "Description"; } + .table-responsive td:nth-of-type(6):before { content: "Thumbnail"; } + + + .thumbnails{ + width: 20vw; + } +} diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 5f7ee01d2a1361afede3ae1c6bb09dbc5a39720c..1c00a79c8f28282eb3f7aac99553b9ae4c84835b 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -30,13 +30,13 @@ class Header extends React.Component<MoviesProps, MyState> { render() { return ( <div className="header"> - Movie title: + <span>Movie title:</span> <input type="text" placeholder="Search for movie titles..." onChange={this.handleChange} id="textfield1"></input> - Movie genre: + <span>Movie genre:</span> <input type="text" placeholder="Filter on genre..." onChange={this.handleChange} id="textfield2"></input> - Order by year: - <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input> - <button onClick={this.search}>Search</button> + {/* Order by year: */} + {/* <input type="checkbox" id="checkbox1" onChange={this.handleChange}></input> */} + <button className="button button2" onClick={this.search} >Search</button> </div> ) } diff --git a/client/src/components/PrintTable.tsx b/client/src/components/PrintTable.tsx index 290bc9a1262925af2f77440231e1598553952c52..932a9fe79416ed0f3b71490cfa0f7eb4ce05e9c7 100644 --- a/client/src/components/PrintTable.tsx +++ b/client/src/components/PrintTable.tsx @@ -1,7 +1,7 @@ // Returns list of movies function PrintTable(props: any) { return ( - <div id="tableContainer"><table> + <div id="tableContainer"><table className="table-responsive"> <thead> <tr> <th>Title</th> diff --git a/server/src/server_local.ts b/server/src/server_local.ts index 70cd2d5de04490e328ff2745a0ea51a845beefa7..e005c64daa2ddbe7254c040314e1699cef9cd345 100644 --- a/server/src/server_local.ts +++ b/server/src/server_local.ts @@ -76,9 +76,7 @@ const RootQuery = new GraphQLObjectType({ let query = ''; if(typeof args.title!='undefined' && typeof args.genre!='undefined'){ console.log("resolve") - query = getSearchQuery(args.title, args.genre)} - - if(args.order) {query += ' ORDER BY year DESC;';} + query = getSearchQuery(args.title, args.genre, args.order)} const response = await sendQuery(query); return response[0]; } @@ -90,7 +88,7 @@ function getQuery(key: string, value: string){ return 'SELECT * FROM movie WHERE ' + key + ' = "' + value + '"' } -function getSearchQuery(title: string, genre: string): string { +function getSearchQuery(title: string, genre: string, order: boolean): string { let query = 'SELECT * FROM movie' if (title != '') { query = query + ' WHERE title LIKE "%' + title + '%"' @@ -104,6 +102,9 @@ function getSearchQuery(title: string, genre: string): string { if (genre != '') { query = query + ' genre LIKE "%' + genre + '%"' } + if (order) { + query = query + ' ORDER BY year DESC' + } console.log(query) return query }