From c76d9db0bc7b15fdbb77393a41e426522d7a6198 Mon Sep 17 00:00:00 2001 From: aradjafari <arad.jafari@gmail.com> Date: Sun, 31 Oct 2021 11:53:08 +0100 Subject: [PATCH] MAde a responsive version for mobile which make the table columns turns vartically.Also header will change from row to cloumn --- client/src/App.css | 108 ++++++++++++++++++++++++++- client/src/components/Header.tsx | 10 +-- client/src/components/PrintTable.tsx | 2 +- server/src/server_local.ts | 9 ++- 4 files changed, 116 insertions(+), 13 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index cce19c6..ecc57d3 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 5f7ee01..1c00a79 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 290bc9a..932a9fe 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 70cd2d5..e005c64 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 } -- GitLab