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