[css] updated for homepage to be adaptative to phones

linagora · Jul 24, 2024 · 36653e1 · 36653e1
1 parent 3f4d5de
commit 36653e1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 46 deletions.
diff --git a/src/components/NavBar.css b/src/components/NavBar.css
@@ -1,24 +1,30 @@
 .navbar {
-  overflow: hidden;
   position: fixed;
   top: 0;
-  width: 100%;
+  width: 100vw;
   color: gray;
-  display: flex;
-  flex-wrap: wrap;
-  overflow-wrap: break-word;
   z-index: 1100;
 }
-.navbar div :hover {
-  color: white;
+
+.navbar img {
+  margin-right: 2vw;
 }
 
 .navbar p {
   cursor: pointer;
 }
 
-.bm-cross {
-  background: gray;
+.navbarOptions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-wrap: break-word;
+  justify-content: space-between;
+}
+
+.menuBurger {
+  position: fixed;
+  right: 2vw;
 }
 
 .menu {

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -29,56 +29,59 @@ function Navbar() {
   return (
     <AppBar color="secondary" className="navbar">
       <Toolbar>
-        <Typography sx={{ flexGrow: 1 }}>
+        <Typography>
           <img
             src={require("../static/llng-logo-32.png")}
             alt="LemonLogo"
             style={{ backgroundColor: "white" }}
           />
         </Typography>
         <Divider />
-        <Typography
-          variant="h6"
-          component="div"
-          onClick={() => dispatch(push("/manager.html"))}
-          style={{ cursor: "pointer", marginRight: "15px" }}
-          sx={{ flexGrow: 1 }}
-        >
-          {t("Configuration")}
-        </Typography>
-        <Typography
-          variant="h6"
-          component="div"
-          style={{ cursor: "pointer", marginRight: "15px" }}
-          sx={{ flexGrow: 1 }}
-        >
-          {t("sessions")}
-        </Typography>
-        <Typography
-          variant="h6"
-          component="div"
-          style={{ cursor: "pointer", marginRight: "15px" }}
-          sx={{ flexGrow: 1 }}
-        >
-          {t("notifications")}
-        </Typography>
-        <Typography
-          variant="h6"
-          component="div"
-          style={{ cursor: "pointer", marginRight: "15px" }}
-          sx={{ flexGrow: 1 }}
-        >
-          {t("secondFactors")}
-        </Typography>
+        <div className="navbarOptions">
+          <Typography
+            variant="h6"
+            component="div"
+            onClick={() => dispatch(push("/manager.html"))}
+            style={{ cursor: "pointer", marginRight: "15px" }}
+            sx={{ flexGrow: 1 }}
+          >
+            {t("Configuration")}
+          </Typography>
+          <Typography
+            variant="h6"
+            component="div"
+            style={{ cursor: "pointer", marginRight: "15px" }}
+            sx={{ flexGrow: 1 }}
+          >
+            {t("sessions")}
+          </Typography>
+          <Typography
+            variant="h6"
+            component="div"
+            style={{ cursor: "pointer", marginRight: "15px" }}
+            sx={{ flexGrow: 1 }}
+          >
+            {t("notifications")}
+          </Typography>
+          <Typography
+            variant="h6"
+            component="div"
+            style={{ cursor: "pointer", marginRight: "15px" }}
+            sx={{ flexGrow: 1 }}
+          >
+            {t("secondFactors")}
+          </Typography>
+        </div>
+
         <IconButton
           size="large"
           edge="end"
-          aria-label="account of current user"
+          className="menuBurger"
+          aria-label="menu burger"
           aria-controls="menu-appbar"
           aria-haspopup="true"
           onClick={() => setMenuOpen(true)}
           color="inherit"
-          sx={{ flexGrow: 1 }}
         >
           <MenuIcon />
         </IconButton>

diff --git a/src/dashboards/HomePage.css b/src/dashboards/HomePage.css
@@ -18,6 +18,8 @@ th {
   flex-direction: row;
   align-content: space-evenly;
   margin: 2%;
+  flex-wrap: wrap;
+  overflow-wrap: break-word;
 }
 
 .descBox {
@@ -30,12 +32,14 @@ th {
 }
 
 .logo {
-  width: 400px;
+  width: 20vw;
 }
 
 .search-container {
   display: flex;
   margin: 15px;
+  flex-wrap: wrap;
+  overflow-wrap: break-word;
 }
 
 .search {