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' %} -