gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pwa): improve install prompt visibility and styling
All checks were successful
Deploy to Production / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-26 23:49:55 +00:00
parent 8655533a2d
commit c3f96bacc7
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/InstallPrompt.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div v-if="showInstallPrompt" class="install-prompt"> <div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
<div class="prompt-content"> <div class="prompt-content">
<span class="prompt-text">Zainstaluj aplikację dla szybszego dostępu</span> <span class="prompt-text">Zainstaluj aplikację dla szybszego dostępu</span>
<div class="prompt-actions"> <div class="prompt-actions">
@@ -27,14 +27,14 @@ const handleBeforeInstallPrompt = (e) => {
const installPWA = async () => { const installPWA = async () => {
if (!deferredPrompt) return if (!deferredPrompt) return
// Show the install prompt // Show the install prompt
deferredPrompt.prompt() deferredPrompt.prompt()
// Wait for the user to respond to the prompt // Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice const { outcome } = await deferredPrompt.userChoice
console.log(`User response to the install prompt: ${outcome}`) console.log(`User response to the install prompt: ${outcome}`)
// We've used the prompt, and can't use it again, throw it away // We've used the prompt, and can't use it again, throw it away
deferredPrompt = null deferredPrompt = null
showInstallPrompt.value = false showInstallPrompt.value = false
@@ -57,18 +57,15 @@ onBeforeUnmount(() => {
<style scoped> <style scoped>
.install-prompt { .install-prompt {
position: fixed; position: fixed;
bottom: 80px; /* Above footer */ bottom: calc(5rem + env(safe-area-inset-bottom)); /* Above footer with extra space */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 90%; width: 90%;
max-width: 400px; max-width: 400px;
background-color: var(--card-bg);
border: 1px solid var(--accent-color);
border-radius: 12px;
padding: 1rem; padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 9999;
z-index: 100;
animation: slideUp 0.3s ease-out; animation: slideUp 0.3s ease-out;
border-radius: 12px;
} }
.prompt-content { .prompt-content {
@@ -81,7 +78,7 @@ onBeforeUnmount(() => {
.prompt-text { .prompt-text {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
color: var(--text-color); color: var(--text-strong);
} }
.prompt-actions { .prompt-actions {
@@ -91,8 +88,8 @@ onBeforeUnmount(() => {
} }
.install-btn { .install-btn {
background-color: var(--accent-color); background-color: var(--primary-accent);
color: white; color: #000; /* Dark text on bright cyan accent for dark mode */
border: none; border: none;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 6px; border-radius: 6px;
@@ -129,7 +126,7 @@ onBeforeUnmount(() => {
left: auto; left: auto;
transform: none; transform: none;
} }
@keyframes slideUp { @keyframes slideUp {
from { from {
opacity: 0; opacity: 0;
@@ -141,4 +138,10 @@ onBeforeUnmount(() => {
} }
} }
} }
</style>
/* Light theme overrides for better contrast */
:global(:root[data-theme="light"]) .install-btn {
background-color: var(--accent-purple);
color: #fff;
}
</style>