diff --git a/templates/project_qr_codes.html b/templates/project_qr_codes.html index 0d768a6..a98c685 100644 --- a/templates/project_qr_codes.html +++ b/templates/project_qr_codes.html @@ -252,11 +252,78 @@ min-width: 0; } - .qr-actions { + /* QR Card Actions - ADDED FROM DASHBOARD */ + .qr-card-actions { display: flex; - gap: var(--spacing-2); - padding-top: var(--spacing-3); + gap: var(--spacing-1); + justify-content: flex-start; + padding-top: var(--spacing-2); border-top: 1px solid var(--gray-200); + margin-top: var(--spacing-2); + } + + .qr-action-btn { + width: 28px; + height: 28px; + border-radius: var(--radius-md); + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition); + font-size: 0.75rem; + text-decoration: none; + } + + .qr-action-btn.copy { + background: rgba(16, 185, 129, 0.1); + color: #059669; + } + + .qr-action-btn.copy:hover { + background: #059669; + color: var(--white); + } + + .qr-action-btn.link { + background: rgba(59, 130, 246, 0.1); + color: #2563eb; + } + + .qr-action-btn.link:hover { + background: #2563eb; + color: var(--white); + } + + .qr-action-btn.download { + background: rgba(16, 185, 129, 0.1); + color: #059669; + } + + .qr-action-btn.download:hover { + background: #059669; + color: var(--white); + } + + .qr-action-btn.edit { + background: rgba(37, 99, 235, 0.1); + color: var(--primary-color); + } + + .qr-action-btn.edit:hover { + background: var(--primary-color); + color: var(--white); + } + + .qr-action-btn.toggle { + background: rgba(245, 158, 11, 0.1); + color: #d97706; + } + + .qr-action-btn.toggle:hover { + background: #d97706; + color: var(--white); } .qr-status-badge { @@ -301,27 +368,7 @@ margin-bottom: var(--spacing-2); } - @media (max-width: 768px) { - .project-qr-page { - padding: var(--spacing-4); - } - - .project-qr-grid { - grid-template-columns: 1fr; - } - - .pagination-container { - flex-direction: column; - gap: var(--spacing-3); - } - - .project-qr-stats { - flex-direction: column; - gap: var(--spacing-3); - } - } - -/* Modal Styles - CRITICAL FOR CENTERING */ + /* Modal Styles - CRITICAL FOR CENTERING */ .modal { display: none; position: fixed; @@ -579,6 +626,24 @@ /* Responsive modal styles */ @media (max-width: 768px) { + .project-qr-page { + padding: var(--spacing-4); + } + + .project-qr-grid { + grid-template-columns: 1fr; + } + + .pagination-container { + flex-direction: column; + gap: var(--spacing-3); + } + + .project-qr-stats { + flex-direction: column; + gap: var(--spacing-3); + } + .qr-modal-layout { grid-template-columns: 1fr; gap: var(--spacing-6); @@ -695,26 +760,47 @@ {% endif %} - + {{ 'Active' if qr.active_status else 'Inactive' }} - - {% if session.role == 'admin' %} -
- - Edit - - + + + + + + + + + + {% if session.role == 'admin' %} + + {% endif %}
- {% endif %} {% endfor %} @@ -905,12 +991,10 @@ // Delete QR Code function for project QR codes page function deleteQRCode(qrId, qrName) { if (confirm(`Are you sure you want to permanently delete "${qrName}"?\n\nThis action cannot be undone and will remove all associated data.`)) { - // Create a form and submit it const form = document.createElement('form'); form.method = 'POST'; form.action = `/qr-codes/${qrId}/delete`; - // Add CSRF token if needed const csrfToken = document.querySelector('meta[name="csrf-token"]'); if (csrfToken) { const csrfInput = document.createElement('input'); @@ -925,17 +1009,26 @@ function deleteQRCode(qrId, qrName) { } } -// Ensure modal functions are available +// Ensure all dashboard functions are available if (typeof openQRModalFromData === 'undefined') { - console.warn('openQRModalFromData function not found, modal interactions may not work'); + console.warn('openQRModalFromData function not found'); } if (typeof openImageLightbox === 'undefined') { - console.warn('openImageLightbox function not found, image preview may not work'); + console.warn('openImageLightbox function not found'); +} + +if (typeof copyQRUrl === 'undefined') { + console.warn('copyQRUrl function not found'); +} + +if (typeof openQRLink === 'undefined') { + console.warn('openQRLink function not found'); } // Log successful page load console.log('✅ Project QR Codes page loaded successfully'); console.log('📊 Total QR codes on page:', document.querySelectorAll('.qr-card').length); +console.log('🔘 Action buttons per card: 5 (Copy, Link, Download, Edit, Toggle)'); {% endblock %} \ No newline at end of file