UI/UX complete

Satyabrat-Ojha · May 7, 2023 · 6c8da63 · 6c8da63
1 parent bf6beab
commit 6c8da63
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 4 deletions.
diff --git a/pages/cart.jsx b/pages/cart.jsx
@@ -7,7 +7,7 @@ const Cart = () => {
       <div className={styles.left}>
         <table className={styles.table}>
           <tbody>
-            <tr className={styles.tr}>
+            <tr className={styles.trTitle}>
               <th>Product</th>
               <th>Name</th>
               <th>Extras</th>

diff --git a/pages/orders/[id].jsx b/pages/orders/[id].jsx
@@ -16,13 +16,13 @@ const Order = () => {
         <div className={styles.row}>
           <table className={styles.table}>
             <tbody>
-              <tr>
+              <tr className={styles.trTitle}>
                 <th>Order ID</th>
                 <th>Customer</th>
                 <th>Address</th>
                 <th>Total</th>
               </tr>
-              <tr>
+              <tr className={styles.tr}>
                 <td>
                   <span className={styles.id}>36270086720</span>
                 </td>

diff --git a/styles/Cart.module.css b/styles/Cart.module.css
@@ -56,3 +56,58 @@
   cursor: pointer;
   margin-top: 20px;
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    flex-direction: column;
+    padding: 20px;
+  }
+
+  .table {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .trTitle {
+    display: none;
+  }
+
+  .tr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  .imgContainer {
+    width: 35vw;
+    height: 35vw;
+  }
+
+  .name,
+  .total {
+    font-size: 24px;
+  }
+
+  .extras,
+  .price,
+  .quantity {
+    font-size: 22px;
+  }
+
+  .price::before {
+    content: "Price: ";
+    font-weight: 500;
+  }
+  .quantity::before {
+    content: "Quantity: ";
+    font-weight: 500;
+  }
+  .total::before {
+    content: "Total: ";
+    font-weight: 500;
+  }
+}
diff --git a/styles/Featured.module.css b/styles/Featured.module.css
@@ -1,7 +1,8 @@
 .container {
   height: calc(100vh - 100px);
   background-color: #d1411e;
-  overflow-x: hidden;
+  overflow: hidden;
+  position: relative;
 }
 
 .arrowContainer {
@@ -27,3 +28,9 @@
   height: 100%;
   position: relative;
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    height: 40vh;
+  }
+}
diff --git a/styles/Footer.module.css b/styles/Footer.module.css
@@ -33,3 +33,22 @@
 .motto {
   color: rgb(211, 211, 211);
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    height: auto;
+    text-align: center;
+  }
+
+  .item:first-child {
+    display: none;
+  }
+
+  .item {
+    flex-direction: column;
+  }
+
+  .title {
+    font-size: 30px;
+  }
+}
diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
@@ -80,3 +80,12 @@
   font-weight: bold;
   color: #d1411e;
 }
+
+@media screen and (max-width: 480px) {
+  .item:nth-child(1) {
+    flex: 3;
+  }
+  .item:nth-child(2) {
+    display: none;
+  }
+}
diff --git a/styles/Order.module.css b/styles/Order.module.css
@@ -82,3 +82,55 @@
   margin-top: 20px;
   border: none;
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .trTitle {
+    display: none;
+  }
+
+  .tr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  .id::before {
+    content: "Order ID: ";
+    font-weight: 500;
+  }
+  .name::before {
+    content: "Customer: ";
+    font-weight: 500;
+  }
+  .address::before {
+    content: "Address: ";
+    font-weight: 500;
+  }
+  .total::before {
+    content: "Total: ";
+    font-weight: 500;
+  }
+
+  .row:last-child {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .done,
+  .undone,
+  .inProgress {
+    margin-bottom: 20px;
+  }
+
+  .wrapper {
+    width: 100%;
+  }
+}
diff --git a/styles/PizzaCard.module.css b/styles/PizzaCard.module.css
@@ -23,3 +23,18 @@
   text-align: center;
   color: #777;
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    width: 100%;
+  }
+
+  .title {
+    font-size: 30px;
+  }
+
+  .price,
+  .desc {
+    font-size: 24px;
+  }
+}
diff --git a/styles/PizzaList.module.css b/styles/PizzaList.module.css
@@ -18,3 +18,14 @@
   justify-content: center;
   flex-wrap: wrap;
 }
+
+@media screen and (max-width: 480px) {
+  .title {
+    text-align: center;
+  }
+
+  .desc {
+    width: 90%;
+    text-align: center;
+  }
+}
diff --git a/styles/Product.module.css b/styles/Product.module.css
@@ -94,3 +94,41 @@
   font-weight: 500;
   cursor: pointer;
 }
+
+@media screen and (max-width: 480px) {
+  .container {
+    height: auto;
+    text-align: center;
+    flex-direction: column;
+    margin-top: 30px;
+  }
+
+  .imgContainer {
+    width: 70vw;
+    height: 70vw;
+  }
+
+  .title {
+    margin: 5px;
+  }
+
+  .sizes {
+    width: 100%;
+    padding: 0 20px;
+  }
+
+  .ingredients {
+    flex-direction: column;
+  }
+
+  .option {
+    margin: 10px;
+    font-size: 18px;
+  }
+
+  .quantity,
+  .button {
+    padding: 10px;
+    height: 50px;
+  }
+}