WallyHackenslacker/mainty
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: move theme toggle into shared top-bar controls

Browse Source
This commit is contained in:
Wally Hackenslacker
2026-05-17 23:41:00 -04:00
parent b9f1a115d2
commit 03c9e3c5a3
8 changed files with 180 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/export.php
+35 -26
View File
@@ -6,50 +6,58 @@
<title><?php echo htmlspecialchars($vehicle['name']); ?> - Maintenance Export</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
</head>
<body class="bg-white p-8">
<div class="max-w-4xl mx-auto">
<body class="theme-page min-h-screen">
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
</header>
<main class="max-w-4xl mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2"><?php echo APP_NAME; ?></h1>
<h2 class="text-xl text-gray-600">Vehicle Maintenance Export</h2>
<h1 class="text-3xl font-bold theme-text mb-2"><?php echo APP_NAME; ?></h1>
<h2 class="text-xl theme-text-muted">Vehicle Maintenance Export</h2>
</div>
<!-- Vehicle Information -->
<div class="bg-gray-50 rounded-lg p-6 mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Vehicle Information</h3>
<div class="theme-surface rounded-lg shadow-sm p-6 mb-8">
<h3 class="text-xl font-semibold theme-text mb-4">Vehicle Information</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<span class="font-medium text-gray-700">Name:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['name']); ?></span>
<span class="font-medium theme-text">Name:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['name']); ?></span>
</div>
<?php if ($vehicle['year']): ?>
<div>
<span class="font-medium text-gray-700">Year:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['year']); ?></span>
<span class="font-medium theme-text">Year:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['year']); ?></span>
</div>
<?php endif; ?>
<?php if ($vehicle['make']): ?>
<div>
<span class="font-medium text-gray-700">Make:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['make']); ?></span>
<span class="font-medium theme-text">Make:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['make']); ?></span>
</div>
<?php endif; ?>
<?php if ($vehicle['model']): ?>
<div>
<span class="font-medium text-gray-700">Model:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['model']); ?></span>
<span class="font-medium theme-text">Model:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['model']); ?></span>
</div>
<?php endif; ?>
<?php if ($vehicle['color']): ?>
<div>
<span class="font-medium text-gray-700">Color:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['color']); ?></span>
<span class="font-medium theme-text">Color:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['color']); ?></span>
</div>
<?php endif; ?>
<?php if ($vehicle['license_plate']): ?>
<div>
<span class="font-medium text-gray-700">License Plate:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span>
<span class="font-medium theme-text">License Plate:</span>
<span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span>
</div>
<?php endif; ?>
</div>
@@ -57,16 +65,16 @@
<!-- Maintenance History -->
<div>
<h3 class="text-xl font-semibold text-gray-800 mb-4">Maintenance History</h3>
<h3 class="text-xl font-semibold theme-text mb-4">Maintenance History</h3>
<?php if (empty($maintenanceItems)): ?>
<p class="text-gray-500 text-center py-8">No maintenance records available.</p>
<p class="theme-text-muted text-center py-8">No maintenance records available.</p>
<?php else: ?>
<div class="space-y-4">
<?php foreach ($maintenanceItems as $item): ?>
<div class="border border-gray-300 rounded-lg p-4">
<div class="theme-surface border theme-border rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="text-lg font-semibold text-gray-800"><?php echo htmlspecialchars($item['name']); ?></h4>
<h4 class="text-lg font-semibold theme-text"><?php echo htmlspecialchars($item['name']); ?></h4>
<?php if ($item['cost']): ?>
<span class="bg-green-100 text-green-800 px-3 py-1 rounded">
$<?php echo number_format($item['cost'], 2); ?>
@@ -74,7 +82,7 @@
<?php endif; ?>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 mb-2">
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm theme-text-muted mb-2">
<div>
<strong>Date:</strong> <?php echo date('M d, Y', strtotime($item['date'])); ?>
</div>
@@ -94,7 +102,7 @@
</div>
<?php if ($item['description']): ?>
<div class="mt-2 text-sm text-gray-600">
<div class="mt-2 text-sm theme-text-muted">
<strong>Description:</strong><br>
<?php echo nl2br(htmlspecialchars($item['description'])); ?>
</div>
@@ -105,10 +113,11 @@
<?php endif; ?>
</div>
<div class="mt-8 text-center text-sm text-gray-500">
<div class="mt-8 text-center text-sm theme-text-muted">
<p>Exported on <?php echo date('F j, Y \a\t g:i A'); ?></p>
<p>Generated by <?php echo APP_NAME; ?></p>
</div>
</div>
</main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body>
</html>
views/index.php
+1 -5
View File
@@ -13,11 +13,7 @@
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
<div class="flex items-center space-x-4">
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-95">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
<?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
</header>
views/login.php
+38 -29
View File
@@ -8,36 +8,45 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
</head>
<body class="theme-page min-h-screen flex items-center justify-center">
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?></h1>
<?php if (isset($_SESSION['error'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['success'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #dcfce7; background-color: color-mix(in srgb, #22c55e 14%, var(--theme-surface)); border-color: #86efac; border-color: color-mix(in srgb, #22c55e 40%, var(--theme-border)); color: #14532d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?>
</div>
<?php endif; ?>
<form method="POST" action="<?php echo url('/login'); ?>" class="space-y-4">
<div>
<label for="password" class="block text-sm font-medium theme-text mb-1">Password</label>
<input type="password" id="password" name="password" required autofocus
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your password">
</div>
<body class="theme-page min-h-screen">
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
</header>
<main class="min-h-[calc(100vh-72px)] flex items-center justify-center px-4 py-8">
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?></h1>
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
Login
</button>
</form>
</div>
<?php if (isset($_SESSION['error'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
</div>
<?php endif; ?>
<?php if (isset($_SESSION['success'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #dcfce7; background-color: color-mix(in srgb, #22c55e 14%, var(--theme-surface)); border-color: #86efac; border-color: color-mix(in srgb, #22c55e 40%, var(--theme-border)); color: #14532d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['success']); unset($_SESSION['success']); ?>
</div>
<?php endif; ?>
<form method="POST" action="<?php echo url('/login'); ?>" class="space-y-4">
<div>
<label for="password" class="block text-sm font-medium theme-text mb-1">Password</label>
<input type="password" id="password" name="password" required autofocus
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your password">
</div>
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
Login
</button>
</form>
</div>
</main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body>
</html>
views/partials/theme.php
-31
View File
@@ -106,19 +106,6 @@ if ($themeSection === 'head'):
color: var(--theme-text-muted);
}
#themeToggle {
position: fixed;
top: calc(1rem + env(safe-area-inset-top));
right: 1rem;
z-index: 50;
}
@media (max-width: 640px) {
#themeToggle {
top: calc(4.75rem + env(safe-area-inset-top));
}
}
#themeToggle:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
@@ -129,24 +116,6 @@ endif;
if ($themeSection === 'body'):
?>
<button
id="themeToggle"
type="button"
class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-md transition"
aria-label="Switch to dark mode"
title="Switch to dark mode"
>
<i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
</button>
<noscript>
<style>
#themeToggle {
display: none !important;
}
</style>
</noscript>
<script>
(function () {
var html = document.documentElement;
views/partials/topbar-controls.php
+31
View File
@@ -0,0 +1,31 @@
<?php
$showSettings = isset($showSettings) ? (bool) $showSettings : false;
$settingsUrl = isset($settingsUrl) ? (string) $settingsUrl : url('/settings');
?>
<div class="flex items-center space-x-4">
<button
id="themeToggle"
type="button"
class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg shadow-sm transition"
aria-label="Switch to dark mode"
title="Switch to dark mode"
aria-pressed="false"
>
<i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
</button>
<?php if ($showSettings): ?>
<a href="<?php echo htmlspecialchars($settingsUrl); ?>" class="theme-text-muted hover:opacity-95">
<i class="bi bi-gear-fill text-2xl" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
</a>
<?php endif; ?>
</div>
<noscript>
<style>
#themeToggle {
display: none !important;
}
</style>
</noscript>
views/settings.php
+1 -5
View File
@@ -13,11 +13,7 @@
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
<div class="flex items-center space-x-4">
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
</header>
views/setup.php
+73 -64
View File
@@ -8,73 +8,82 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
</head>
<body class="theme-page min-h-screen flex items-center justify-center">
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?> Setup</h1>
<?php if (isset($_SESSION['error'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
</div>
<?php endif; ?>
<div class="mb-6 p-4 border rounded" style="background-color: #eff6ff; background-color: color-mix(in srgb, #3b82f6 12%, var(--theme-surface)); border-color: #bfdbfe; border-color: color-mix(in srgb, #3b82f6 35%, var(--theme-border)); color: #1e3a8a; color: var(--theme-text);">
<h2 class="font-semibold mb-2">System Requirements</h2>
<ul class="space-y-1 text-sm">
<li class="flex items-center">
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
<span>PHP Version: <?php echo PHP_VERSION; ?>
<?php if (version_compare(PHP_VERSION, '8.0.0', '>=')): ?>
<span class="text-green-600">(✓ Meets requirement)</span>
<?php else: ?>
<span class="text-red-600">(✗ Requires 8.0+)</span>
<?php endif; ?>
</span>
</li>
<li class="flex items-center">
<?php if (extension_loaded('pdo_sqlite')): ?>
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
<span>SQLite: <span class="text-green-600">Available (✓)</span></span>
<?php else: ?>
<i class="bi bi-x-circle-fill text-red-600 mr-2"></i>
<span>SQLite: <span class="text-red-600">Not Available (✗)</span></span>
<?php endif; ?>
</li>
</ul>
<body class="theme-page min-h-screen">
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-95 transition"><?php echo APP_NAME; ?></a>
<?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
<?php
$canSetup = version_compare(PHP_VERSION, '8.0.0', '>=') && extension_loaded('pdo_sqlite');
?>
<?php if (!$canSetup): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fef9c3; background-color: color-mix(in srgb, #eab308 16%, var(--theme-surface)); border-color: #facc15; border-color: color-mix(in srgb, #eab308 38%, var(--theme-border)); color: #854d0e; color: var(--theme-text);">
<p class="font-semibold">System requirements not met!</p>
<p class="text-sm mt-1">Please ensure PHP 8.0+ and SQLite extension are available.</p>
</header>
<main class="min-h-[calc(100vh-72px)] flex items-center justify-center px-4 py-8">
<div class="theme-surface p-8 rounded-lg shadow-md w-full max-w-md">
<h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?> Setup</h1>
<?php if (isset($_SESSION['error'])): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fee2e2; background-color: color-mix(in srgb, #ef4444 14%, var(--theme-surface)); border-color: #fca5a5; border-color: color-mix(in srgb, #ef4444 40%, var(--theme-border)); color: #7f1d1d; color: var(--theme-text);">
<?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
</div>
<?php endif; ?>
<div class="mb-6 p-4 border rounded" style="background-color: #eff6ff; background-color: color-mix(in srgb, #3b82f6 12%, var(--theme-surface)); border-color: #bfdbfe; border-color: color-mix(in srgb, #3b82f6 35%, var(--theme-border)); color: #1e3a8a; color: var(--theme-text);">
<h2 class="font-semibold mb-2">System Requirements</h2>
<ul class="space-y-1 text-sm">
<li class="flex items-center">
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
<span>PHP Version: <?php echo PHP_VERSION; ?>
<?php if (version_compare(PHP_VERSION, '8.0.0', '>=')): ?>
<span class="text-green-600">(✓ Meets requirement)</span>
<?php else: ?>
<span class="text-red-600">(✗ Requires 8.0+)</span>
<?php endif; ?>
</span>
</li>
<li class="flex items-center">
<?php if (extension_loaded('pdo_sqlite')): ?>
<i class="bi bi-check-circle-fill text-green-600 mr-2"></i>
<span>SQLite: <span class="text-green-600">Available (✓)</span></span>
<?php else: ?>
<i class="bi bi-x-circle-fill text-red-600 mr-2"></i>
<span>SQLite: <span class="text-red-600">Not Available (✗)</span></span>
<?php endif; ?>
</li>
</ul>
</div>
<?php else: ?>
<form method="POST" action="<?php echo url('/setup'); ?>" class="space-y-4">
<div>
<label for="password" class="block text-sm font-medium theme-text-muted mb-1">Create Password</label>
<input type="password" id="password" name="password" required
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter password (min 6 characters)">
<?php
$canSetup = version_compare(PHP_VERSION, '8.0.0', '>=') && extension_loaded('pdo_sqlite');
?>
<?php if (!$canSetup): ?>
<div class="border px-4 py-3 rounded mb-4" style="background-color: #fef9c3; background-color: color-mix(in srgb, #eab308 16%, var(--theme-surface)); border-color: #facc15; border-color: color-mix(in srgb, #eab308 38%, var(--theme-border)); color: #854d0e; color: var(--theme-text);">
<p class="font-semibold">System requirements not met!</p>
<p class="text-sm mt-1">Please ensure PHP 8.0+ and SQLite extension are available.</p>
</div>
<div>
<label for="confirm_password" class="block text-sm font-medium theme-text-muted mb-1">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" required
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Confirm password">
</div>
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
Complete Setup
</button>
</form>
<?php endif; ?>
</div>
<?php else: ?>
<form method="POST" action="<?php echo url('/setup'); ?>" class="space-y-4">
<div>
<label for="password" class="block text-sm font-medium theme-text-muted mb-1">Create Password</label>
<input type="password" id="password" name="password" required
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter password (min 6 characters)">
</div>
<div>
<label for="confirm_password" class="block text-sm font-medium theme-text-muted mb-1">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" required
class="w-full px-3 py-2 border border-gray-300 theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Confirm password">
</div>
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">
Complete Setup
</button>
</form>
<?php endif; ?>
</div>
</main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body>
</html>
views/vehicle.php
+1 -5
View File
@@ -13,11 +13,7 @@
<header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
<div class="flex items-center space-x-4">
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
<?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
</div>
</header>