Responsive

htoann · Aug 4, 2021 · 4310eae · 4310eae
1 parent d7bd2ee
commit 4310eae
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 22 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -422,6 +422,19 @@ section .login a:hover {
 section .login input {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
+section #deleteCartButton {
+  color: #fe5f1e;
+}
+
+section.menu img {
+  transition: transform 0.3s;
+  z-index: -1;
+}
+
+section.menu img:hover {
+  transform: scale(1.2);
+  z-index: -1;
+}
 
 section.status {
   background: #f8f8f8;
@@ -438,7 +451,7 @@ section.status {
   font-size: 46px;
   font-weight: 600;
   position: absolute;
-  left: -9%;
+  left: -90px;
   color: inherit;
 }
 
@@ -502,3 +515,20 @@ section.status {
   font-size: 18px;
   color: #232323;
 }
+
+@media (max-width: 1060px) {
+  .container {
+    max-width: 90%;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+@media (max-width: 768px) {
+  .status-box ul li span:before {
+    font-size: 34px;
+  }
+}
diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -104,17 +104,21 @@ section {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     }
   }
+
+  #deleteCartButton {
+    color: $primary;
+  }
 }
 
 // Hover Pizza
-// section.menu img {
-//   transition: transform 0.4s;
-//   z-index: -1;
-// }
-// section.menu img:hover {
-//   transform: scale(1.1);
-//   z-index: -1;
-// }
+section.menu img {
+  transition: transform 0.3s;
+  z-index: -1;
+}
+section.menu img:hover {
+  transform: scale(1.2);
+  z-index: -1;
+}
 
 // Status Page
 
@@ -134,7 +138,7 @@ section.status {
   font-size: 46px;
   font-weight: 600;
   position: absolute;
-  left: -9%;
+  left: -90px;
   color: inherit;
 }
 .status-box ul li:nth-child(1) span:before {
@@ -201,3 +205,22 @@ section.status {
   font-size: 18px;
   color: $dark;
 }
+
+// Responsive
+@media (max-width: 1060px) {
+  .container {
+    max-width: 90%;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 768px) {
+  .status-box ul li span:before {
+    font-size: 34px;
+  }
+}
diff --git a/src/views/customers/cart.ejs b/src/views/customers/cart.ejs
@@ -2,12 +2,12 @@
 
 <section class="cart pt-16">
     <% if(session.cart) { %>
-        <div class="order container mx-auto w-1/2">
+        <div class="order container mx-auto xl:w-1/2">
             <div class="items-center flex border-b border-gray-300 pb-4">
                 <img src="/img/cart-black.png" alt="">
                 <h1 class="font-bold text-2xl ml-4">Order Summary</h1>
             </div>
-            <div class="pizza-list ">
+            <div class="pizza-list">
                 <% for(let pizza of Object.values(session.cart.items)) { %>
                     <div class="flex items-center my-8">
                         <img class="w-24" src="/img/<%= pizza.item.image %>" alt="">
@@ -22,19 +22,19 @@
                         <span class="flex-1">
                             <%= pizza.qty %> Pcs
                         </span>
-                        <span class="font-bold text-lg">
+                        <span class="font-bold block text-lg">
                             <%= pizza.item.price * pizza.qty %> $
                         </span>
-                        <button class="ml-12" id="deleteCartButton"
+                        <button class="mx-4 md:mx-0 md:ml-12 font-bold" id="deleteCartButton"
                             data-pizza-id="<%= pizza.item._id %>">Delete</button>
                     </div>
                     <% } %>
             </div>
             <hr>
-            <div class="text-right py-4">
+            <div class="text-center md:text-right py-4">
                 <div>
                     <span class="font-bold text-lg">Total Amount: </span>
-                    <span class="amount text-2xl font-bold ml-2">
+                    <span class="amount text-2xl font-bold md:ml-2">
                         <%= session.cart.totalPrice %>$
                     </span>
                 </div>
@@ -46,7 +46,7 @@
                             <input name="address" class="border border-gray-400 p-2 w-1/2" type="text"
                                 placeholder="Address" required>
                             <div>
-                                <button class="btn-primary mt-4 px-6 py-2 rounded-full text-white font-bold mt-6">Order
+                                <button class="btn-primary px-6 py-2 rounded-full text-white font-bold mt-6">Order
                                     Now</button>
                             </div>
                         </form>

diff --git a/src/views/customers/orders.ejs b/src/views/customers/orders.ejs
@@ -45,7 +45,7 @@
                     </span>
                     <form class="px-6 md:px-0" action=" /customer/cancel-order" method="POST">
                       <button value="<%= order._id %>" name="orderId"
-                        class="btn-primary px-2 py-2 rounded text-white">Cancel</button>
+                        class="btn-primary ml-4 md:px-2 py-2 rounded text-white">Cancel</button>
                     </form>
                   </td>
                 </tr>

diff --git a/src/views/customers/status.ejs b/src/views/customers/status.ejs
@@ -1,7 +1,7 @@
 <title>Track Delivery Status</title>
 <section class="status">
   <div class="container mx-auto">
-    <div class="status-box w-full lg:w-2/3 mx-auto py-16">
+    <div class="status-box w-screen lg:w-2/3 mx-auto py-16">
       <div class="flex items-center justify-between mb-12">
         <h1 class="text-xl font-bold">Track Delivery Status</h1>
         <h6 class="bg-white py-1 rounded-full px-4 text-green-600 text-2xs">

diff --git a/src/views/home.ejs b/src/views/home.ejs
@@ -4,21 +4,22 @@
   <div class="container mx-auto items-center justify-between md:flex">
     <div class="text-center md:w-1/3 pb-4 md:text-left">
       <h6 class="text-lg"><em>Are you hungry?</em></h6>
-      <h1 class="text-2xl font-bold md:text-7xl">Don't wait !</h1>
+      <h1 class="text-2xl font-bold md:text-4xl lg:text-7xl">Don't wait !</h1>
       <a href="#menu">
         <button class="text-base px-2 md:px-6 py-2 rounded-full text-white font-bold mt-4 btn-primary">Order
           Now</button>
       </a>
     </div>
-    <div class="md:w-2/3 pl-6">
+    <div class="w:1/2 md:w-2/3 pl-6">
       <img src="/img/hero-pizza1.png" class="rounded-lg">
     </div>
   </div>
 </section>
 
 <section class="menu container mx-auto py-4 md:pt-20 px-2 top-2" id="menu">
   <h1 class="text-xl font-bold mb-16 text-center md:text-3xl">Menu</h1>
-  <div class="grid grid-cols-2 gap-x-2 gap-y-6 md:grid-cols-4 md:gap-x-40 md:gap-y-16">
+  <div
+    class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
     <% pizzas.forEach((pizza)=> { %>
       <div class="w-66">
         <img class="mb-4" src="/img/<%= pizza.image %>" alt="">