refactor: update contact page layout, optimize UI components, and document page scaffolding rules

2026-07-21 15:29:22 +07:00
parent 40d3942496
commit 4cee97bf91
9 changed files with 136 additions and 745 deletions
@@ -85,4 +85,27 @@ document.addEventListener('DOMContentLoaded', function () {
      }
    });
  });
+
+  // --- Search toggle ---
+  var searchTrigger = document.getElementById('search-drawer-trigger');
+  var searchTriggerActive = document.getElementById('search-drawer-trigger-active');
+  var searchFlyout = document.getElementById('search-flyout-container');
+  var siteHeader = document.querySelector('[data-component-id="umass_base:site-header"]');
+
+  function toggleSearch(e) {
+    e.preventDefault();
+    if (searchTrigger) searchTrigger.classList.toggle('active');
+    if (siteHeader) siteHeader.classList.toggle('search-active');
+    
+    if (searchFlyout) {
+      if (searchFlyout.style.display === 'block') {
+        fadeOut(searchFlyout);
+      } else {
+        fadeIn(searchFlyout);
+      }
+    }
+  }
+
+  if (searchTrigger) searchTrigger.addEventListener('click', toggleSearch);
+  if (searchTriggerActive) searchTriggerActive.addEventListener('click', toggleSearch);
 });
@@ -23,22 +23,30 @@
    <link rel="stylesheet" th:href="@{/css/custom.css}">
 </head>

-<body>
+<body th:class="${bodyClass}">
    <!-- Skip to main content link (Accessibility) -->
    <a href="#main-content" class="visually-hidden focusable skip-link">Skip to main content</a>

-    <!-- Header Fragment -->
-    <div th:replace="~{fragments/header}"></div>
+    <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas="">
+        <!-- Header Fragment -->
+        <div th:replace="~{themes/umass/header}"></div>

-    <!-- Main Content Block -->
-    <main id="main-content" role="main">
-        <div layout:fragment="content">
-            <!-- All elements will be defined in the editor page -->
-        </div>
-    </main>
+        <!-- Main Content Block -->
+        <main id="main-content" role="main">
+            <div layout:fragment="content">
+                <!-- All elements will be defined in the editor page -->
+            </div>
+        </main>

-    <!-- Footer Fragment -->
-    <div th:replace="~{themes/umass/footer :: footer}"></div>
+        <!-- Footer Fragment -->
+        <div th:replace="~{themes/umass/footer :: footer}"></div>
+    </div>
+
+    <!-- Core Scripts -->
+    <script th:src="@{/js/mobile-menu.js}"></script>
+
+    <!-- Page Specific Scripts -->
+    <th:block layout:fragment="scripts"></th:block>
 </body>

 </html>
@@ -107,7 +107,7 @@
      style="display:none;visibility:hidden"></iframe></noscript>

  <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas="">
-    <header th:replace="~{fragments/header :: header}"></header>
+    <header th:replace="~{themes/umass/header :: header}"></header>
    <main id="main-content">

      <div class="l--content">
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-    layout:decorate="~{fragments/layout}">
+    layout:decorate="~{fragments/layout(bodyClass='umass-platform-homepage path-frontpage page-node-type-homepage homepage transparent-header')}">

 <head>
    <title th:text="${page.title} + ' | S.I.S Cần Thơ'">Liên hệ | S.I.S Cần Thơ</title>
@@ -21,10 +21,13 @@
                                <!-- ====== ẢNH NỀN ====== -->
                                <img class="static-fallback-image" src="http://localhost:8080/uploads/2026/07/198e5233-0e9f-4618-8111-32c4df8ae318.jpg" th:alt="${page.title}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;" />

-                                <!-- ====== TEXT OVERLAY ====== -->
+                                <!-- ====== TEXT OVERLAY (Nội dung chữ nằm trên ảnh) ====== -->
                                <div class="text-container centered"
                                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.4);">
                                    <div class="slide-text-container-inner" style="pointer-events: auto; text-align: center; padding: 20px;">
+                                        <div class="f--field f--eyebrow" style="color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.7); margin-bottom: 10px; font-weight: bold; text-transform: uppercase;">
+                                            S.I.S Cần Thơ
+                                        </div>
                                        <div class="f--field f--page-title">
                                            <h1 class="hero-post-title" th:text="${page.title}">Liên hệ</h1>
                                        </div>
@@ -233,7 +233,7 @@
                    <li class="megamenu menu-item menu-item--expanded" th:if="${not #lists.isEmpty(item.children)}">
                      <div class="link-arrow-wrapper">
                        <a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
-                        <button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" data-once="site-header-arrow">
+                        <button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true">
                          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7" width="16" height="7">
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
                          </svg>
@@ -288,7 +288,7 @@
              </nav>
              </div>
            </div>
-            <button id="search-drawer-trigger" aria-label="Open Search" data-once="header-search">
+            <button id="search-drawer-trigger" aria-label="Open Search">
              <svg class="search-trigger-open" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 25">
                <title>Open Search</title>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M10.03,2.67c-4.07,0-7.36,3.29-7.36,7.36s3.29,7.36,7.36,7.36,7.36-3.29,7.36-7.36c-.01-4.07-3.3-7.36-7.36-7.36ZM10.03,0c5.54,0,10.03,4.49,10.03,10.03,0,2.29-.76,4.39-2.05,6.08l7,7-1.89,1.89-7.01-7.01c-1.68,1.29-3.79,2.05-6.08,2.05C4.49,20.04,0,15.55,0,10.03S4.49,0,10.03,0Z"></path>
@@ -298,7 +298,7 @@
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M3.64,1.2l-1.21-1.2L0,2.39l1.21,1.19,7.36,7.25-7.36,7.25-1.21,1.19,2.43,2.39,1.21-1.2,7.36-7.24,7.36,7.24,1.22,1.2,2.42-2.39-1.21-1.19-7.36-7.25,7.36-7.25,1.21-1.19-2.42-2.39-1.22,1.2-7.36,7.24L3.64,1.2Z"></path>
              </svg>
            </button>
-            <button id="mobile-hamburger" class="mobile-hamburger hamburger--squeeze" aria-label="Open Main Navigation" data-once="site-header-hamburger">
+            <button id="mobile-hamburger" class="hamburger hamburger--squeeze" type="button" aria-label="Open Main Navigation">
              <span class="hamburger-box">
                <span class="hamburger-inner"></span>
              </span>
@@ -347,7 +347,7 @@
                </li>
              </ul>
            </div>
-            <button id="search-drawer-trigger-active" aria-label="Open Search" data-once="header-search">
+            <button id="search-drawer-trigger-active" aria-label="Open Search">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22">
                <title>Close Search</title>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M3.64,1.2l-1.21-1.2L0,2.39l1.21,1.19,7.36,7.25-7.36,7.25-1.21,1.19,2.43,2.39,1.21-1.2,7.36-7.24,7.36,7.24,1.22,1.2,2.42-2.39-1.21-1.19-7.36-7.25,7.36-7.25,1.21-1.19-2.42-2.39-1.22,1.2-7.36,7.24L3.64,1.2Z"></path>