adapt to mobile phone

frontend/src/styles/Comments.css

@@ -99,7 +99,7 @@
     direction: ltr;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media only screen and (max-width: 600px) {
     .comments-side-bar {
         width: 0px;
         overflow: hidden;

frontend/src/styles/Header.css

@@ -23,3 +23,20 @@
     text-align: right;
     font-weight: lighter;
 }
+
+@media only screen and (max-width: 600px) {
+    #header-restaurant-status {
+        display: none;
+    }
+
+    #header-container {
+        flex-direction: column;
+        align-items: center;
+        padding-top: .5rem;
+        padding-bottom: .5rem;
+    }
+
+    #header-home-link > h2 {
+        font-size: 2rem;
+    }
+}
\ No newline at end of file

frontend/src/styles/Home.css

 #home-container {
-    margin-top: 2rem;
+    padding-top: 2%;
+    padding-bottom: 10%;
     display: flex;
     flex-direction: column;
     align-content: center;
+    height: 100%;
+}
+
+#home-selection-title {
+    margin-bottom: 0;
+    padding-bottom: 2%;
 }
 
 #home-table {
-    margin-top: 2rem;
     width: fit-content;
     align-self: center;
+    min-height: 100%;
 }
 
-.home-table-row {
-    height: 3rem;
+.home-restaurant-name {
+    align-items: center;
+    padding-right: 5rem;
 }
 
-.home-restaurant-name {
+.home-arrow-reverse {
     display: flex;
     flex-direction: row-reverse;
     justify-content: left;
-    height: 3rem;
-    align-items: center;
-    padding-right: 5rem;
 }
 
 .home-link-item {
@@ -53,3 +58,23 @@
     white-space: nowrap;
     text-align: left;
 }
+
+@media only screen and (max-width: 600px) {
+    #home-selection-title {
+        padding-top: 10%;
+        margin-bottom: 0;
+        padding-bottom: 8%;
+    }
+
+    #home-table {
+        min-height: 70%;
+    }
+
+    .home-restaurant-status {
+        display: none;
+    }
+
+    .home-restaurant-name {
+        padding-right: 2rem;
+    }
+}

frontend/src/styles/restaurant.css

@@ -10,7 +10,7 @@
     align-content: center;
 }
 
-@media only screen and (max-device-width: 600px) {
+@media only screen and (max-width: 600px) {
     #restaurant-main-page {
         width: 100%;
     }

frontend/src/views/Details.js

 import React from "react";
 
 export default function Details() {
-    return(
-        <div>details page</div>
-    )
+  return <div>details page</div>;
 }

frontend/src/views/HomePage.js

-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import "../styles/Home.css";
 
 export default function HomePage({ restaurantsList, setSelection, loading }) {
+  const [message, setMessage] = useState(() => () => "");
+
+  useEffect(() => {
+    let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+    width = width > 600;
+    if (width) {
+      setMessage(() => (restaurant) => {
+        if (restaurant.waiting_time) {
+          return `Temps d'attente estimé à ${restaurant.waiting_time} minutes`;
+        } else {
+          return "Pas de données";
+        }
+      });
+    } else {
+      setMessage(() => (restaurant) => {
+        if (restaurant.waiting_time) {
+          return `${restaurant.waiting_time} min d'attente`;
+        }
+      });
+    }
+  }, [loading]);
+
   return (
     <div id="home-container">
-      <h1>Sélectionnez votre restaurant</h1>
+      <h1 id="home-selection-title">Sélectionnez votre restaurant</h1>
       {loading ? (
         <span>Chargement...</span>
       ) : (
@@ -14,8 +36,9 @@ export default function HomePage({ restaurantsList, setSelection, loading }) {
           <tbody>
             {restaurantsList.map((restaurant, index) => {
               return (
-                <tr className="home-table-row" key={index}>
+                <tr key={index}>
                   <td className="home-restaurant-name">
+                    <span className="home-arrow-reverse">
                       <Link
                         to={encodeURIComponent(restaurant.name)}
                         onClick={() => setSelection(restaurant)}
@@ -24,16 +47,13 @@ export default function HomePage({ restaurantsList, setSelection, loading }) {
                         {restaurant.name}
                       </Link>
                       <span className="home-arrow">&#10132;</span>
+                    </span>
                   </td>
                   <td className="home-restaurant-status">
                     Actuellement {restaurant.status ? "ouvert" : "fermé"}
                   </td>
                   {restaurant.status && (
-                    <td className="home-waiting-time">
-                      {restaurant.waiting_time
-                        ? `Temps d'attente estimé à ${restaurant.waiting_time} minutes`
-                        : "Pas de données"}
-                    </td>
+                    <td className="home-waiting-time">{message(restaurant)}</td>
                   )}
                 </tr>
               );