ucef/as-talange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add viewport meta tag to all HTML templates for responsive mobile display

Browse Source
This commit is contained in:
Youssef
2026-06-29 15:44:48 +02:00
parent 94d672c0f6
commit bef01e3a0e
30 changed files with 88 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/fragments/sidebar.html
+59 -1
View File
@@ -1,11 +1,12 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
<meta charset="UTF-8">
</head>
<body>
<aside th:fragment="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col hidden md:flex">
<aside id="app-sidebar" th:fragment="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col hidden md:flex">
<div class="h-16 flex items-center px-6 border-b border-gray-200">
<img src="/images/logo.png" alt="Logo AS Talange" class="h-8 w-8 mr-3 object-contain">
<h1 class="text-xl font-bold text-blue-600">AS Talange</h1>
@@ -53,6 +54,63 @@
</form>
<div class="mt-2 text-[10px] text-gray-400">v<span th:text="${appVersion}">1.0-SNAPSHOT</span></div>
</div>
<script>
(function() {
function initMobileMenu() {
const sidebar = document.getElementById('app-sidebar');
if (!sidebar) return;
const header = document.querySelector('header');
if (header) {
let mobileBtn = header.querySelector('button.md\\:hidden');
if (!mobileBtn) {
mobileBtn = document.createElement('button');
mobileBtn.className = 'md:hidden text-gray-500 hover:text-gray-700 ml-auto';
mobileBtn.innerHTML = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>';
header.appendChild(mobileBtn);
}
const newBtn = mobileBtn.cloneNode(true);
mobileBtn.parentNode.replaceChild(newBtn, mobileBtn);
newBtn.addEventListener('click', (e) => {
e.stopPropagation();
if (sidebar.classList.contains('hidden')) {
sidebar.classList.remove('hidden');
sidebar.classList.add('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
} else {
sidebar.classList.add('hidden');
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
}
});
}
if (!window.mobileMenuListenerAdded) {
document.addEventListener('click', (e) => {
if (window.innerWidth < 768 && !sidebar.classList.contains('hidden')) {
if (!sidebar.contains(e.target)) {
sidebar.classList.add('hidden');
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
}
}
});
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) {
sidebar.classList.add('hidden');
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
}
});
window.mobileMenuListenerAdded = true;
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMobileMenu);
} else {
initMobileMenu();
}
})();
</script>
</aside>
</body>
</html>