mirror of
https://github.com/StarFleetCPTN/GoMFT.git
synced 2026-09-08 15:41:20 +02:00
Merge pull request #1 from StarFleetCPTN/development
Add mobile-first responsive design and PWA support
This commit is contained in:
StarFleetCPTN
@@ -0,0 +1,38 @@
|
||||
root = "."
|
||||
testdata_dir = "testdata"
|
||||
tmp_dir = "tmp"
|
||||
|
||||
[build]
|
||||
args_bin = []
|
||||
bin = "./tmp/main"
|
||||
cmd = "templ generate && go build -o ./tmp/main ."
|
||||
delay = 1000
|
||||
exclude_dir = ["assets", "tmp", "vendor", "testdata", "node_modules"]
|
||||
exclude_file = []
|
||||
exclude_regex = ["_test.go", "_templ.go"]
|
||||
exclude_unchanged = false
|
||||
follow_symlink = false
|
||||
full_bin = ""
|
||||
include_dir = []
|
||||
include_ext = ["go", "tpl", "tmpl", "templ", "html"]
|
||||
kill_delay = "0s"
|
||||
log = "build-errors.log"
|
||||
send_interrupt = false
|
||||
stop_on_error = true
|
||||
|
||||
[color]
|
||||
app = ""
|
||||
build = "yellow"
|
||||
main = "magenta"
|
||||
runner = "green"
|
||||
watcher = "cyan"
|
||||
|
||||
[log]
|
||||
time = false
|
||||
|
||||
[misc]
|
||||
clean_on_exit = false
|
||||
|
||||
[screen]
|
||||
clear_on_rebuild = false
|
||||
keep_scroll = true
|
||||
+95
-2
@@ -32,7 +32,10 @@ templ LayoutWithContext(title string, ctx context.Context) {
|
||||
<html lang="en" class="light h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
|
||||
<meta name="theme-color" content="#2563eb"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
||||
@@ -283,6 +286,18 @@ templ LayoutWithContext(title string, ctx context.Context) {
|
||||
<i class="fas fa-moon block dark:hidden"></i>
|
||||
</button>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="sm:hidden flex items-center">
|
||||
<button
|
||||
id="mobile-menu-button"
|
||||
class="text-secondary-500 dark:text-secondary-400 hover:bg-secondary-100 dark:hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-lg text-sm p-2"
|
||||
x-data="{}"
|
||||
@click="$dispatch('toggle-mobile-menu')"
|
||||
>
|
||||
<i class="fas fa-bars text-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- User Menu -->
|
||||
<div x-data="{ open: false }" class="relative">
|
||||
<button @click="open = !open" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
|
||||
@@ -315,8 +330,53 @@ templ LayoutWithContext(title string, ctx context.Context) {
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Navigation Menu -->
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
x-on:toggle-mobile-menu.window="open = !open"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
||||
class="sm:hidden bg-white dark:bg-secondary-800 shadow-md"
|
||||
>
|
||||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||||
<a href="/dashboard" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-tachometer-alt mr-2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/configs" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-cogs mr-2"></i> Configs
|
||||
</a>
|
||||
<a href="/jobs" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-tasks mr-2"></i> Jobs
|
||||
</a>
|
||||
<a href="/history" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-history mr-2"></i> History
|
||||
</a>
|
||||
if isAdmin(ctx) {
|
||||
<a href="/admin/users" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-users mr-2"></i> Users
|
||||
</a>
|
||||
<a href="/admin/tools" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-tools mr-2"></i> Admin Tools
|
||||
</a>
|
||||
}
|
||||
<a href="/profile" class="block px-3 py-2 rounded-md text-base font-medium text-secondary-700 dark:text-secondary-300 hover:bg-primary-50 dark:hover:bg-secondary-700 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-user-circle mr-2"></i> Profile
|
||||
</a>
|
||||
<form method="POST" action="/logout">
|
||||
<button type="submit" class="w-full text-left block px-3 py-2 rounded-md text-base font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900 hover:text-red-700 dark:hover:text-red-400">
|
||||
<i class="fas fa-sign-out-alt mr-2"></i> Sign out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<main class="flex-grow w-full max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 animate-fadeIn">
|
||||
<main class="flex-grow w-full max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 animate-fadeIn pb-mobile-nav">
|
||||
{ children... }
|
||||
</main>
|
||||
<footer class="bg-white dark:bg-secondary-800 shadow-inner mt-auto w-full">
|
||||
@@ -326,6 +386,39 @@ templ LayoutWithContext(title string, ctx context.Context) {
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
if isLoggedIn(ctx) {
|
||||
<!-- Mobile Bottom Navigation -->
|
||||
<div class="sm:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-secondary-800 border-t border-secondary-200 dark:border-secondary-700 shadow-lg mobile-nav-container z-10">
|
||||
<div class="grid grid-cols-5 h-16">
|
||||
<a href="/dashboard" class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-tachometer-alt text-lg"></i>
|
||||
<span class="text-xs mt-1">Dashboard</span>
|
||||
</a>
|
||||
<a href="/configs" class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-cogs text-lg"></i>
|
||||
<span class="text-xs mt-1">Configs</span>
|
||||
</a>
|
||||
<a href="/jobs" class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-tasks text-lg"></i>
|
||||
<span class="text-xs mt-1">Jobs</span>
|
||||
</a>
|
||||
<a href="/history" class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<i class="fas fa-history text-lg"></i>
|
||||
<span class="text-xs mt-1">History</span>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="flex flex-col items-center justify-center text-secondary-500 dark:text-secondary-400 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
x-data="{}"
|
||||
@click="$dispatch('toggle-mobile-menu')"
|
||||
>
|
||||
<i class="fas fa-ellipsis-h text-lg"></i>
|
||||
<span class="text-xs mt-1">More</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
@@ -20,6 +20,8 @@ body {
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
/* Prevent content from going under bottom nav on mobile */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
@@ -223,8 +225,21 @@ body {
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* Mobile Bottom Navigation */
|
||||
.mobile-bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pb-mobile-nav {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.pb-mobile-nav {
|
||||
padding-bottom: 5rem !important; /* Account for bottom nav */
|
||||
}
|
||||
|
||||
.grid-cols-2,
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -234,4 +249,120 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Adjust cards for mobile */
|
||||
.card {
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Table adjustments for mobile */
|
||||
.table-responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Adjust forms for mobile */
|
||||
.form-label {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons */
|
||||
.button {
|
||||
padding: 0.625rem 1rem;
|
||||
min-height: 44px; /* Better touch target */
|
||||
}
|
||||
|
||||
/* Mobile spacing */
|
||||
.container {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones */
|
||||
@media (max-width: 480px) {
|
||||
.card-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.hidden-xs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Stack buttons on small screens */
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Ensure safe area at bottom of the page */
|
||||
body {
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
/* Support for notch phones */
|
||||
@supports (padding: max(0px)) {
|
||||
body,
|
||||
.container,
|
||||
.navbar {
|
||||
padding-left: max(1rem, env(safe-area-inset-left));
|
||||
padding-right: max(1rem, env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
.mobile-nav-container {
|
||||
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support for mobile */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-bottom-nav {
|
||||
background-color: #1e293b;
|
||||
border-top-color: #334155;
|
||||
}
|
||||
}
|
||||
|
||||
/* Improve form elements on mobile */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
button,
|
||||
.button,
|
||||
select {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font-size: 16px !important; /* Prevents zoom on focus in iOS */
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// Theme management for GoMFT application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeTheme();
|
||||
initializeMobileSupport();
|
||||
});
|
||||
|
||||
// Initialize theme based on user preference
|
||||
@@ -242,3 +243,94 @@ style.textContent = `
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Initialize mobile support features
|
||||
function initializeMobileSupport() {
|
||||
// Check if it's a mobile device
|
||||
const isMobile = window.matchMedia('(max-width: 768px)').matches;
|
||||
|
||||
if (isMobile) {
|
||||
// Add padding to main content to prevent overlap with bottom nav
|
||||
const bottomNav = document.querySelector('.mobile-nav-container');
|
||||
if (bottomNav) {
|
||||
const main = document.querySelector('main');
|
||||
if (main) {
|
||||
main.style.paddingBottom = (bottomNav.offsetHeight + 16) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
// Add active class to current page in bottom nav
|
||||
highlightCurrentPageInBottomNav();
|
||||
|
||||
// Make tables scrollable on mobile
|
||||
makeTablesResponsive();
|
||||
|
||||
// Improve mobile form experience
|
||||
enhanceMobileForms();
|
||||
}
|
||||
|
||||
// Listen for orientation changes
|
||||
window.addEventListener('orientationchange', function() {
|
||||
// Wait for orientation change to complete
|
||||
setTimeout(function() {
|
||||
if (window.matchMedia('(max-width: 768px)').matches) {
|
||||
makeTablesResponsive();
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
// Highlight current page in mobile bottom navigation
|
||||
function highlightCurrentPageInBottomNav() {
|
||||
const currentPath = window.location.pathname;
|
||||
const bottomNavLinks = document.querySelectorAll('.mobile-nav-container a');
|
||||
|
||||
bottomNavLinks.forEach(link => {
|
||||
const href = link.getAttribute('href');
|
||||
if (currentPath === href || (href !== '/' && currentPath.startsWith(href))) {
|
||||
link.classList.add('text-primary-600', 'dark:text-primary-400');
|
||||
link.classList.remove('text-secondary-500', 'dark:text-secondary-400');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Make tables responsive on mobile
|
||||
function makeTablesResponsive() {
|
||||
const tables = document.querySelectorAll('table');
|
||||
tables.forEach(table => {
|
||||
if (!table.parentElement.classList.contains('table-responsive')) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.classList.add('table-responsive');
|
||||
table.parentNode.insertBefore(wrapper, table);
|
||||
wrapper.appendChild(table);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Enhance mobile forms
|
||||
function enhanceMobileForms() {
|
||||
// Prevent zooming on inputs in iOS
|
||||
const metaViewport = document.querySelector('meta[name=viewport]');
|
||||
if (metaViewport) {
|
||||
metaViewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
|
||||
}
|
||||
|
||||
// Add 'required' visual indicator to required fields
|
||||
const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
|
||||
requiredInputs.forEach(input => {
|
||||
const label = input.previousElementSibling;
|
||||
if (label && label.tagName === 'LABEL') {
|
||||
if (!label.innerHTML.includes('*')) {
|
||||
label.innerHTML += ' <span class="text-red-500">*</span>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Improve date input on mobile
|
||||
const dateInputs = document.querySelectorAll('input[type="date"]');
|
||||
dateInputs.forEach(input => {
|
||||
input.addEventListener('focus', function() {
|
||||
input.click(); // Force native date picker on mobile
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user