diff --git a/frontend/src/styles/Comments.css b/frontend/src/styles/Comments.css index 4b61c0165397e2c01bfd124167002852ea12fe9b..90706f7cd874e9c02b021766b08690a8c7800b6c 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 5985278035f7b3a8b6ca3b12779ede360b10ff59..f968bcb6d2942c4f08de6e53d101ae175dd36b0f 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 4e57c62e1d3ceb4b101d546ce98e2a78cdf7171b..e01661b4bab2260449459c857442b8d578559463 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 0d50500d898ae963372bceb7df9fac3c7e203f78..9c7ca761fd72167758e37cf8ff23a7f3d14f6fdf 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 40a986be615055d25bdd7380f56629ef15454903..fe564b8827e7c68c69c4733330a3766d30989454 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 a6e921eafb2f2da51fe909c0d1ccf1b1933d2674..39da0d04efe898c698e3004f3aca93306fc4b867 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> );