Skip to content

Commit 5f62a9c

Browse files
devanshi14malhotradevanshi14malhotra
committed
Revert "Merge pull request #967 from contributor (Clean up inline CSS and inject PWA banner explicitly on all pages)"
This reverts commit 84e99b4, reversing changes made to f2922a1.
1 parent e4e78cb commit 5f62a9c

9 files changed

Lines changed: 1977 additions & 278 deletions

File tree

‎frontend/css/style.css‎

Lines changed: 0 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -7501,108 +7501,3 @@ dialog.book-preview-modal::backdrop {
75017501
font-size: 0.95rem;
75027502
}
75037503
}
7504-
7505-
/* ── PWA Install Banner ─────────────────────────────── */
7506-
#pwa-install-banner {
7507-
position: fixed;
7508-
bottom: 1.5rem;
7509-
left: 1.5rem;
7510-
z-index: 9999;
7511-
display: flex;
7512-
align-items: center;
7513-
justify-content: space-between;
7514-
gap: 1rem;
7515-
background: var(--card-bg, #2c2420);
7516-
color: var(--text-main, #f9f7f2);
7517-
border: 1px solid var(--border-color, rgba(255,255,255,0.1));
7518-
border-radius: 12px;
7519-
padding: 0.85rem 1.25rem;
7520-
box-shadow: 0 4px 20px rgba(0,0,0,0.35);
7521-
font-family: Georgia, serif;
7522-
max-width: 360px;
7523-
opacity: 0;
7524-
transform: translateY(12px);
7525-
transition: opacity 0.3s ease, transform 0.3s ease;
7526-
pointer-events: none;
7527-
}
7528-
7529-
#pwa-install-banner.pwa-banner-visible {
7530-
opacity: 1;
7531-
transform: translateY(0);
7532-
pointer-events: all;
7533-
}
7534-
7535-
.pwa-banner-content {
7536-
display: flex;
7537-
align-items: center;
7538-
gap: 0.75rem;
7539-
}
7540-
7541-
.pwa-banner-icon {
7542-
width: 36px;
7543-
height: 36px;
7544-
border-radius: 8px;
7545-
flex-shrink: 0;
7546-
}
7547-
7548-
.pwa-banner-text {
7549-
display: flex;
7550-
flex-direction: column;
7551-
gap: 0.15rem;
7552-
font-size: 0.875rem;
7553-
}
7554-
7555-
.pwa-banner-text strong {
7556-
font-size: 0.95rem;
7557-
color: var(--text-main, #f9f7f2);
7558-
}
7559-
7560-
.pwa-banner-text span {
7561-
font-size: 0.8rem;
7562-
opacity: 0.75;
7563-
}
7564-
7565-
.pwa-banner-actions {
7566-
display: flex;
7567-
align-items: center;
7568-
gap: 0.5rem;
7569-
flex-shrink: 0;
7570-
}
7571-
7572-
.pwa-install-btn {
7573-
background: var(--text-main);
7574-
color: var(--bg-color);
7575-
border: none;
7576-
border-radius: 30px; /* match .btn-primary */
7577-
padding: 0.5rem 1.25rem; /* smaller than modal btn */
7578-
font-family: Georgia, serif;
7579-
font-size: 0.875rem;
7580-
cursor: pointer;
7581-
transition: all 0.3s;
7582-
}
7583-
7584-
.pwa-install-btn:hover {
7585-
background: var(--accent-gold);
7586-
color: #fff;
7587-
transform: translateY(-2px);
7588-
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
7589-
}
7590-
7591-
.pwa-dismiss-btn {
7592-
background: transparent;
7593-
border: none;
7594-
color: var(--text-main, #f9f7f2);
7595-
font-size: 1rem;
7596-
cursor: pointer;
7597-
padding: 0.35rem;
7598-
border-radius: 6px;
7599-
opacity: 0.6;
7600-
transition: opacity 0.2s ease;
7601-
display: flex;
7602-
align-items: center;
7603-
justify-content: center;
7604-
}
7605-
7606-
.pwa-dismiss-btn:hover {
7607-
opacity: 1;
7608-
}

‎frontend/js/pwa.js‎

Lines changed: 45 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -121,67 +121,58 @@
121121
// ── Install Banner UI ──────────────────────────────────────────────────────
122122

123123
function _showInstallBanner() {
124-
let banner = document.getElementById('pwa-install-banner');
125-
if (!banner) {
126-
banner = document.createElement('div');
127-
banner.id = 'pwa-install-banner';
128-
banner.setAttribute('role', 'banner');
129-
banner.setAttribute('aria-label', 'Install BiblioDrift app');
130-
banner.innerHTML = `
131-
<div class="pwa-banner-content">
132-
<img src="../assets/images/biblioDrift_favicon.png"
133-
alt="BiblioDrift icon" class="pwa-banner-icon">
134-
<div class="pwa-banner-text">
135-
<strong>Install BiblioDrift.</strong>
136-
<span>Read offline, anytime.</span>
137-
</div>
124+
if (document.getElementById('pwa-install-banner')) return; // already shown
125+
126+
const banner = document.createElement('div');
127+
banner.id = 'pwa-install-banner';
128+
banner.setAttribute('role', 'banner');
129+
banner.setAttribute('aria-label', 'Install BiblioDrift app');
130+
banner.innerHTML = `
131+
<div class="pwa-banner-content">
132+
<img src="../assets/images/biblioDrift_favicon.png"
133+
alt="BiblioDrift icon" class="pwa-banner-icon">
134+
<div class="pwa-banner-text">
135+
<strong>Install BiblioDrift.</strong>
136+
<span>Read offline, anytime.</span>
138137
</div>
139-
<div class="pwa-banner-actions">
140-
<button class="pwa-install-btn" id="pwa-install-btn"
141-
aria-label="Install BiblioDrift as an app">
142-
Install
143-
</button>
144-
<button class="pwa-dismiss-btn" id="pwa-dismiss-btn"
145-
aria-label="Dismiss install prompt">
146-
<i class="fa-solid fa-xmark"></i>
147-
</button>
148-
</div>
149-
`;
150-
151-
const footer = document.querySelector(".main-footer");
152-
if (footer) {
153-
footer.parentNode.insertBefore(banner, footer);
154-
} else {
155-
const main = document.querySelector("main");
156-
if (main) main.appendChild(banner);
157-
else document.body.appendChild(banner);
158-
}
138+
</div>
139+
<div class="pwa-banner-actions">
140+
<button class="pwa-install-btn" id="pwa-install-btn"
141+
aria-label="Install BiblioDrift as an app">
142+
Install
143+
</button>
144+
<button class="pwa-dismiss-btn" id="pwa-dismiss-btn"
145+
aria-label="Dismiss install prompt">
146+
<i class="fa-solid fa-xmark"></i>
147+
</button>
148+
</div>
149+
`;
150+
151+
const footer = document.querySelector(".main-footer");
152+
if (footer) {
153+
footer.parentNode.insertBefore(banner, footer);
154+
} else {
155+
const main = document.querySelector("main");
156+
if (main) main.appendChild(banner);
157+
else document.body.appendChild(banner);
159158
}
160159

161160
// Animate in
162161
requestAnimationFrame(() => banner.classList.add('pwa-banner-visible'));
163162

164-
const installBtn = document.getElementById('pwa-install-btn');
165-
if (installBtn && !installBtn.dataset.listenerAttached) {
166-
installBtn.dataset.listenerAttached = 'true';
167-
installBtn.addEventListener('click', async () => {
168-
if (!_deferredPrompt) return;
169-
_deferredPrompt.prompt();
170-
const { outcome } = await _deferredPrompt.userChoice;
171-
_deferredPrompt = null;
172-
_hideInstallBanner();
173-
console.log(`[PWA] Install prompt outcome: ${outcome}`);
174-
});
175-
}
163+
document.getElementById('pwa-install-btn').addEventListener('click', async () => {
164+
if (!_deferredPrompt) return;
165+
_deferredPrompt.prompt();
166+
const { outcome } = await _deferredPrompt.userChoice;
167+
_deferredPrompt = null;
168+
_hideInstallBanner();
169+
console.log(`[PWA] Install prompt outcome: ${outcome}`);
170+
});
176171

177-
const dismissBtn = document.getElementById('pwa-dismiss-btn');
178-
if (dismissBtn && !dismissBtn.dataset.listenerAttached) {
179-
dismissBtn.dataset.listenerAttached = 'true';
180-
dismissBtn.addEventListener('click', () => {
181-
sessionStorage.setItem('pwa-install-dismissed', '1');
182-
_hideInstallBanner();
183-
});
184-
}
172+
document.getElementById('pwa-dismiss-btn').addEventListener('click', () => {
173+
sessionStorage.setItem('pwa-install-dismissed', '1');
174+
_hideInstallBanner();
175+
});
185176
}
186177

187178
function _hideInstallBanner() {

‎frontend/pages/app.html‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -445,19 +445,6 @@ <h3>Your Reading Mood Tags</h3>
445445

446446

447447
<!--The footer is being called usingt footer.js.-->
448-
<div id="pwa-install-banner" role="banner" aria-label="Install BiblioDrift app" class="pwa-banner-visible">
449-
<div class="pwa-banner-content">
450-
<img src="../assets/images/biblioDrift_favicon.png" alt="BiblioDrift icon" class="pwa-banner-icon">
451-
<div class="pwa-banner-text">
452-
<strong>Install BiblioDrift.</strong>
453-
<span>Read offline, anytime.</span>
454-
</div>
455-
</div>
456-
<div class="pwa-banner-actions">
457-
<button class="pwa-install-btn" id="pwa-install-btn" aria-label="Install BiblioDrift as an app">Install</button>
458-
<button class="pwa-dismiss-btn" id="pwa-dismiss-btn" aria-label="Dismiss install prompt"><i class="fa-solid fa-xmark"></i></button>
459-
</div>
460-
</div>
461448
<script src="../js/config.js"></script>
462449
<script src="../js/security.js"></script>
463450
<script src="../js/app.js"></script>
@@ -601,4 +588,3 @@ <h4>Elara</h4>
601588
</body>
602589

603590
</html>
604-

‎frontend/pages/auth.html‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -765,20 +765,7 @@ <h3 style="color: var(--text-main) !important;">Ambient Sanctuary</h3>
765765
</div>
766766

767767

768-
<div id="pwa-install-banner" role="banner" aria-label="Install BiblioDrift app" class="pwa-banner-visible">
769-
<div class="pwa-banner-content">
770-
<img src="../assets/images/biblioDrift_favicon.png" alt="BiblioDrift icon" class="pwa-banner-icon">
771-
<div class="pwa-banner-text">
772-
<strong>Install BiblioDrift.</strong>
773-
<span>Read offline, anytime.</span>
774-
</div>
775-
</div>
776-
<div class="pwa-banner-actions">
777-
<button class="pwa-install-btn" id="pwa-install-btn" aria-label="Install BiblioDrift as an app">Install</button>
778-
<button class="pwa-dismiss-btn" id="pwa-dismiss-btn" aria-label="Dismiss install prompt"><i class="fa-solid fa-xmark"></i></button>
779-
</div>
780-
</div>
781-
<script src="../js/config.js"></script>
768+
<script src="../js/config.js"></script>
782769
<script src="../js/auth-password-reset.js"></script>
783770
<script src="../js/footer.js"></script>
784771
<script src="../js/app.js"></script>
@@ -1079,4 +1066,4 @@ <h3 style="color: var(--text-main) !important;">Ambient Sanctuary</h3>
10791066
<script src="../js/ambient.js"></script>
10801067
</body>
10811068

1082-
</html>
1069+
</html>

‎frontend/pages/chat.html‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -523,20 +523,7 @@ <h3>Ambient Sanctuary</h3>
523523
window.renderAuthNavigation?.(link, tooltip, false);
524524
});
525525
</script>
526-
<div id="pwa-install-banner" role="banner" aria-label="Install BiblioDrift app" class="pwa-banner-visible">
527-
<div class="pwa-banner-content">
528-
<img src="../assets/images/biblioDrift_favicon.png" alt="BiblioDrift icon" class="pwa-banner-icon">
529-
<div class="pwa-banner-text">
530-
<strong>Install BiblioDrift.</strong>
531-
<span>Read offline, anytime.</span>
532-
</div>
533-
</div>
534-
<div class="pwa-banner-actions">
535-
<button class="pwa-install-btn" id="pwa-install-btn" aria-label="Install BiblioDrift as an app">Install</button>
536-
<button class="pwa-dismiss-btn" id="pwa-dismiss-btn" aria-label="Dismiss install prompt"><i class="fa-solid fa-xmark"></i></button>
537-
</div>
538-
</div>
539-
<script src="../js/config.js"></script>
526+
<script src="../js/config.js"></script>
540527
<script src="../js/theme-manager.js"></script>
541528
<script src="../js/ambient.js"></script>
542529
<script src="../js/chat.js"></script>
@@ -547,4 +534,3 @@ <h3>Ambient Sanctuary</h3>
547534
</body>
548535

549536
</html>
550-

‎frontend/pages/community-stories.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -581,4 +581,3 @@ <h2 id="readTitle"></h2>
581581
</html>
582582

583583

584-

0 commit comments

Comments
 (0)