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> <title><?php echo htmlspecialchars($vehicle['name']); ?> - Maintenance Export</title>
<script src="https://cdn.tailwindcss.com"></script> <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"> <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> </head>
<body class="bg-white p-8"> <body class="theme-page min-h-screen">
<div class="max-w-4xl mx-auto"> <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"> <div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2"><?php echo APP_NAME; ?></h1> <h1 class="text-3xl font-bold theme-text mb-2"><?php echo APP_NAME; ?></h1>
<h2 class="text-xl text-gray-600">Vehicle Maintenance Export</h2> <h2 class="text-xl theme-text-muted">Vehicle Maintenance Export</h2>
</div> </div>
<!-- Vehicle Information --> <!-- Vehicle Information -->
<div class="bg-gray-50 rounded-lg p-6 mb-8"> <div class="theme-surface rounded-lg shadow-sm p-6 mb-8">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Vehicle Information</h3> <h3 class="text-xl font-semibold theme-text mb-4">Vehicle Information</h3>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div> <div>
<span class="font-medium text-gray-700">Name:</span> <span class="font-medium theme-text">Name:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['name']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['name']); ?></span>
</div> </div>
<?php if ($vehicle['year']): ?> <?php if ($vehicle['year']): ?>
<div> <div>
<span class="font-medium text-gray-700">Year:</span> <span class="font-medium theme-text">Year:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['year']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['year']); ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if ($vehicle['make']): ?> <?php if ($vehicle['make']): ?>
<div> <div>
<span class="font-medium text-gray-700">Make:</span> <span class="font-medium theme-text">Make:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['make']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['make']); ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if ($vehicle['model']): ?> <?php if ($vehicle['model']): ?>
<div> <div>
<span class="font-medium text-gray-700">Model:</span> <span class="font-medium theme-text">Model:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['model']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['model']); ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if ($vehicle['color']): ?> <?php if ($vehicle['color']): ?>
<div> <div>
<span class="font-medium text-gray-700">Color:</span> <span class="font-medium theme-text">Color:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['color']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['color']); ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if ($vehicle['license_plate']): ?> <?php if ($vehicle['license_plate']): ?>
<div> <div>
<span class="font-medium text-gray-700">License Plate:</span> <span class="font-medium theme-text">License Plate:</span>
<span class="text-gray-600"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span> <span class="theme-text-muted"><?php echo htmlspecialchars($vehicle['license_plate']); ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
@@ -57,16 +65,16 @@
<!-- Maintenance History --> <!-- Maintenance History -->
<div> <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)): ?> <?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: ?> <?php else: ?>
<div class="space-y-4"> <div class="space-y-4">
<?php foreach ($maintenanceItems as $item): ?> <?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"> <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']): ?> <?php if ($item['cost']): ?>
<span class="bg-green-100 text-green-800 px-3 py-1 rounded"> <span class="bg-green-100 text-green-800 px-3 py-1 rounded">
$<?php echo number_format($item['cost'], 2); ?> $<?php echo number_format($item['cost'], 2); ?>
@@ -74,7 +82,7 @@
<?php endif; ?> <?php endif; ?>
</div> </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> <div>
<strong>Date:</strong> <?php echo date('M d, Y', strtotime($item['date'])); ?> <strong>Date:</strong> <?php echo date('M d, Y', strtotime($item['date'])); ?>
</div> </div>
@@ -94,7 +102,7 @@
</div> </div>
<?php if ($item['description']): ?> <?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> <strong>Description:</strong><br>
<?php echo nl2br(htmlspecialchars($item['description'])); ?> <?php echo nl2br(htmlspecialchars($item['description'])); ?>
</div> </div>
@@ -105,10 +113,11 @@
<?php endif; ?> <?php endif; ?>
</div> </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>Exported on <?php echo date('F j, Y \a\t g:i A'); ?></p>
<p>Generated by <?php echo APP_NAME; ?></p> <p>Generated by <?php echo APP_NAME; ?></p>
</div> </div>
</div> </main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body> </body>
</html> </html>
views/index.php
+1 -5
View File
@@ -13,11 +13,7 @@
<header class="theme-surface shadow-sm"> <header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <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> <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"> <?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-95">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
</div> </div>
</header> </header>
views/login.php
+10 -1
View File
@@ -8,7 +8,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> <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'; ?> <?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
</head> </head>
<body class="theme-page min-h-screen flex items-center justify-center"> <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"> <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> <h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?></h1>
@@ -38,6 +46,7 @@
</button> </button>
</form> </form>
</div> </div>
</main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?> <?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body> </body>
</html> </html>
views/partials/theme.php
-31
View File
@@ -106,19 +106,6 @@ if ($themeSection === 'head'):
color: var(--theme-text-muted); 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 { #themeToggle:focus-visible {
outline: 3px solid #2563eb; outline: 3px solid #2563eb;
outline-offset: 2px; outline-offset: 2px;
@@ -129,24 +116,6 @@ endif;
if ($themeSection === 'body'): 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> <script>
(function () { (function () {
var html = document.documentElement; 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"> <header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <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> <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"> <?php $showSettings = false; include __DIR__ . '/partials/topbar-controls.php'; ?>
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
</div> </div>
</header> </header>
views/setup.php
+10 -1
View File
@@ -8,7 +8,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> <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'; ?> <?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
</head> </head>
<body class="theme-page min-h-screen flex items-center justify-center"> <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"> <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> <h1 class="text-3xl font-bold theme-text mb-6 text-center"><?php echo APP_NAME; ?> Setup</h1>
@@ -75,6 +83,7 @@
</form> </form>
<?php endif; ?> <?php endif; ?>
</div> </div>
</main>
<?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?> <?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
</body> </body>
</html> </html>
views/vehicle.php
+1 -5
View File
@@ -13,11 +13,7 @@
<header class="theme-surface shadow-sm"> <header class="theme-surface shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <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> <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"> <?php $showSettings = true; include __DIR__ . '/partials/topbar-controls.php'; ?>
<a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
<i class="bi bi-gear-fill text-2xl"></i>
</a>
</div>
</div> </div>
</header> </header>