Merge branch 'responsiveForMobile' into 'master'

Responsive styling

See merge request it2810-h21/team-54/project-3!15

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;
  
 }
@@ -94,3 +93,106 @@ table th:second-child{
   width: 5vw;
   height: auto;
 }
+
+.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;
+  }
+}

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>
         )
     }

client/src/components/PrintTable.tsx

 // 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>

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
 }