fix: Hide feedback FAB on mobile, add to drawer, persist install dismissal

FAB overlaps PWA install prompt and update notifications on small screens.
Mobile users now access feedback via the navbar drawer instead. Install
prompt dismissal persists in localStorage and is skipped in standalone mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow 2026-02-11 05:55:30 +13:00
parent 8e5aff3bee
commit e9511afd85
3 changed files with 28 additions and 5 deletions

View file

@ -65,8 +65,8 @@ class TractausFeedback {
renderFAB() {
const fabHTML = `
<button id="feedback-fab"
class="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-full shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-200 group flex items-center gap-2"
style="position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; z-index: 999999 !important; display: flex !important; visibility: visible !important; opacity: 1 !important;"
class="hidden md:flex bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-full shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-200 group items-center gap-2"
style="position: fixed !important; bottom: 1.5rem !important; right: 1.5rem !important; z-index: 999999 !important; visibility: visible !important; opacity: 1 !important;"
aria-label="Give Feedback"
title="Give Feedback">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

View file

@ -238,6 +238,11 @@ class TractatusNavbar {
<div class="pt-1">
<a href="/koha.html" class="block px-3 py-2.5 text-sm font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 rounded-lg transition border border-teal-200">Koha</a>
</div>
<!-- Feedback (mobile-only, replaces hidden FAB) -->
<div class="pt-1">
<button id="mobile-feedback-btn" class="w-full text-left block px-3 py-2.5 text-sm font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg transition border border-blue-200">Feedback</button>
</div>
</nav>
</div>
</div>
@ -397,6 +402,17 @@ class TractatusNavbar {
});
});
// Mobile feedback button — close drawer then open feedback modal
const mobileFeedbackBtn = document.getElementById('mobile-feedback-btn');
if (mobileFeedbackBtn) {
mobileFeedbackBtn.addEventListener('click', () => {
if (this.mobileMenuOpen) {
toggleMobileMenu();
}
window.dispatchEvent(new CustomEvent('openFeedbackModal'));
});
}
// Mobile accordion sections
const mobileSections = document.querySelectorAll('.mobile-nav-section');
mobileSections.forEach(section => {

View file

@ -208,6 +208,12 @@ class VersionManager {
}
setupInstallPrompt() {
// Skip entirely if already running as installed PWA
if (window.matchMedia('(display-mode: standalone)').matches ||
window.navigator.standalone === true) {
return;
}
// Listen for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
@ -217,7 +223,7 @@ class VersionManager {
this.deferredInstallPrompt = e;
// Check if user has dismissed install prompt before
const dismissed = sessionStorage.getItem('install_prompt_dismissed');
const dismissed = localStorage.getItem('tractatus_install_dismissed');
if (!dismissed) {
// Show install prompt after 30 seconds
setTimeout(() => {
@ -230,6 +236,7 @@ class VersionManager {
window.addEventListener('appinstalled', () => {
console.log('[VersionManager] PWA installed');
this.deferredInstallPrompt = null;
localStorage.setItem('tractatus_install_dismissed', 'true');
// Hide install prompt if visible
const prompt = document.getElementById('tractatus-install-prompt');
@ -407,8 +414,8 @@ class VersionManager {
}, 300);
}
// Remember dismissal for this session
sessionStorage.setItem('install_prompt_dismissed', 'true');
// Remember dismissal persistently across sessions
localStorage.setItem('tractatus_install_dismissed', 'true');
}
}