make resposive of dashboard.

WildCodeSchool · Feb 6, 2024 · bdc0017 · bdc0017
1 parent 13ad5fd
commit bdc0017
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 50 deletions.
diff --git 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','[email protected]','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
+INSERT INTO `user` VALUES (1,'johny','demo','0687274894','[email protected]','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
 ),(
   28,'erftgyhuj','rfghj','rftgyhuj','[email protected]','dcfvgbh','$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i',0,''
   ),(

diff --git 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
@@ -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
@@ -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
@@ -27,8 +27,8 @@ function Dashboard3() {
           labelDash3="Prénoms"
           labelDash4="Tel"
           labelDash5="Email"
-          labelDash6="Administrateur"
-          labelDash7=" "
+          labelDash6="Admin"
+          labelDash7="Action"
         />
       </div>
       <RowDash2 />