fix: Remove toast notification from PDF download flow
Simplified PDF download UX to use only the modal loading overlay, removing the redundant toast notification that appeared when the modal was closed during download. Updated tests to reflect the new behavior. Changes: - Removed toast trigger logic from PDF modal download function - Removed modal close event listener for toast display - Updated toast notification test expectations - Fixed recommended card outline styling
This commit is contained in:
juanatsap
@@ -448,7 +448,7 @@
|
||||
|
||||
/* PDF Modal Specific Overrides */
|
||||
.pdf-download-modal {
|
||||
max-width: 900px;
|
||||
max-width: 800px;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
@@ -464,7 +464,7 @@
|
||||
.pdf-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
margin: 2rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
@@ -472,14 +472,14 @@
|
||||
.pdf-option-card {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 250ms ease;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pdf-option-card:hover {
|
||||
@@ -489,12 +489,17 @@
|
||||
}
|
||||
|
||||
.pdf-option-card:focus {
|
||||
outline: 2px solid #ef4444;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Selected State */
|
||||
.pdf-option-card.selected {
|
||||
/* Remove red outline for recommended card */
|
||||
.pdf-option-recommended:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Selected State - ONLY for non-recommended cards */
|
||||
.pdf-option-card.selected:not(.pdf-option-recommended) {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
|
||||
background: #fff5f5;
|
||||
@@ -505,11 +510,11 @@
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
height: 280px;
|
||||
padding: 12px;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -595,6 +600,22 @@
|
||||
.pdf-option-recommended {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
transform: scale(1.12);
|
||||
z-index: 1;
|
||||
border: 2px solid rgba(243, 156, 18, 0.15) !important;
|
||||
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.08);
|
||||
}
|
||||
|
||||
.pdf-option-recommended:hover {
|
||||
transform: scale(1.12) translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(243, 156, 18, 0.15);
|
||||
}
|
||||
|
||||
/* When recommended card is selected - full golden border, NO RED */
|
||||
.pdf-option-recommended.selected {
|
||||
border: 2px solid #f39c12 !important;
|
||||
box-shadow: 0 6px 16px rgba(243, 156, 18, 0.3) !important;
|
||||
background: #fffbf5 !important;
|
||||
}
|
||||
|
||||
/* PDF Option Info */
|
||||
@@ -727,7 +748,16 @@
|
||||
.pdf-options-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Remove scale transform in mobile */
|
||||
.pdf-option-recommended {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.pdf-option-recommended:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pdf-thumbnail {
|
||||
|
||||
@@ -105,10 +105,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Default CV Card (Recommended) -->
|
||||
<div class="pdf-option-card pdf-option-recommended"
|
||||
<div class="pdf-option-card pdf-option-recommended selected"
|
||||
data-cv-format="default"
|
||||
role="radio"
|
||||
aria-checked="false"
|
||||
aria-checked="true"
|
||||
aria-label="{{if eq .Lang "es"}}CV Por Defecto - 5 páginas con habilidades (Recomendado){{else}}Default CV - 5 pages with skills (Recommended){{end}}"
|
||||
tabindex="0"
|
||||
_="on click
|
||||
@@ -159,14 +159,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Page count badge with star -->
|
||||
<div class="thumbnail-badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-weight: 600;">
|
||||
<div class="thumbnail-badge" style="font-weight: 600;">
|
||||
⭐ {{if eq .Lang "es"}}5 Páginas{{else}}5 Pages{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pdf-option-info">
|
||||
<h3>
|
||||
{{if eq .Lang "es"}}CV Por Defecto{{else}}Default CV{{end}}
|
||||
{{if eq .Lang "es"}}CV Por Defecto (5 páginas){{else}}Default CV (5 pages){{end}}
|
||||
<span style="color: #667eea; font-size: 0.9em;">⭐</span>
|
||||
</h3>
|
||||
<p style="font-weight: 500;">{{if eq .Lang "es"}}Corto con habilidades - Recomendado{{else}}Short with skills - Recommended{{end}}</p>
|
||||
@@ -249,7 +249,6 @@
|
||||
<div class="pdf-modal-footer">
|
||||
<button class="pdf-download-btn"
|
||||
id="pdf-download-btn"
|
||||
disabled
|
||||
onclick="downloadPDF()">
|
||||
<iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}
|
||||
@@ -345,53 +344,18 @@
|
||||
: `Generating ${formatName}... This may take ~${estimatedTime} seconds`;
|
||||
estimateEl.textContent = estimateMsg;
|
||||
|
||||
// Track if modal is closed by user during download
|
||||
let modalClosedByUser = false;
|
||||
const onModalClose = () => {
|
||||
modalClosedByUser = true;
|
||||
|
||||
// Show toast when user closes modal
|
||||
if (window.showPDFToast) {
|
||||
window.showPDFToast({
|
||||
icon: '📥',
|
||||
title: isSpanish ? 'Preparando PDF...' : 'Preparing PDF...',
|
||||
message: isSpanish
|
||||
? `Generando ${formatName}... (~${estimatedTime}s)`
|
||||
: `Generating ${formatName}... (~${estimatedTime}s)`,
|
||||
duration: estimatedTime * 1000,
|
||||
autoHide: false // We'll manually update it
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for modal close
|
||||
modal.addEventListener('close', onModalClose, { once: true });
|
||||
|
||||
console.log('Navigating to:', url);
|
||||
|
||||
// Trigger download
|
||||
window.location.href = url;
|
||||
|
||||
// After estimated time: update toast to success or close modal
|
||||
// After estimated time: remove loading state and close modal
|
||||
setTimeout(() => {
|
||||
overlay.classList.remove('active');
|
||||
modalContent.classList.remove('loading-active');
|
||||
|
||||
if (modalClosedByUser && window.showPDFToast) {
|
||||
// Update toast to success
|
||||
window.showPDFToast({
|
||||
icon: '✅',
|
||||
title: isSpanish ? '¡PDF Listo!' : 'PDF Ready!',
|
||||
message: isSpanish
|
||||
? 'Revisa tu carpeta de descargas'
|
||||
: 'Check your downloads folder',
|
||||
duration: 3000,
|
||||
autoHide: true
|
||||
});
|
||||
} else {
|
||||
// Close modal if still open
|
||||
modal.close();
|
||||
}
|
||||
// Close modal if still open
|
||||
modal.close();
|
||||
}, estimatedTime * 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -242,15 +242,16 @@ async function testPDFToastNotifications() {
|
||||
await page.keyboard.press('Escape');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Toast SHOULD appear now
|
||||
const toastAppearsOnClose = await pdfToast.evaluate(el => el.classList.contains('show'));
|
||||
// Toast should NOT appear (behavior changed - modal only, no toast)
|
||||
const toastDoesNotAppear = !(await pdfToast.evaluate(el => el.classList.contains('show')));
|
||||
testResults.push({
|
||||
test: 'Toast appears when modal closed early',
|
||||
passed: toastAppearsOnClose
|
||||
test: 'Toast does not appear when modal closed early (new behavior)',
|
||||
passed: toastDoesNotAppear
|
||||
});
|
||||
console.log(toastAppearsOnClose ? '✅ Toast appeared after modal close' : '❌ Toast did not appear');
|
||||
console.log(toastDoesNotAppear ? '✅ Toast correctly hidden (no toast on modal close)' : '❌ Toast appeared (should not show)');
|
||||
|
||||
if (toastAppearsOnClose) {
|
||||
// Skip toast content validation since toast should not appear
|
||||
if (false) { // Previously: if (toastAppearsOnClose)
|
||||
// Check toast content
|
||||
const currentIcon = await toastIcon.textContent();
|
||||
const iconIsPreparing = currentIcon === '📥';
|
||||
|
||||
Reference in New Issue
Block a user