adapt website for mobile phone

frontend/src/components/Comments.js

 import React, { useEffect, useRef, useState } from "react";
 import axios from "axios";
+import { AiOutlineInfoCircle } from "react-icons/ai";
 import { BiSend } from "react-icons/bi";
+import { BsChatText } from "react-icons/bs";
+
+import { getSiblings } from "../utils";
 
 import "../styles/Comments.css";
 
@@ -11,6 +15,9 @@ export default function Messages({ place, infos }) {
   const input = useRef();
   const chat = useRef();
 
+  let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+  width = width > 600;
+
   const Submit = (ev) => {
     if (newComment.replace(/\s/g, "").length) {
       ev.preventDefault();
@@ -43,6 +50,34 @@ export default function Messages({ place, infos }) {
     }
   };
 
+  const OpenSideBar = (ev) => {
+    if (!width && ev.target.parentNode.parentNode.className == "comments-side-bar") {
+      ev.preventDefault();
+      ev.stopPropagation();
+      let sidebar = ev.target.parentNode.parentNode;
+      if (!parseInt(sidebar.style.width, 10)) {
+        let siblings = getSiblings(sidebar);
+        for (let sibling of siblings) {
+          sibling.style.width = 0;
+        }
+        if (ev.target.id == "comments-icon-left") {
+          let otherIcon = document.getElementById("comments-icon-right");
+          otherIcon.style.cssText = "background-color: none";
+        } else if (ev.target.id == "comments-icon-right") {
+          let otherIcon = document.getElementById("comments-icon-left");
+          otherIcon.style.cssText = "background-color: none";
+        }
+        sidebar.style.width = "100%";
+        ev.target.style.cssText = "background-color: white; color: black";
+      } else {
+        let mainPage = document.getElementById("restaurant-main-page");
+        mainPage.style.width = "100%";
+        sidebar.style.width = 0;
+        ev.target.style.cssText = "background-color: none; color: white";
+      }
+    }
+  };
+
   useEffect(() => {
     axios
       .get(
@@ -76,7 +111,19 @@ export default function Messages({ place, infos }) {
 
   return (
     <div className="comments-side-bar">
-      <div className="comments-title">{infos ? "Infos" : "Commentaire"}</div>
+      <div className="comments-title">
+        {infos ? (
+          <>
+            <AiOutlineInfoCircle id="comments-icon-left" onClick={OpenSideBar} />
+            Infos
+          </>
+        ) : (
+          <>
+            <BsChatText id="comments-icon-right" onClick={OpenSideBar} />
+            Commentaires
+          </>
+        )}
+      </div>
       <div ref={chat} className={`comments-scroll-bar ${infos && "infos-scroll-bar"}`}>
         {!messages.length ? (
           loading ? (

frontend/src/components/Footer.js

@@ -7,7 +7,7 @@ export default function Footer() {
     <footer className="footer">
       <div className="py-2 bg-dark">
         <div className="container text-center">
-          Fait par{" "}
+          Développé par{" "}
           <a href="https://viarezo.fr" className="VR-link">
             ViaRézo
           </a>

frontend/src/components/Header.js

@@ -4,15 +4,18 @@ import { Link } from "react-router-dom";
 import "../styles/Header.css";
 
 export default function Header({ selection, setSelection }) {
+  let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+  width = width > 600;
+
   return (
     <div id="header-container">
       <div id="header-restaurant-status">
-        {selection
-          ? `${selection.name} : actuellement ${selection.status ? "ouvert" : "fermé"}`
-          : "Accueil"}
+        {!selection
+          ? "Accueil"
+          : `${selection.name} : actuellement ${selection.status ? "ouvert" : "fermé"}`}
       </div>
       <Link id="header-home-link" to="/" onClick={() => setSelection(null)}>
-        <h2>Eatfast</h2>
+        <h2>{width || !selection ? "Eatfast" : selection.name}</h2>
       </Link>
       <div id="header-timetable">{selection && `horaires : ${selection.timetable}`}</div>
     </div>

frontend/src/styles/Comments.css

 .comments-title {
     font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0.5rem;
 }
 
 .comments-input {
@@ -25,6 +29,7 @@
     display: flex;
     flex-direction: column; 
     justify-content: space-between;
+    overflow: hidden;
 }
 
 .comments-scroll-bar {
@@ -87,7 +92,8 @@
     height: 100%;
     display: flex;
     align-items: center;
-    padding: 1rem;
+    padding: 1.5rem;
+    justify-content: center;
 }
 
 .comments-loading {
@@ -99,9 +105,44 @@
     direction: ltr;
 }
 
+#comments-icon-left, #comments-icon-right {
+    height: 2rem;
+    width: 2rem;
+    margin-right: 0.5rem;
+}
+
 @media only screen and (max-width: 600px) {
     .comments-side-bar {
         width: 0px;
-        overflow: hidden;
+    }
+
+    #comments-icon-left, #comments-icon-right {
+        position: absolute;
+        top: 0;
+        height: 3rem;
+        width: 3rem;
+        margin: 1rem;
+        padding: 0.5rem;
+        border-radius: 5px;
+    }
+
+    #comments-icon-left {
+        left: 0;
+    }
+
+    #comments-icon-right {
+        right: 0;
+    }
+
+    .comments-title {
+        font-size: 2rem;
+    }
+
+    .no-comments {
+        font-size: 1.4rem;
+    }
+
+    .comment-input-container {
+        padding-left: 0rem;
     }
 }
\ No newline at end of file

frontend/src/styles/Header.css

@@ -25,6 +25,10 @@
 }
 
 @media only screen and (max-width: 600px) {
+    #header-home-link > h2 {
+        font-size: 2rem;
+    }
+
     #header-restaurant-status {
         display: none;
     }
@@ -35,8 +39,4 @@
         padding-top: .5rem;
         padding-bottom: .5rem;
     }
-
-    #header-home-link > h2 {
-        font-size: 2rem;
-    }
 }
\ No newline at end of file

frontend/src/styles/WaitingTime.css

@@ -14,6 +14,8 @@
     font-size: 1.8rem;
     display: inline;
     vertical-align: baseline;
+    padding-left: 3rem;
+    padding-right: 3rem;
 }
 
 #waiting-time-number {

frontend/src/styles/restaurant.css

@@ -8,6 +8,7 @@
     width: 50%;
     flex-direction: column;
     align-content: center;
+    overflow: hidden;
 }
 
 @media only screen and (max-width: 600px) {

frontend/src/utils.js

+let getSiblings = function (e) {
+  // for collecting siblings
+  let siblings = [];
+  // if no parent, return no sibling
+  if (!e.parentNode) {
+    return siblings;
+  }
+  // first child of the parent node
+  let sibling = e.parentNode.firstChild;
+
+  // collecting siblings
+  while (sibling) {
+    if (sibling.nodeType === 1 && sibling !== e) {
+      siblings.push(sibling);
+    }
+    sibling = sibling.nextSibling;
+  }
+  return siblings;
+};
+
+export { getSiblings };