Xử lí responsive

JoshiMinh · Jun 23, 2024 · 88e2737 · 88e2737
1 parent 4714820
commit 88e2737
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 12 deletions.
diff --git a/MovieInfo.html b/MovieInfo.html
@@ -27,14 +27,6 @@
     <!-- Sweetalert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="js/theme.js"></script>
-    <style>
-      .showtimes-container {
-        margin-top: 30px;
-      }
-      .showtime-buttons .btn {
-        margin: 5px;
-      }
-    </style>
   </head>
 
   <body>

diff --git a/img/RealizeBanner.jpg b/img/RealizeBanner.jpg
diff --git a/index.html b/index.html
@@ -49,6 +49,10 @@
             <img src="WGLogo.png" alt="" width="40px" />
           </a>
           <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+            <div class="offcanvas-header">
+              <h5 class="offcanvas-title" id="offcanvasNavbarLabel"><a href="index.html"><img src="WGLogo.png" alt="" width="40px"/></a></h5>
+              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
             <div class="offcanvas-body">
               <ul class="navbar-nav flex-grow-1 pe-3">
                 <li class="nav-item">

diff --git a/js/fetchShowing.js b/js/fetchShowing.js
@@ -26,7 +26,7 @@ fetch('Movies.txt')
       </div>
       <div style="display: none;" id="qr-code-${movie.lineNumber}">
         <h3 style="text-align: center; color: #000;">Số tiền cần thanh toán: 70.000 VNĐ</h3>
-        <img width="600px" src="img/QR-code.jpg" alt="QR Code" />
+        <img width="600px" style="max-width: 100%; height: auto;" src="img/QR-code.jpg" alt="QR Code" />
         <div class="d-flex justify-content-center mt-3">
               <button class="btn btn-success mx-2" onclick="confirmBooking()">Xác nhận</button>
               <button class="btn btn-danger mx-2" onclick="$.fancybox.close()">Hủy</button>

diff --git a/js/fetchUpcoming.js b/js/fetchUpcoming.js
@@ -26,7 +26,7 @@ fetch('Movies.txt')
       </div>
       <div style="display: none;" id="qr-code-${movie.lineNumber}">
         <h3 style="text-align: center; color: #000;">Số tiền cần thanh toán: 70.000 VNĐ</h3>
-        <img width="600px" src="img/QR-code.jpg" alt="QR Code" />
+        <img width="600px" style="max-width: 100%; height: auto;" src="img/QR-code.jpg" alt="QR Code" />
         <div class="d-flex justify-content-center mt-3">
               <button class="btn btn-success mx-2" onclick="confirmBooking()">Xác nhận</button>
               <button class="btn btn-danger mx-2" onclick="$.fancybox.close()">Hủy</button>

diff --git a/js/navbarHandle.js b/js/navbarHandle.js
@@ -0,0 +1,19 @@
+$(document).ready(function() {
+    var $offcanvasNavbar = $('#offcanvasNavbar');
+    var $navbar = $('.navbar-nav');
+
+    $(window).resize(function() {
+      moveLoginButtons();
+    });
+    function moveLoginButtons() {
+      if ($(window).width() <= 280) {
+        $('.login-button').appendTo($offcanvasNavbar.find('.navbar-nav'));
+      } else {
+
+        $('.login-button').appendTo($navbar);
+      }
+    }
+
+    moveLoginButtons();
+  });
+
diff --git a/style.css b/style.css
@@ -28,8 +28,8 @@ body {
 
 .header .navbar {
   height: 80px;
-  background-color: rgba(var(--bs-body-bg-rgb), 1.5); /* Adjust the alpha value to make it darker */
-  transition: 0.3s background-color; /* Fixing the transition property */
+  background-color: rgba(var(--bs-body-bg-rgb), 1.5);
+  transition: 0.3s background-color;
   padding: 0.5rem;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
 }
@@ -69,6 +69,25 @@ body {
   display: none;
 }
 
+@media (max-width: 353px) {
+  .header .right-bt-sign {
+    display: none;
+  }
+  .header .left-bt-login {
+  border-radius: 50px;
+  }
+}
+@media (max-width: 261px) {
+  .header .right-bt-sign {
+    display: none;
+  }
+  .header .left-bt-login {
+    border-radius: 50px;
+    font-size: 10px;
+    padding: 13 px;
+  }
+}
+
 .content1 {
   margin-top: 90px;
 }
@@ -472,4 +491,25 @@ body {
   position: relative;
   z-index: 1;
   text-align: center;
+}
+
+/* MovieInfo */
+.showtimes-container {
+  margin-top: 30px;
+}
+
+.showtime-buttons .btn {
+  margin: 5px;
+}
+
+@media (max-width: 768px) {
+  #qr-code-modal {
+    width: 100% !important;
+    padding: 10px;
+  }
+
+  #qr-code-modal img {
+    width: 100% !important;
+    height: auto;
+  }
 }