Skip to content
Snippets Groups Projects
Commit e1db3f6a authored by Antoine Gaudron-Desjardins's avatar Antoine Gaudron-Desjardins
Browse files

adapt to mobile phone

parent 60682715
No related branches found
No related tags found
1 merge request!28improve front
Pipeline #43945 passed with warnings
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
direction: ltr; direction: ltr;
} }
@media only screen and (max-device-width: 600px) { @media only screen and (max-width: 600px) {
.comments-side-bar { .comments-side-bar {
width: 0px; width: 0px;
overflow: hidden; overflow: hidden;
......
...@@ -23,3 +23,20 @@ ...@@ -23,3 +23,20 @@
text-align: right; text-align: right;
font-weight: lighter; 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
#home-container { #home-container {
margin-top: 2rem; padding-top: 2%;
padding-bottom: 10%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: center; align-content: center;
height: 100%;
}
#home-selection-title {
margin-bottom: 0;
padding-bottom: 2%;
} }
#home-table { #home-table {
margin-top: 2rem;
width: fit-content; width: fit-content;
align-self: center; align-self: center;
min-height: 100%;
} }
.home-table-row { .home-restaurant-name {
height: 3rem; align-items: center;
padding-right: 5rem;
} }
.home-restaurant-name { .home-arrow-reverse {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: left; justify-content: left;
height: 3rem;
align-items: center;
padding-right: 5rem;
} }
.home-link-item { .home-link-item {
...@@ -53,3 +58,23 @@ ...@@ -53,3 +58,23 @@
white-space: nowrap; white-space: nowrap;
text-align: left; 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;
}
}
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
align-content: center; align-content: center;
} }
@media only screen and (max-device-width: 600px) { @media only screen and (max-width: 600px) {
#restaurant-main-page { #restaurant-main-page {
width: 100%; width: 100%;
} }
......
import React from "react"; import React from "react";
export default function Details() { export default function Details() {
return( return <div>details page</div>;
<div>details page</div>
)
} }
import React from "react"; import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "../styles/Home.css"; import "../styles/Home.css";
export default function HomePage({ restaurantsList, setSelection, loading }) { 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 ( return (
<div id="home-container"> <div id="home-container">
<h1>Sélectionnez votre restaurant</h1> <h1 id="home-selection-title">Sélectionnez votre restaurant</h1>
{loading ? ( {loading ? (
<span>Chargement...</span> <span>Chargement...</span>
) : ( ) : (
...@@ -14,8 +36,9 @@ export default function HomePage({ restaurantsList, setSelection, loading }) { ...@@ -14,8 +36,9 @@ export default function HomePage({ restaurantsList, setSelection, loading }) {
<tbody> <tbody>
{restaurantsList.map((restaurant, index) => { {restaurantsList.map((restaurant, index) => {
return ( return (
<tr className="home-table-row" key={index}> <tr key={index}>
<td className="home-restaurant-name"> <td className="home-restaurant-name">
<span className="home-arrow-reverse">
<Link <Link
to={encodeURIComponent(restaurant.name)} to={encodeURIComponent(restaurant.name)}
onClick={() => setSelection(restaurant)} onClick={() => setSelection(restaurant)}
...@@ -24,16 +47,13 @@ export default function HomePage({ restaurantsList, setSelection, loading }) { ...@@ -24,16 +47,13 @@ export default function HomePage({ restaurantsList, setSelection, loading }) {
{restaurant.name} {restaurant.name}
</Link> </Link>
<span className="home-arrow">&#10132;</span> <span className="home-arrow">&#10132;</span>
</span>
</td> </td>
<td className="home-restaurant-status"> <td className="home-restaurant-status">
Actuellement {restaurant.status ? "ouvert" : "fermé"} Actuellement {restaurant.status ? "ouvert" : "fermé"}
</td> </td>
{restaurant.status && ( {restaurant.status && (
<td className="home-waiting-time"> <td className="home-waiting-time">{message(restaurant)}</td>
{restaurant.waiting_time
? `Temps d'attente estimé à ${restaurant.waiting_time} minutes`
: "Pas de données"}
</td>
)} )}
</tr> </tr>
); );
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment