upskill-event-manager/assets/css/hvac-trainer-communication-templates.css
Ben a74c273b1d feat: complete master trainer area audit and implementation
Systematic audit and implementation of missing Master Trainer functionality
with comprehensive WordPress best practices and security implementation.

## Features Implemented
- Master Events Overview (/master-trainer/events/) - KPI dashboard with filtering
- Import/Export Data Management (/master-trainer/import-export/) - CSV operations
- Communication Templates (/trainer/communication-templates/) - Professional templates
- Enhanced Announcements (/master-trainer/announcements/) - Dynamic shortcode integration
- Pending Approvals System (/master-trainer/pending-approvals/) - Workflow management

## Navigation & UX Improvements
- Removed redundant Events link from top-level navigation menu
- Reorganized administrative functions under Tools dropdown
- Enhanced navigation clarity and professional appearance
- Full responsive design with accessibility compliance

## Architecture & Security
- 5 new singleton manager classes following WordPress patterns
- Comprehensive role-based access control (hvac_master_trainer)
- Complete security implementation (nonces, sanitization, escaping)
- Performance optimizations with transient caching and conditional loading
- Professional error handling and user feedback systems

## Files Added (16 new files)
- 4 manager classes: Import/Export, Events Overview, Pending Approvals, Communication Templates
- 4 CSS files with responsive design and accessibility features
- 4 JavaScript files with AJAX functionality and error handling
- 2 new templates: Import/Export, Pending Approvals
- 2 enhanced templates: Events Overview, Communication Templates

## Files Modified (14 files)
- Core system integration in Plugin, Page Manager, Scripts/Styles classes
- Navigation system cleanup in Master Menu System
- Enhanced access control and role management
- Template updates for dynamic content integration

## Testing & Deployment
- Comprehensive testing with Playwright automation
- Successful staging deployment and verification
- All 5 missing pages now fully functional
- Navigation improvements verified working

Resolves master trainer area audit requirements with production-ready implementation.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-23 09:56:42 -03:00

786 lines
No EOL
15 KiB
CSS

/**
* HVAC Trainer Communication Templates Styles
*
* Styles for the read-only communication templates interface
* Following existing HVAC plugin design patterns and WordPress conventions
*
* @package HVAC_Community_Events
* @since 2.0.0
*/
/* ===== PAGE WRAPPER ===== */
.hvac-trainer-communication-templates-page {
background: #f8f9fa;
min-height: 100vh;
}
.hvac-communication-templates-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* ===== HEADER SECTION ===== */
.hvac-templates-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #e9ecef;
}
.hvac-templates-header .entry-title {
color: #2c3e50;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
.hvac-templates-description {
color: #6c757d;
font-size: 1.1rem;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
/* ===== SEARCH AND FILTER CONTROLS ===== */
.hvac-templates-controls {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.hvac-search-wrapper {
display: flex;
align-items: center;
flex: 1;
max-width: 400px;
position: relative;
}
.hvac-search-input {
flex: 1;
padding: 12px 16px;
border: 2px solid #dee2e6;
border-radius: 25px;
font-size: 14px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.hvac-search-input:focus {
outline: none;
border-color: #0073aa;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.hvac-search-button {
position: absolute;
right: 8px;
background: #0073aa;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.hvac-search-button:hover {
background: #005a87;
}
.hvac-search-button .dashicons {
color: white;
font-size: 16px;
}
.hvac-filter-wrapper {
display: flex;
gap: 15px;
align-items: center;
}
.hvac-filter-select {
padding: 10px 16px;
border: 2px solid #dee2e6;
border-radius: 6px;
background: white;
font-size: 14px;
min-width: 150px;
transition: border-color 0.3s ease;
}
.hvac-filter-select:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
/* ===== TEMPLATES GRID ===== */
.hvac-templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.hvac-template-card {
background: white;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.hvac-template-card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
transform: translateY(-2px);
border-color: #0073aa;
}
/* ===== TEMPLATE HEADER ===== */
.hvac-template-header {
margin-bottom: 16px;
}
.hvac-template-title {
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.3;
}
.hvac-template-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.hvac-template-channel {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
.hvac-template-channel-email {
background: #e3f2fd;
color: #1565c0;
}
.hvac-template-channel-sms {
background: #f3e5f5;
color: #7b1fa2;
}
.hvac-template-category {
display: inline-block;
padding: 4px 10px;
background: #f8f9fa;
color: #6c757d;
border-radius: 15px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== TEMPLATE CONTENT ===== */
.hvac-template-excerpt {
margin-bottom: 16px;
}
.hvac-template-excerpt p {
color: #6c757d;
font-size: 14px;
line-height: 1.5;
margin: 0;
font-style: italic;
}
.hvac-template-content {
margin-bottom: 20px;
}
.hvac-template-preview,
.hvac-template-full-content {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 16px;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
color: #2c3e50;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
.hvac-template-full-content {
max-height: 400px;
overflow-y: auto;
}
/* ===== TEMPLATE ACTIONS ===== */
.hvac-template-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.hvac-template-actions .button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.hvac-template-actions .button-primary {
background: #0073aa;
color: white;
border-color: #0073aa;
}
.hvac-template-actions .button-primary:hover {
background: #005a87;
border-color: #005a87;
transform: translateY(-1px);
}
.hvac-template-actions .button-secondary {
background: #6c757d;
color: white;
border-color: #6c757d;
}
.hvac-template-actions .button-secondary:hover {
background: #5a6268;
border-color: #5a6268;
transform: translateY(-1px);
}
/* ===== TEMPLATE TOKENS ===== */
.hvac-template-tokens {
border-top: 1px solid #e9ecef;
padding-top: 16px;
}
.hvac-template-tokens h4 {
color: #495057;
font-size: 14px;
font-weight: 600;
margin: 0 0 10px 0;
}
.hvac-tokens-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hvac-token {
display: inline-block;
padding: 4px 8px;
background: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
border-radius: 4px;
font-size: 11px;
font-family: 'Courier New', monospace;
cursor: pointer;
transition: all 0.3s ease;
}
.hvac-token:hover {
background: #ffeaa7;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ===== LOADING AND EMPTY STATES ===== */
.hvac-templates-loading,
.hvac-templates-empty,
.hvac-templates-empty-initial {
text-align: center;
padding: 60px 20px;
color: #6c757d;
}
.hvac-spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #0073aa;
border-radius: 50%;
width: 30px;
height: 30px;
animation: hvac-spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes hvac-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hvac-empty-icon .dashicons {
font-size: 64px;
color: #dee2e6;
margin-bottom: 20px;
}
.hvac-templates-empty h3,
.hvac-templates-empty-initial h3 {
color: #495057;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 10px;
}
/* ===== PAGINATION ===== */
.hvac-templates-pagination {
text-align: center;
margin-top: 40px;
}
.hvac-load-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #0073aa;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.hvac-load-more:hover {
background: #005a87;
transform: translateY(-2px);
}
/* ===== TEMPLATE STATS ===== */
.hvac-templates-stats {
display: flex;
justify-content: center;
gap: 40px;
margin: 40px 0;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.hvac-stat {
text-align: center;
}
.hvac-stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #0073aa;
line-height: 1;
}
.hvac-stat-label {
display: block;
font-size: 14px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 5px;
}
/* ===== HELP SECTION ===== */
.hvac-templates-help {
background: white;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 30px;
margin-top: 40px;
}
.hvac-templates-help h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.hvac-templates-help h3::before {
content: "\f223"; /* dashicons-info */
font-family: dashicons;
color: #0073aa;
}
.hvac-help-list {
color: #495057;
line-height: 1.8;
margin-bottom: 25px;
}
.hvac-help-list li {
margin-bottom: 8px;
padding-left: 10px;
}
.hvac-help-tip {
background: #e3f2fd;
border: 1px solid #90caf9;
border-radius: 6px;
padding: 16px;
color: #1565c0;
display: flex;
align-items: flex-start;
gap: 10px;
}
.hvac-help-tip .dashicons {
color: #1976d2;
margin-top: 2px;
}
/* ===== MODAL STYLES ===== */
.hvac-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.hvac-modal-overlay {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hvac-modal-container {
background: white;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 800px;
max-height: 90vh;
width: 100%;
overflow: hidden;
animation: hvac-modal-appear 0.3s ease-out;
}
@keyframes hvac-modal-appear {
from {
opacity: 0;
transform: scale(0.9) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.hvac-modal-header {
padding: 24px 30px;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.hvac-modal-header h2 {
margin: 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}
.hvac-modal-close {
background: none;
border: none;
font-size: 20px;
color: #6c757d;
cursor: pointer;
padding: 5px;
border-radius: 4px;
transition: all 0.3s ease;
}
.hvac-modal-close:hover {
color: #495057;
background: #f8f9fa;
}
.hvac-modal-body {
padding: 30px;
overflow-y: auto;
max-height: calc(90vh - 140px);
}
.hvac-template-preview-content h3 {
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 15px;
}
.hvac-template-content-preview {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 20px;
margin: 20px 0;
}
.hvac-template-content-preview pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
color: #2c3e50;
}
.hvac-template-tokens-preview {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.hvac-template-tokens-preview h4 {
color: #495057;
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.hvac-modal-actions {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* ===== NOTIFICATIONS ===== */
.hvac-notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 999999;
font-weight: 500;
display: none;
}
.hvac-notification-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.hvac-notification-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
.hvac-templates-controls {
flex-direction: column;
align-items: stretch;
}
.hvac-search-wrapper {
max-width: none;
width: 100%;
}
.hvac-filter-wrapper {
justify-content: center;
}
.hvac-filter-select {
min-width: 120px;
}
.hvac-templates-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.hvac-template-actions {
flex-direction: column;
}
.hvac-template-actions .button {
justify-content: center;
text-align: center;
}
.hvac-templates-stats {
flex-direction: column;
gap: 20px;
}
.hvac-modal-container {
margin: 10px;
max-height: calc(100vh - 20px);
}
.hvac-modal-body {
padding: 20px;
max-height: calc(100vh - 120px);
}
.hvac-templates-header .entry-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.hvac-communication-templates-wrapper {
padding: 15px;
}
.hvac-template-card {
padding: 20px;
}
.hvac-templates-header .entry-title {
font-size: 1.75rem;
}
.hvac-templates-description {
font-size: 1rem;
}
}
/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
.hvac-template-expand[aria-expanded="true"] .hvac-expand-text {
display: none;
}
.hvac-template-expand[aria-expanded="true"] .hvac-collapse-text {
display: inline;
}
/* Focus styles */
.hvac-template-card:focus-within {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
.hvac-token:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.hvac-template-card {
border-width: 2px;
}
.hvac-template-channel,
.hvac-template-category {
border: 1px solid currentColor;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.hvac-template-card,
.hvac-template-actions .button,
.hvac-token,
.hvac-modal-container {
transition: none;
}
.hvac-spinner {
animation: none;
}
@keyframes hvac-spin {
0%, 100% { transform: rotate(0deg); }
}
@keyframes hvac-modal-appear {
from, to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
}
/* Print styles */
@media print {
.hvac-templates-controls,
.hvac-template-actions,
.hvac-templates-pagination,
.hvac-modal {
display: none !important;
}
.hvac-template-card {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #000;
}
.hvac-template-full-content {
display: block !important;
max-height: none;
}
.hvac-template-preview {
display: none !important;
}
}