From bdc0017deec04c1460f6a3b7c83ddf8b88546c1d Mon Sep 17 00:00:00 2001
From: Nassime HARMACH <Nassitch@hotmail.fr>
Date: Tue, 6 Feb 2024 17:00:20 +0100
Subject: [PATCH] make resposive of dashboard.

---
 backend/database/database.sql                 |  2 +-
 .../src/components/Dashboards/RowDash.css     | 20 ++------
 .../src/components/Dashboards/RowDash2.css    | 51 ++++++++++---------
 .../src/components/Dashboards/RowDash2.jsx    | 14 ++---
 frontend/src/pages/Dashboard/Dashboard3.jsx   |  4 +-
 5 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/backend/database/database.sql b/backend/database/database.sql
index f0db026..f42097c 100644
--- a/backend/database/database.sql
+++ b/backend/database/database.sql
@@ -420,7 +420,7 @@ CREATE TABLE `user` (
 
 LOCK TABLES `user` WRITE;
 /*!40000 ALTER TABLE `user` DISABLE KEYS */;
-INSERT INTO `user` VALUES (1,'johny','demo','06 87 27 48 94','john.doe@externatic.com','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
+INSERT INTO `user` VALUES (1,'johny','demo','0687274894','john.doe@externatic.com','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
 ),(
   28,'erftgyhuj','rfghj','rftgyhuj','adrien.russo@gmail.com','dcfvgbh','$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i',0,''
   ),(
diff --git a/frontend/src/components/Dashboards/RowDash.css b/frontend/src/components/Dashboards/RowDash.css
index f1f8bda..daa059b 100644
--- a/frontend/src/components/Dashboards/RowDash.css
+++ b/frontend/src/components/Dashboards/RowDash.css
@@ -1,26 +1,16 @@
 .offerDash-item {
-  display: flex;
-  justify-content: space-between;
-}
-
-.offerDash-item {
-  display: flex;
-  background-color: var(--background-input);
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
   margin-block: 10px;
   padding: 5px 10px;
-  border-radius: 10px;
   align-items: center;
+  background-color: var(--background-input);
+  border-radius: 10px;
 }
 
 .offerDash-item > p {
   font-size: 14px;
-}
-
-.offerDash-item > p:nth-child(2) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70px;
+  width: 25%;
 }
 
 .icon-dash {
diff --git a/frontend/src/components/Dashboards/RowDash2.css b/frontend/src/components/Dashboards/RowDash2.css
index 554cba5..1673306 100644
--- a/frontend/src/components/Dashboards/RowDash2.css
+++ b/frontend/src/components/Dashboards/RowDash2.css
@@ -1,27 +1,16 @@
-.offerDash-item {
-  display: flex;
-  justify-content: space-between;
-}
-
-.offerDash-item {
-  display: flex;
-  background-color: var(--background-input);
+.userDash-item {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
   margin-block: 10px;
   padding: 5px 10px;
-  border-radius: 10px;
-  /* justify-content: center; */
   align-items: center;
+  background-color: var(--background-input);
+  border-radius: 10px;
 }
 
-.offerDash-item > p {
+.userDash-item > p {
   font-size: 14px;
-}
-
-.offerDash-item > p:nth-child(2) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70px;
+  width: 14.2%;
 }
 
 .icon-dash {
@@ -30,23 +19,35 @@
 }
 
 @media screen and (min-width: 1200px) {
-  .offerDash-item > p {
+  .userDash-item > p {
     font-size: 20px;
     margin-block: 10px;
+    width: 14.2%;
+  }
+
+  .field-nbr {
+    max-width: 25px;
+    background-color: red;
+  }
+
+  .field-string {
+    max-width: 155px;
   }
 
-  .offerDash-item > p:nth-child(1) {
-    white-space: initial;
-    min-width: 25px;
+  .field-long-string {
+    min-width: 210px;
   }
 
-  .offerDash-item > p:nth-child(2) {
-    white-space: initial;
-    max-width: 100px;
+  .field-bool {
+    max-width: 25px;
+    margin-left: 75px;
   }
 
   .icon-dash {
     flex-direction: row;
+    max-width: 65px;
+    margin-left: 50px;
+    background-color: red;
   }
 
   .icon-dash > button > i {
diff --git a/frontend/src/components/Dashboards/RowDash2.jsx b/frontend/src/components/Dashboards/RowDash2.jsx
index 1f648bc..de36d9f 100644
--- a/frontend/src/components/Dashboards/RowDash2.jsx
+++ b/frontend/src/components/Dashboards/RowDash2.jsx
@@ -40,13 +40,13 @@ function RowDash2() {
   return (
     <div className="rowDash-container">
       {users.map((user) => (
-        <div key={user.id} className="offerDash-item">
-          <p className="array-box">{user.id}</p>
-          <p className="array-box">{user.lastname}</p>
-          <p className="array-box">{user.firstname}</p>
-          <p className="array-box">{user.phone}</p>
-          <p className="bigArray-box">{user.email}</p>
-          <p>{user.is_admin}</p>
+        <div key={user.id} className="userDash-item">
+          <p className="field-nbr">{user.id}</p>
+          <p className="field-string">{user.lastname}</p>
+          <p className="field-string">{user.firstname}</p>
+          <p className="field-string">{user.phone}</p>
+          <p className="field-long-string">{user.email}</p>
+          <p className="field-bool">{user.is_admin}</p>
           <div className="icon-dash">
             <button
               type="button"
diff --git a/frontend/src/pages/Dashboard/Dashboard3.jsx b/frontend/src/pages/Dashboard/Dashboard3.jsx
index 4bc0f19..40e839e 100644
--- a/frontend/src/pages/Dashboard/Dashboard3.jsx
+++ b/frontend/src/pages/Dashboard/Dashboard3.jsx
@@ -27,8 +27,8 @@ function Dashboard3() {
           labelDash3="Prénoms"
           labelDash4="Tel"
           labelDash5="Email"
-          labelDash6="Administrateur"
-          labelDash7=" "
+          labelDash6="Admin"
+          labelDash7="Action"
         />
       </div>
       <RowDash2 />