From e1db3f6a5b595e4dec49adae077ef1a3ad87dfdf Mon Sep 17 00:00:00 2001
From: Antoine Gaudron-desjardins <antoine.gaudrondesjardins@student-cs.fr>
Date: Mon, 11 Jul 2022 12:17:15 +0200
Subject: [PATCH] adapt to mobile phone

---
 frontend/src/styles/Comments.css   |  2 +-
 frontend/src/styles/Header.css     | 17 ++++++++++
 frontend/src/styles/Home.css       | 43 ++++++++++++++++++------
 frontend/src/styles/restaurant.css |  2 +-
 frontend/src/views/Details.js      |  6 ++--
 frontend/src/views/HomePage.js     | 52 +++++++++++++++++++++---------
 6 files changed, 91 insertions(+), 31 deletions(-)

diff --git a/frontend/src/styles/Comments.css b/frontend/src/styles/Comments.css
index 4b61c01..90706f7 100644
--- a/frontend/src/styles/Comments.css
+++ b/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;
diff --git a/frontend/src/styles/Header.css b/frontend/src/styles/Header.css
index 5985278..f968bcb 100644
--- a/frontend/src/styles/Header.css
+++ b/frontend/src/styles/Header.css
@@ -22,4 +22,21 @@
     flex: 1;
     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
diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css
index 4e57c62..e01661b 100644
--- a/frontend/src/styles/Home.css
+++ b/frontend/src/styles/Home.css
@@ -1,27 +1,32 @@
 #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 {
@@ -52,4 +57,24 @@
 .home-waiting-time {
     white-space: nowrap;
     text-align: left;
-}
\ No newline at end of file
+}
+
+@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;
+    }
+}
diff --git a/frontend/src/styles/restaurant.css b/frontend/src/styles/restaurant.css
index 0d50500..9c7ca76 100644
--- a/frontend/src/styles/restaurant.css
+++ b/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%;
     }
diff --git a/frontend/src/views/Details.js b/frontend/src/views/Details.js
index 40a986b..fe564b8 100644
--- a/frontend/src/views/Details.js
+++ b/frontend/src/views/Details.js
@@ -1,7 +1,5 @@
 import React from "react";
 
 export default function Details() {
-    return(
-        <div>details page</div>
-    )
-}
\ No newline at end of file
+  return <div>details page</div>;
+}
diff --git a/frontend/src/views/HomePage.js b/frontend/src/views/HomePage.js
index a6e921e..39da0d0 100644
--- a/frontend/src/views/HomePage.js
+++ b/frontend/src/views/HomePage.js
@@ -1,12 +1,34 @@
-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,26 +36,24 @@ 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">
-                    <Link
-                      to={encodeURIComponent(restaurant.name)}
-                      onClick={() => setSelection(restaurant)}
-                      className="home-link-item"
-                    >
-                      {restaurant.name}
-                    </Link>
-                    <span className="home-arrow">&#10132;</span>
+                    <span className="home-arrow-reverse">
+                      <Link
+                        to={encodeURIComponent(restaurant.name)}
+                        onClick={() => setSelection(restaurant)}
+                        className="home-link-item"
+                      >
+                        {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>
               );
-- 
GitLab