Skip to content

Commit 1e6db7e

Browse files
devanshi14malhotradevanshi14malhotra
committed
Revert PWA install popup banner back to inline button as requested
1 parent 3d1e320 commit 1e6db7e

3 files changed

Lines changed: 94 additions & 146 deletions

File tree

‎frontend/css/pwa.css‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,77 @@
1-
/* PWA styles moved to style.css */
1+
/* pwa.css */
2+
3+
#pwa-install-banner {
4+
position: relative;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
padding: 16px 24px;
9+
}
10+
11+
.pwa-banner-icon {
12+
height: 100px;
13+
margin-bottom: 0px;
14+
}
15+
16+
.pwa-banner-content {
17+
display: block;
18+
align-items: center;
19+
justify-content: center;
20+
gap: 12px;
21+
22+
text-align: center;
23+
}
24+
25+
.pwa-banner-text {
26+
margin-bottom: 15px;
27+
}
28+
29+
.pwa-banner-actions {
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
gap: 10px;
34+
}
35+
36+
37+
38+
/* CSS */
39+
.pwa-install-btn {
40+
background-color: #fbeee0;
41+
border: 2px solid #422800;
42+
border-radius: 30px;
43+
box-shadow: #422800 4px 4px 0 0;
44+
color: #422800;
45+
cursor: pointer;
46+
display: inline-block;
47+
font-weight: 600;
48+
font-size: 18px;
49+
padding: 0 18px;
50+
line-height: 50px;
51+
text-align: center;
52+
text-decoration: none;
53+
user-select: none;
54+
-webkit-user-select: none;
55+
touch-action: manipulation;
56+
margin-bottom: 15px;
57+
}
58+
59+
.pwa-install-btn:hover {
60+
background-color: #fff;
61+
}
62+
63+
.pwa-install-btn:active {
64+
box-shadow: #422800 2px 2px 0 0;
65+
transform: translate(2px, 2px);
66+
}
67+
68+
@media (min-width: 768px) {
69+
.button-74 {
70+
min-width: 120px;
71+
padding: 0 25px;
72+
}
73+
}
74+
75+
.pwa-dismiss-btn {
76+
display: none;
77+
}

‎frontend/css/style.css‎

Lines changed: 0 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -439,134 +439,6 @@ header {
439439
display: none;
440440
}
441441

442-
/* --- PWA Install Prompt --- */
443-
#pwa-install-banner {
444-
position: fixed;
445-
left: 50%;
446-
bottom: 1.25rem;
447-
transform: translateX(-50%) translateY(10px);
448-
z-index: 9999;
449-
display: flex;
450-
align-items: center;
451-
justify-content: space-between;
452-
gap: 1rem;
453-
width: min(560px, calc(100vw - 2rem));
454-
padding: 1rem 1.1rem;
455-
border-radius: 18px;
456-
border: 1px solid var(--glass-border);
457-
background: var(--surface-panel);
458-
color: var(--text-main);
459-
box-shadow: var(--shadow-soft);
460-
backdrop-filter: blur(18px);
461-
-webkit-backdrop-filter: blur(18px);
462-
opacity: 0;
463-
pointer-events: auto;
464-
transition: opacity 0.25s ease, transform 0.25s ease;
465-
}
466-
467-
#pwa-install-banner.pwa-banner-visible {
468-
opacity: 1;
469-
transform: translateX(-50%) translateY(0);
470-
}
471-
472-
.pwa-banner-content {
473-
display: flex;
474-
align-items: center;
475-
gap: 0.85rem;
476-
min-width: 0;
477-
}
478-
479-
.pwa-banner-icon {
480-
width: 44px;
481-
height: 44px;
482-
border-radius: 14px;
483-
flex: 0 0 auto;
484-
box-shadow: 0 8px 18px rgba(44, 36, 32, 0.12);
485-
}
486-
487-
.pwa-banner-text {
488-
display: flex;
489-
flex-direction: column;
490-
gap: 0.2rem;
491-
min-width: 0;
492-
}
493-
494-
.pwa-banner-text strong {
495-
font-family: "Playfair Display", serif;
496-
font-size: 1rem;
497-
line-height: 1.2;
498-
}
499-
500-
.pwa-banner-text span {
501-
color: var(--text-muted);
502-
font-size: 0.92rem;
503-
line-height: 1.35;
504-
}
505-
506-
.pwa-banner-actions {
507-
display: flex;
508-
align-items: center;
509-
gap: 0.55rem;
510-
flex: 0 0 auto;
511-
}
512-
513-
.pwa-install-btn,
514-
.pwa-dismiss-btn {
515-
border: none;
516-
border-radius: 999px;
517-
cursor: pointer;
518-
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
519-
}
520-
521-
.pwa-install-btn {
522-
padding: 0.72rem 1rem;
523-
background: linear-gradient(135deg, var(--wood-dark), var(--wood-light));
524-
color: #fff;
525-
font-family: "Georgia", serif;
526-
box-shadow: 0 10px 20px rgba(93, 64, 55, 0.2);
527-
}
528-
529-
.pwa-install-btn:hover,
530-
.pwa-install-btn:focus-visible {
531-
transform: translateY(-1px);
532-
box-shadow: 0 14px 24px rgba(93, 64, 55, 0.24);
533-
outline: none;
534-
}
535-
536-
.pwa-dismiss-btn {
537-
width: 2.5rem;
538-
height: 2.5rem;
539-
background: var(--glass-bg);
540-
color: var(--text-main);
541-
}
542-
543-
.pwa-dismiss-btn:hover,
544-
.pwa-dismiss-btn:focus-visible {
545-
background: var(--glass-border);
546-
transform: translateY(-1px);
547-
outline: none;
548-
}
549-
550-
@media (max-width: 640px) {
551-
#pwa-install-banner {
552-
width: calc(100vw - 1rem);
553-
left: 50%;
554-
bottom: 0.5rem;
555-
padding: 0.9rem;
556-
border-radius: 16px;
557-
flex-direction: column;
558-
align-items: stretch;
559-
}
560-
561-
.pwa-banner-actions {
562-
justify-content: space-between;
563-
}
564-
565-
.pwa-install-btn {
566-
flex: 1;
567-
}
568-
}
569-
570442
main {
571443
padding: 2rem 4rem;
572444
max-width: 1400px;

‎frontend/js/pwa.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
// The SW must be registered from a path at or above the pages it controls.
2626
// All pages live in /frontend/pages/, so registering from /frontend/sw.js
2727
// with scope /frontend/ covers all of them.
28-
const SW_URL = '/frontend/sw.js';
28+
const SW_URL = '/frontend/sw.js';
2929
const SW_SCOPE = '/frontend/';
3030

3131
let _swRegistration = null;
@@ -121,21 +121,20 @@
121121
// ── Install Banner UI ──────────────────────────────────────────────────────
122122

123123
function _showInstallBanner() {
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.className = 'pwa-install-banner';
129-
banner.setAttribute('role', 'banner');
130-
banner.setAttribute('aria-label', 'Install BiblioDrift app');
131-
banner.innerHTML = `
132-
<div class="pwa-banner-content">
133-
<img src="../assets/images/biblioDrift_favicon.png"
134-
alt="BiblioDrift icon" class="pwa-banner-icon">
135-
<div class="pwa-banner-text">
136-
<strong>Install BiblioDrift.</strong>
137-
<span>Read offline, anytime.</span>
138-
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>
139138
</div>
140139
<div class="pwa-banner-actions">
141140
<button class="pwa-install-btn" id="pwa-install-btn"
@@ -157,6 +156,7 @@
157156
if (main) main.appendChild(banner);
158157
else document.body.appendChild(banner);
159158
}
159+
}
160160

161161
// Animate in
162162
requestAnimationFrame(() => banner.classList.add('pwa-banner-visible'));
@@ -247,7 +247,7 @@
247247
}
248248

249249
window.addEventListener('offline', _showOfflineIndicator);
250-
window.addEventListener('online', _hideOfflineIndicator);
250+
window.addEventListener('online', _hideOfflineIndicator);
251251

252252
// Show immediately if already offline when the page loads
253253
if (!navigator.onLine) _showOfflineIndicator();

0 commit comments

Comments
 (0)