mirror of
https://github.com/StarFleetCPTN/GoMFT.git
synced 2026-09-18 12:30:50 +02:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 StarFleetCPTN
|
29b86f16b1 | ||
|
StarFleetCPTN
|
c41ca6aca3 | ||
|
StarFleetCPTN
|
4d80d104c0 | ||
|
StarFleetCPTN
|
69cab16382 |
@@ -0,0 +1,65 @@
|
|||||||
|
name: Build and Publish Docker Image DockHub
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
tags:
|
||||||
|
- 'v*.*.*'
|
||||||
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
manual_version:
|
||||||
|
description: 'Manual version override (leave empty to use git tag)'
|
||||||
|
required: false
|
||||||
|
default: ''
|
||||||
|
|
||||||
|
env:
|
||||||
|
# Use github.repository as the default image name
|
||||||
|
IMAGE_NAME: ${{ github.repository }}
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-push:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
# Set the permissions needed for the DockerHub token to push to GHCR
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
packages: write
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
# Set up Docker Buildx for efficient builds
|
||||||
|
- name: Set up Docker Buildx
|
||||||
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
# Login to DockerHub Container Registry
|
||||||
|
- name: Log in to DockerHub Container Registry
|
||||||
|
uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||||
|
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||||
|
|
||||||
|
|
||||||
|
# Extract metadata for Docker image
|
||||||
|
- name: Extract Docker metadata
|
||||||
|
id: meta
|
||||||
|
uses: docker/metadata-action@v5
|
||||||
|
with:
|
||||||
|
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||||
|
tags: |
|
||||||
|
type=semver,pattern={{version}}
|
||||||
|
type=semver,pattern={{major}}.{{minor}}
|
||||||
|
type=ref,event=branch
|
||||||
|
type=ref,event=pr
|
||||||
|
type=sha,format=long
|
||||||
|
type=raw,value=latest,enable={{is_default_branch}}
|
||||||
|
|
||||||
|
# Build and push Docker image
|
||||||
|
- name: Build and push
|
||||||
|
uses: docker/build-push-action@v5
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
push: ${{ github.event_name != 'pull_request' }}
|
||||||
|
tags: ${{ steps.meta.outputs.tags }}
|
||||||
|
labels: ${{ steps.meta.outputs.labels }}
|
||||||
|
cache-from: type=gha
|
||||||
|
cache-to: type=gha,mode=max
|
||||||
@@ -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">
|
<html lang="en" class="light h-full">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<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="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="32x32" href="/static/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.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>
|
<i class="fas fa-moon block dark:hidden"></i>
|
||||||
</button>
|
</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 -->
|
<!-- User Menu -->
|
||||||
<div x-data="{ open: false }" class="relative">
|
<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">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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... }
|
{ children... }
|
||||||
</main>
|
</main>
|
||||||
<footer class="bg-white dark:bg-secondary-800 shadow-inner mt-auto w-full">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,8 @@ body {
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
|
/* Prevent content from going under bottom nav on mobile */
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Layout */
|
/* Layout */
|
||||||
@@ -223,8 +225,21 @@ body {
|
|||||||
border-top: 1px solid #e2e8f0;
|
border-top: 1px solid #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile Bottom Navigation */
|
||||||
|
.mobile-bottom-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-mobile-nav {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.pb-mobile-nav {
|
||||||
|
padding-bottom: 5rem !important; /* Account for bottom nav */
|
||||||
|
}
|
||||||
|
|
||||||
.grid-cols-2,
|
.grid-cols-2,
|
||||||
.grid-cols-3 {
|
.grid-cols-3 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -234,4 +249,120 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
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
|
// Theme management for GoMFT application
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
initializeTheme();
|
initializeTheme();
|
||||||
|
initializeMobileSupport();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize theme based on user preference
|
// Initialize theme based on user preference
|
||||||
@@ -242,3 +243,94 @@ style.textContent = `
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
document.head.appendChild(style);
|
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