a74c273b1d
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>
562 lines
No EOL
12 KiB
CSS
562 lines
No EOL
12 KiB
CSS
/**
|
|
* HVAC Import/Export Page Styles
|
|
*
|
|
* @package HVAC_Community_Events
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* Import/Export Page Wrapper */
|
|
.hvac-import-export-wrapper {
|
|
min-height: 100vh;
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
}
|
|
|
|
.hvac-import-export-wrapper .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
}
|
|
|
|
/* Page Header */
|
|
.hvac-page-header {
|
|
text-align: center;
|
|
margin-bottom: var(--hvac-spacing-xl, 3rem);
|
|
}
|
|
|
|
.hvac-page-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: var(--hvac-color-primary, #2c3e50);
|
|
margin-bottom: var(--hvac-spacing-medium, 1rem);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hvac-page-description {
|
|
font-size: 1.125rem;
|
|
color: var(--hvac-color-text-light, #6c757d);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Section Styling */
|
|
.hvac-export-section,
|
|
.hvac-import-section {
|
|
margin-bottom: var(--hvac-spacing-xl, 3rem);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: var(--hvac-color-primary, #2c3e50);
|
|
margin-bottom: var(--hvac-spacing-large, 2rem);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--hvac-spacing-small, 0.5rem);
|
|
}
|
|
|
|
.section-title .dashicons {
|
|
font-size: 1.5rem;
|
|
color: var(--hvac-color-accent, #3498db);
|
|
}
|
|
|
|
/* Card Grid Layout */
|
|
.export-options,
|
|
.import-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: var(--hvac-spacing-large, 2rem);
|
|
margin-bottom: var(--hvac-spacing-xl, 3rem);
|
|
}
|
|
|
|
/* Card Styling */
|
|
.export-card,
|
|
.import-card {
|
|
background: white;
|
|
border-radius: var(--hvac-border-radius, 12px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.export-card:hover,
|
|
.import-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card-header {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
border-bottom: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
}
|
|
|
|
.card-header h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--hvac-color-primary, #2c3e50);
|
|
margin: 0 0 var(--hvac-spacing-small, 0.5rem) 0;
|
|
}
|
|
|
|
.card-header p {
|
|
color: var(--hvac-color-text-light, #6c757d);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.card-content {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
}
|
|
|
|
.card-actions {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
border-top: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
}
|
|
|
|
.import-card .card-actions {
|
|
background-color: white;
|
|
border-top: none;
|
|
padding-top: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
/* File Input Styling */
|
|
.file-input-wrapper {
|
|
margin-bottom: var(--hvac-spacing-large, 2rem);
|
|
position: relative;
|
|
}
|
|
|
|
.file-input-wrapper input[type="file"] {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.file-input-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--hvac-spacing-small, 0.5rem);
|
|
padding: var(--hvac-spacing-medium, 1rem) var(--hvac-spacing-large, 2rem);
|
|
background-color: var(--hvac-color-background, #fff);
|
|
border: 2px dashed var(--hvac-color-border, #e5e7eb);
|
|
border-radius: var(--hvac-border-radius, 12px);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
color: var(--hvac-color-text, #374151);
|
|
min-height: 60px;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.file-input-label:hover {
|
|
border-color: var(--hvac-color-accent, #3498db);
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
}
|
|
|
|
.file-input-label .dashicons {
|
|
font-size: 1.2rem;
|
|
color: var(--hvac-color-accent, #3498db);
|
|
}
|
|
|
|
.file-name {
|
|
display: block;
|
|
margin-top: var(--hvac-spacing-small, 0.5rem);
|
|
font-size: 0.875rem;
|
|
color: var(--hvac-color-text-light, #6c757d);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Button Styling */
|
|
.hvac-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--hvac-spacing-small, 0.5rem);
|
|
padding: var(--hvac-spacing-medium, 1rem) var(--hvac-spacing-large, 2rem);
|
|
border: none;
|
|
border-radius: var(--hvac-border-radius, 12px);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
min-height: 48px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hvac-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.hvac-btn-primary {
|
|
background-color: var(--hvac-color-accent, #3498db);
|
|
color: white;
|
|
}
|
|
|
|
.hvac-btn-primary:hover:not(:disabled) {
|
|
background-color: var(--hvac-color-accent-dark, #2980b9);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
|
|
}
|
|
|
|
.hvac-btn-secondary {
|
|
background-color: var(--hvac-color-primary, #2c3e50);
|
|
color: white;
|
|
}
|
|
|
|
.hvac-btn-secondary:hover:not(:disabled) {
|
|
background-color: var(--hvac-color-primary-dark, #1a252f);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(44, 62, 80, 0.3);
|
|
}
|
|
|
|
.hvac-btn .dashicons {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Security Notice */
|
|
.hvac-security-notice {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
border-radius: var(--hvac-border-radius, 12px);
|
|
padding: var(--hvac-spacing-xl, 3rem);
|
|
margin-top: var(--hvac-spacing-xl, 3rem);
|
|
}
|
|
|
|
.notice-content h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--hvac-color-primary, #2c3e50);
|
|
margin: 0 0 var(--hvac-spacing-large, 2rem) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--hvac-spacing-small, 0.5rem);
|
|
}
|
|
|
|
.notice-content h3 .dashicons {
|
|
color: var(--hvac-color-warning, #f39c12);
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.notice-content ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.notice-content li {
|
|
position: relative;
|
|
padding-left: var(--hvac-spacing-large, 2rem);
|
|
margin-bottom: var(--hvac-spacing-medium, 1rem);
|
|
color: var(--hvac-color-text, #374151);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.notice-content li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--hvac-color-accent, #3498db);
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Modal Styling */
|
|
.hvac-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hvac-modal-content {
|
|
background: white;
|
|
border-radius: var(--hvac-border-radius, 12px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
max-width: 500px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.hvac-modal-header {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
border-bottom: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.hvac-modal-header h3 {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--hvac-color-primary, #2c3e50);
|
|
}
|
|
|
|
.hvac-modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: var(--hvac-color-text-light, #6c757d);
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hvac-modal-close:hover {
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
color: var(--hvac-color-text, #374151);
|
|
}
|
|
|
|
.hvac-modal-body {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
}
|
|
|
|
.hvac-modal-footer {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
border-top: 1px solid var(--hvac-color-border, #e5e7eb);
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
text-align: right;
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress-bar-container {
|
|
margin: var(--hvac-spacing-large, 2rem) 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--hvac-color-accent, #3498db), var(--hvac-color-success, #27ae60));
|
|
border-radius: 4px;
|
|
width: 0%;
|
|
animation: progress-indeterminate 2s infinite;
|
|
}
|
|
|
|
@keyframes progress-indeterminate {
|
|
0% { width: 0%; margin-left: 0%; }
|
|
50% { width: 75%; margin-left: 25%; }
|
|
100% { width: 0%; margin-left: 100%; }
|
|
}
|
|
|
|
/* Results Content */
|
|
#results-content {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#results-content .success {
|
|
color: var(--hvac-color-success, #27ae60);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#results-content .error {
|
|
color: var(--hvac-color-error, #e74c3c);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#results-content .details {
|
|
margin-top: var(--hvac-spacing-medium, 1rem);
|
|
padding: var(--hvac-spacing-medium, 1rem);
|
|
background-color: var(--hvac-color-background-light, #f8f9fa);
|
|
border-radius: var(--hvac-border-radius-small, 6px);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Loading States */
|
|
.loading {
|
|
position: relative;
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: -10px 0 0 -10px;
|
|
border: 2px solid var(--hvac-color-border, #e5e7eb);
|
|
border-top: 2px solid var(--hvac-color-accent, #3498db);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.hvac-import-export-wrapper .container {
|
|
padding: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
.hvac-page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.export-options,
|
|
.import-options {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
.card-header,
|
|
.card-content,
|
|
.card-actions {
|
|
padding: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
.hvac-modal {
|
|
padding: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
.hvac-modal-header,
|
|
.hvac-modal-body,
|
|
.hvac-modal-footer {
|
|
padding: var(--hvac-spacing-medium, 1rem);
|
|
}
|
|
|
|
.notice-content {
|
|
padding: var(--hvac-spacing-large, 2rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hvac-page-title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--hvac-spacing-xs, 0.25rem);
|
|
}
|
|
|
|
.hvac-btn {
|
|
padding: var(--hvac-spacing-small, 0.75rem) var(--hvac-spacing-medium, 1rem);
|
|
font-size: 0.875rem;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.file-input-label {
|
|
padding: var(--hvac-spacing-small, 0.75rem) var(--hvac-spacing-medium, 1rem);
|
|
min-height: 50px;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.export-card,
|
|
.import-card {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.hvac-btn {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.hvac-btn-primary {
|
|
border-color: var(--hvac-color-accent, #3498db);
|
|
}
|
|
|
|
.hvac-btn-secondary {
|
|
border-color: var(--hvac-color-primary, #2c3e50);
|
|
}
|
|
|
|
.file-input-label {
|
|
border-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.export-card,
|
|
.import-card,
|
|
.hvac-btn,
|
|
.file-input-label,
|
|
.hvac-modal-close {
|
|
transition: none;
|
|
}
|
|
|
|
.export-card:hover,
|
|
.import-card:hover,
|
|
.hvac-btn:hover:not(:disabled) {
|
|
transform: none;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
animation: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.loading::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Focus management for accessibility */
|
|
.hvac-btn:focus,
|
|
.file-input-label:focus,
|
|
.hvac-modal-close:focus {
|
|
outline: 2px solid var(--hvac-color-accent, #3498db);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.hvac-modal,
|
|
.hvac-btn,
|
|
.card-actions {
|
|
display: none !important;
|
|
}
|
|
|
|
.hvac-import-export-wrapper {
|
|
background: white;
|
|
}
|
|
|
|
.export-card,
|
|
.import-card {
|
|
box-shadow: none;
|
|
border: 1px solid #000;
|
|
break-inside: avoid;
|
|
}
|
|
} |