Skip to content

Omogeneizzazione UI backend: colori, settings flat da mobile, toggle, scroll-lock #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fabiodalez-dev merged 6 commits into from
Jun 25, 2026
Merged

Omogeneizzazione UI backend: colori, settings flat da mobile, toggle, scroll-lock #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f2daac4
fix(mobile-api): align settings page chrome with the standard admin s…
fabiodalez-dev Jun 25, 2026
02cd2db
fix(ui): homogeneous blue settings/plugin pages + mobile-flat readabi…
fabiodalez-dev Jun 25, 2026
bb299ff
fix(ui): unify all on/off toggles to the canonical gray→dark switch
fabiodalez-dev Jun 25, 2026
50807e8
fix(ui): unify advanced-tab section headers + add toggles E2E regression
fabiodalez-dev Jun 25, 2026
c2796c4
fix(mobile): lock body scroll while the mobile sidebar/overlay is open
fabiodalez-dev Jun 25, 2026
fb05cc7
fix(ui): center the sidebar quick-stats numbers and labels
fabiodalez-dev Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/Views/admin/bulk-enrich.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
<p class="text-sm text-gray-600 mb-6"><?= __("Abilita l'arricchimento automatico tramite cron. I libri verranno arricchiti in background a intervalli regolari.") ?></p>
<div class="flex items-center gap-4">
<button type="button" id="toggle-enrichment"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 <?= $enabled ? 'bg-blue-600' : 'bg-gray-200' ?>"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 <?= $enabled ? 'bg-gray-900' : 'bg-gray-200' ?>"
role="switch" aria-checked="<?= $enabled ? 'true' : 'false' ?>"
aria-label="<?= htmlspecialchars(__('Arricchimento Automatico'), ENT_QUOTES, 'UTF-8') ?>"
aria-labelledby="toggle-label">
Expand Down Expand Up @@ -168,14 +168,14 @@ class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-xl hove

if (newState) {
btn.classList.remove('bg-gray-200');
btn.classList.add('bg-blue-600');
btn.classList.add('bg-gray-900');
span.classList.remove('translate-x-0');
span.classList.add('translate-x-5');
label.textContent = <?= json_encode(__("Attivo"), JSON_HEX_TAG) ?>;
label.classList.remove('text-gray-500');
label.classList.add('text-green-700');
} else {
btn.classList.remove('bg-blue-600');
btn.classList.remove('bg-gray-900');
btn.classList.add('bg-gray-200');
span.classList.remove('translate-x-5');
span.classList.add('translate-x-0');
Expand Down
25 changes: 13 additions & 12 deletions app/Views/events/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,35 +317,36 @@ class="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 transiti
/* Toggle Switch Styles */
.toggle-switch {
position: relative;
width: 60px;
height: 32px;
background-color: #d1d5db;
width: 44px;
height: 24px;
background-color: #e5e7eb;
border-radius: 9999px;
transition: background-color 0.3s ease;
}

.toggle-checkbox:checked+.toggle-switch {
background-color: #10b981;
background-color: #111827;
}

.toggle-slider {
position: absolute;
top: 3px;
left: 3px;
width: 26px;
height: 26px;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: white;
border: 1px solid #d1d5db;
border-radius: 9999px;
transition: transform 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-checkbox:checked+.toggle-switch .toggle-slider {
transform: translateX(28px);
transform: translateX(20px);
}

.toggle-checkbox:focus+.toggle-switch {
outline: 2px solid #3b82f6;
.toggle-checkbox:focus-visible+.toggle-switch {
outline: 2px solid #111827;
outline-offset: 2px;
}
</style>
Expand Down
25 changes: 23 additions & 2 deletions app/Views/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,12 +447,12 @@ class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 group-hov
<?= __("Statistiche Rapide") ?>
</div>
<div class="grid grid-cols-<?= $isCatalogueMode ? '1' : '2' ?> gap-3 mt-3">
<div class="p-3 rounded-lg bg-gray-100 border border-gray-200">
<div class="p-3 rounded-lg bg-gray-100 border border-gray-200 text-center">
<div class="text-2xl font-bold text-gray-900" id="stats-books">-</div>
<div class="text-xs text-gray-600 font-medium"><?= __("Libri") ?></div>
</div>
<?php if (!$isCatalogueMode): ?>
<div class="p-3 rounded-lg bg-gray-100 border border-gray-200">
<div class="p-3 rounded-lg bg-gray-100 border border-gray-200 text-center">
<div class="text-2xl font-bold text-gray-900" id="stats-loans">-</div>
<div class="text-xs text-gray-600 font-medium"><?= __("Prestiti") ?></div>
</div>
Expand Down Expand Up @@ -996,19 +996,40 @@ function initializeMobileMenu() {
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
const sidebar = document.getElementById('sidebar');
let scrollLockY = 0;

function openMobileMenu() {
sidebar.classList.remove('-translate-x-full');
sidebar.classList.add('translate-x-0');
mobileMenuOverlay.classList.remove('hidden');
// Lock the page behind the overlay. `overflow:hidden` on <body> alone is
// not enough on iOS Safari — touch-drag still scrolls the content under
// the overlay — so pin the body in place and restore on close.
scrollLockY = window.scrollY || document.documentElement.scrollTop || 0;
document.body.classList.add('overflow-hidden');
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollLockY}px`;
document.body.style.left = '0';
document.body.style.right = '0';
document.body.style.width = '100%';
}

function closeMobileMenu() {
sidebar.classList.add('-translate-x-full');
sidebar.classList.remove('translate-x-0');
mobileMenuOverlay.classList.add('hidden');
const wasLocked = document.body.style.position === 'fixed';
document.body.classList.remove('overflow-hidden');
document.body.style.position = '';
document.body.style.top = '';
document.body.style.left = '';
document.body.style.right = '';
document.body.style.width = '';
// Only restore scroll when we actually locked (avoid jumping to top when
// close fires on desktop / nav-link clicks where no lock was applied).
if (wasLocked) {
window.scrollTo(0, scrollLockY);
}
}

if (mobileMenuButton) {
Expand Down
104 changes: 46 additions & 58 deletions app/Views/settings/advanced-tab.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
/** @var string $csrfToken */
use App\Support\HtmlHelper;
?>
<style>
.api-toggle-track .api-toggle-label-on { display: none; }
.api-toggle-input:checked + .api-toggle-track .api-toggle-label-on { display: flex; }
.api-toggle-input:checked + .api-toggle-track .api-toggle-label-off { display: none; }
</style>
<section data-settings-panel="advanced" class="settings-panel <?php echo $activeTab === 'advanced' ? 'block' : 'hidden'; ?>">
<form action="<?= htmlspecialchars(url('/admin/settings/advanced'), ENT_QUOTES, 'UTF-8') ?>" method="post" class="space-y-6">
<input type="hidden" name="csrf_token" value="<?php echo HtmlHelper::e($csrfToken); ?>">
Expand Down Expand Up @@ -61,7 +56,7 @@
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<label for="custom_js_essential" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
<textarea id="custom_js_essential"
name="custom_js_essential"
Expand Down Expand Up @@ -102,7 +97,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<label for="custom_js_analytics" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
<textarea id="custom_js_analytics"
name="custom_js_analytics"
Expand Down Expand Up @@ -148,7 +143,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<label for="custom_js_marketing" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
<textarea id="custom_js_marketing"
name="custom_js_marketing"
Expand Down Expand Up @@ -187,7 +182,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<label for="custom_header_css" class="block text-sm font-medium text-gray-700"><?= __("Codice CSS") ?></label>
<textarea id="custom_header_css"
name="custom_header_css"
Expand Down Expand Up @@ -228,7 +223,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div>
<label class="inline-flex items-center gap-3 cursor-pointer">
<input type="checkbox"
Expand Down Expand Up @@ -287,7 +282,7 @@ class="w-5 h-5 text-gray-900 border-gray-300 rounded focus:ring-gray-500">
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div>
<label class="inline-flex items-center gap-3 cursor-pointer">
<input type="checkbox"
Expand Down Expand Up @@ -322,7 +317,7 @@ class="w-5 h-5 text-gray-900 border-gray-300 rounded focus:ring-gray-500">
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div>
<label for="days_before_expiry_warning" class="block text-sm font-medium text-gray-700 mb-2">
<?= __("Giorni di preavviso per scadenza prestito") ?>
Expand Down Expand Up @@ -369,7 +364,7 @@ class="block w-32 rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gr
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div>
<label for="session_lifetime" class="block text-sm font-medium text-gray-700 mb-2"><?= __("Durata sessione") ?></label>
<select id="session_lifetime"
Expand Down Expand Up @@ -407,7 +402,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div class="flex items-center justify-between">
<div>
<span id="llms_txt_enabled_label" class="text-sm font-semibold text-gray-900"><?= __("Abilita llms.txt") ?></span>
Expand Down Expand Up @@ -476,7 +471,7 @@ class="toggle-checkbox sr-only">
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
<div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
<div class="flex items-center justify-between">
<div>
<span class="text-sm font-semibold text-gray-900"><?= __("Abilita Modalità Catalogo") ?></span>
Expand Down Expand Up @@ -548,33 +543,39 @@ class="toggle-checkbox sr-only">
?>

<!-- <?= __("Sitemap XML") ?> Section -->
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6">
<div class="border-b border-gray-200 px-6 py-4">
<div class="flex items-center gap-3">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100">
<i class="fas fa-sitemap text-gray-600"></i>
</span>
<div>
<h3 class="text-lg font-semibold text-gray-900"><?= __("Sitemap XML") ?></h3>
<p class="text-sm text-gray-600 mt-0.5"><?= __("Mappa del sito per i motori di ricerca") ?></p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
<div class="border-b border-gray-200 px-6 py-4 max-sm:!px-0 max-sm:!border-0">
<h2 class="text-xl font-semibold text-gray-900 flex items-center gap-2">
<i class="fas fa-sitemap text-gray-500"></i>
<?= __("Sitemap XML") ?>
</h2>
<p class="text-sm text-gray-600 mt-1"><?= __("Mappa del sito per i motori di ricerca") ?></p>
</div>
<div class="p-6 space-y-6">
<div class="p-6 space-y-6 max-sm:!p-0">
<!-- Sitemap Info -->
<div class="space-y-3">
<div class="flex items-start gap-2 text-sm">
<i class="fas fa-link text-gray-400 mt-0.5"></i>
<div>
<div class="min-w-0">
<span class="text-gray-600"><?= __("URL pubblico:") ?></span>
<a href="<?php echo HtmlHelper::e($publicSitemapUrl); ?>" class="text-gray-900 hover:text-black underline ml-2" target="_blank" rel="noopener noreferrer"><?php echo HtmlHelper::e($publicSitemapUrl); ?></a>
<a href="<?php echo HtmlHelper::e($publicSitemapUrl); ?>" class="text-gray-900 hover:text-black underline ml-2 break-all" target="_blank" rel="noopener noreferrer"><?php echo HtmlHelper::e($publicSitemapUrl); ?></a>
<button type="button"
onclick="copyToClipboard(<?php echo htmlspecialchars(json_encode($publicSitemapUrl, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT), ENT_QUOTES, 'UTF-8'); ?>, this)"
class="inline-flex items-center gap-1 ml-2 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded transition-colors">
<i class="fas fa-copy"></i> <?= __("Copia") ?>
</button>
<p class="mt-1 flex items-start gap-1.5 text-xs text-green-700">
<i class="fas fa-arrow-right mt-0.5" aria-hidden="true"></i>
<span><?= __("Invia questo URL a Google Search Console.") ?></span>
</p>
</div>
</div>
<div class="flex items-start gap-2 text-sm">
<i class="fas fa-file-code text-gray-400 mt-0.5"></i>
<div>
<div class="min-w-0">
<span class="text-gray-600"><?= __("Percorso file:") ?></span>
<code class="bg-gray-100 px-2 py-1 rounded text-xs ml-2"><?php echo HtmlHelper::e($filesystemPath); ?></code>
<code class="bg-gray-100 px-2 py-1 rounded text-xs ml-2 break-all"><?php echo HtmlHelper::e($filesystemPath); ?></code>
<p class="mt-1 text-xs text-gray-500"><?= __("Percorso sul server (per cron/CLI) — non inviarlo a Google.") ?></p>
</div>
</div>
<div class="flex items-start gap-2 text-sm">
Expand Down Expand Up @@ -681,23 +682,21 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
$apiEndpoint = \App\Controllers\SeoController::resolveBaseUrl() . '/api/public/books/search';
?>

<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6">
<div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors" onclick="toggleApiSection()">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100">
<i class="fas fa-key text-gray-600"></i>
</span>
<div>
<h3 class="text-lg font-semibold text-gray-900"><?= __("API Pubblica") ?></h3>
<p class="text-sm text-gray-600 mt-0.5"><?= __("Gestisci l'accesso all'API per cercare libri via EAN, ISBN e autore") ?></p>
</div>
<div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
<div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors max-sm:!px-0 max-sm:!border-0" onclick="toggleApiSection()">
<div class="flex items-center justify-between gap-3">
<div>
<h2 class="text-xl font-semibold text-gray-900 flex items-center gap-2">
<i class="fas fa-key text-gray-500"></i>
<?= __("API Pubblica") ?>
</h2>
<p class="text-sm text-gray-600 mt-1"><?= __("Gestisci l'accesso all'API per cercare libri via EAN, ISBN e autore") ?></p>
</div>
<i class="fas fa-chevron-down text-gray-400 transition-transform" id="api-section-icon"></i>
</div>
</div>

<div id="api-section-content" class="p-6 space-y-6">
<div id="api-section-content" class="p-6 space-y-6 max-sm:!p-0">
<!-- Enable/Disable API -->
<form action="<?= htmlspecialchars(url('/admin/settings/api/toggle'), ENT_QUOTES, 'UTF-8') ?>" method="post" id="api-toggle-form">
<input type="hidden" name="csrf_token" value="<?php echo HtmlHelper::e($csrfToken); ?>">
Expand All @@ -708,25 +707,14 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox"
id="api_enabled"
name="api_enabled"
value="1"
<?php echo $apiEnabled ? 'checked' : ''; ?>
class="sr-only peer api-toggle-input"
class="toggle-checkbox sr-only"
onchange="document.getElementById('api-toggle-form').submit()">
<div class="api-toggle-track w-20 h-10 bg-white border-4 border-gray-900 rounded-full peer
peer-checked:bg-gray-900
transition-all duration-300 ease-in-out
relative cursor-pointer
shadow-inner">
<span class="absolute top-0.5 left-0.5 w-8 h-8 bg-gray-900 rounded-full
peer-checked:translate-x-9 peer-checked:bg-white
transition-all duration-300 ease-in-out
shadow-lg
flex items-center justify-center text-white text-xs font-bold peer-checked:text-gray-900">
<span class="api-toggle-label-off uppercase tracking-wide"><?php echo HtmlHelper::e(__('OFF')); ?></span>
<span class="api-toggle-label-on uppercase tracking-wide"><?php echo HtmlHelper::e(__('ON')); ?></span>
</span>
</div>
<div class="toggle-bg w-11 h-6 bg-gray-200 rounded-full transition-colors"></div>
<div class="toggle-dot absolute top-[2px] left-[2px] bg-white border border-gray-300 rounded-full h-5 w-5 transition-transform"></div>
</label>
</div>
</form>
Expand Down
Loading
Loading