From 9a930ea1fc5f56e83b5ed238c79308c27b77f7d2 Mon Sep 17 00:00:00 2001 From: bengizmo Date: Tue, 20 May 2025 12:37:32 -0300 Subject: [PATCH] feat: Enhance plugin UI with improved styling and accessibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add responsive button styles with mobile optimization - Implement accessibility focus styles and keyboard navigation support - Create animation system for smoother interactive elements - Add mobile navigation menu for dashboard and main pages - Include print stylesheet for better printable event summaries - Optimize all UI components for better usability and consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../assets/css/community-login.css | 197 +++++-- .../assets/css/hvac-animations.css | 250 +++++++++ .../assets/css/hvac-common.css | 479 ++++++++++++++++++ .../assets/css/hvac-dashboard.css | 270 ++++++++-- .../assets/css/hvac-email-attendees.css | 335 ++++++++++-- .../assets/css/hvac-event-summary.css | 353 +++++++++++-- .../assets/css/hvac-mobile-nav.css | 162 ++++++ .../assets/css/hvac-print.css | 271 ++++++++++ .../assets/css/hvac-registration.css | 310 ++++++++++-- .../assets/js/hvac-accessibility.js | 54 ++ .../assets/js/hvac-animations.js | 128 +++++ .../assets/js/hvac-mobile-nav.js | 139 +++++ .../hvac-community-events.php | 143 ++++-- 13 files changed, 2821 insertions(+), 270 deletions(-) create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-animations.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-common.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-mobile-nav.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-print.css create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-accessibility.js create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-animations.js create mode 100644 wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-mobile-nav.js diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login.css index 391c8bc5..d6d4cfda 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login.css @@ -1,96 +1,211 @@ /** - * HVAC Community Events: Community Login Styles + * HVAC Community Events: Enhanced Community Login Styles * * Styles for the custom login form page. * - * @version 1.0.0 + * @version 2.0.0 */ +/* Login Page Container */ .hvac-community-login-wrapper { - /* Add styles to center the card vertically/horizontally if needed */ - padding: 40px 0; /* Example padding */ + padding: var(--hvac-spacing-xl) 0; + min-height: 60vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #f9fafb; } +/* Login Card */ .hvac-login-form-card { - max-width: 400px; /* Adjust as needed based on design */ + max-width: 450px; + width: 100%; margin: 0 auto; - padding: 30px; - background-color: #ffffff; /* White card background */ - border: 1px solid #e0e0e0; /* Light border */ - box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */ - border-radius: 4px; /* Rounded corners */ + padding: var(--hvac-spacing-xl); + background-color: white; + border: 1px solid var(--hvac-border); + box-shadow: var(--hvac-shadow-lg); + border-radius: var(--hvac-border-radius-lg); + transition: transform 0.3s, box-shadow 0.3s; +} + +.hvac-login-form-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +/* Login Card Header */ +.hvac-login-form-header { + text-align: center; + margin-bottom: var(--hvac-spacing-lg); +} + +.hvac-login-form-header h2 { + color: var(--hvac-primary); + font-size: 1.8rem; + margin-bottom: var(--hvac-spacing-sm); + font-weight: 700; +} + +.hvac-login-form-header p { + color: var(--hvac-text-light); + font-size: 1rem; +} + +/* Login Form Elements */ +#hvac_community_loginform { + margin-bottom: var(--hvac-spacing-lg); } -/* Style the form generated by wp_login_form */ #hvac_community_loginform p { - margin-bottom: 15px; + margin-bottom: var(--hvac-spacing-md); } #hvac_community_loginform label { display: block; - margin-bottom: 5px; - font-weight: bold; + margin-bottom: var(--hvac-spacing-sm); + font-weight: 600; + color: var(--hvac-text); + font-size: 0.95rem; } #hvac_community_loginform input[type="text"], #hvac_community_loginform input[type="password"] { width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 3px; - box-sizing: border-box; /* Include padding and border in the element's total width and height */ + padding: 0.85rem; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + font-size: 1rem; + transition: border-color 0.2s, box-shadow 0.2s; + background-color: #f9fafb; +} + +#hvac_community_loginform input[type="text"]:focus, +#hvac_community_loginform input[type="password"]:focus { + border-color: var(--hvac-primary); + outline: none; + box-shadow: 0 0 0 3px var(--hvac-primary-light); + background-color: white; +} + +/* Remember Me Checkbox */ +.login-remember { + margin-bottom: var(--hvac-spacing-md) !important; } #hvac_community_loginform .login-remember label { font-weight: normal; - display: inline-block; /* Align checkbox and label */ -} -#hvac_community_loginform .login-remember input[type="checkbox"] { - margin-right: 5px; - vertical-align: middle; + display: flex; + align-items: center; + cursor: pointer; + color: var(--hvac-text-light); + font-size: 0.9rem; } +#hvac_community_loginform .login-remember input[type="checkbox"] { + margin-right: var(--hvac-spacing-sm); + cursor: pointer; + width: 18px; + height: 18px; +} + +/* Login Button */ +.login-submit { + margin-bottom: var(--hvac-spacing-md) !important; +} #hvac_community_loginform .login-submit #wp-submit { - /* Use Astra button styles if possible, or define custom */ - /* Example using Astra's class structure (might need adjustment) */ - /* @extend .ast-button; */ - display: inline-block; - padding: 10px 20px; - background-color: #0073aa; /* Example blue */ - color: #ffffff; + display: block; + width: 100%; + padding: 0.85rem; + background-color: var(--hvac-primary); + color: white; border: none; - border-radius: 3px; + border-radius: var(--hvac-border-radius); + font-size: 1rem; + font-weight: 600; cursor: pointer; - text-decoration: none; - font-size: 1em; - width: 100%; /* Make button full width */ text-align: center; + transition: background-color 0.2s, transform 0.1s; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: var(--hvac-shadow); } #hvac_community_loginform .login-submit #wp-submit:hover { - background-color: #005a87; /* Darker blue on hover */ + background-color: var(--hvac-primary-dark); + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-lg); } +#hvac_community_loginform .login-submit #wp-submit:active { + transform: translateY(0); +} + +/* Additional Links */ .hvac-login-links { - margin-top: 20px; + margin-top: var(--hvac-spacing-lg); text-align: center; - font-size: 0.9em; + display: flex; + justify-content: space-between; + padding-top: var(--hvac-spacing-md); + border-top: 1px solid var(--hvac-border-light); } .hvac-login-links a { - color: #0073aa; /* Link color */ + color: var(--hvac-primary); text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + transition: color 0.2s; } .hvac-login-links a:hover { + color: var(--hvac-primary-dark); text-decoration: underline; } -/* Add responsive adjustments if needed */ -@media (max-width: 544px) { /* Example using Astra mobile breakpoint */ +/* Login Error Message */ +.login-error { + background-color: var(--hvac-error-light); + color: var(--hvac-error); + padding: var(--hvac-spacing-md); + border-radius: var(--hvac-border-radius); + margin-bottom: var(--hvac-spacing-lg); + border-left: 4px solid var(--hvac-error); + font-size: 0.95rem; +} + +/* Image/Logo Placeholder if needed */ +.hvac-login-logo { + text-align: center; + margin-bottom: var(--hvac-spacing-lg); +} + +.hvac-login-logo img { + max-width: 180px; + height: auto; +} + +/* Responsive Adjustments */ +@media (max-width: 767px) { .hvac-login-form-card { max-width: 90%; - padding: 20px; + padding: var(--hvac-spacing-lg); + } + + .hvac-login-links { + flex-direction: column; + gap: var(--hvac-spacing-md); + } + + .hvac-login-form-header h2 { + font-size: 1.5rem; + } +} + +@media (max-width: 480px) { + .hvac-login-form-card { + padding: var(--hvac-spacing-md); } } \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-animations.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-animations.css new file mode 100644 index 00000000..f80ccbd5 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-animations.css @@ -0,0 +1,250 @@ +/** + * HVAC Community Events Animation Effects + * + * This stylesheet contains animations and transitions for UI elements + * to create a more polished, responsive feel to the interface. + */ + +/* Base transition properties */ +:root { + --hvac-transition-speed: 0.2s; + --hvac-transition-timing: ease-out; +} + +/* Scale-up animation for cards and important elements */ +@keyframes scale-up { + 0% { + transform: scale(1); + opacity: 0.95; + } + 100% { + transform: scale(1.02); + opacity: 1; + } +} + +/* Fade-in animation */ +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* Pulse animation for notices and alerts */ +@keyframes pulse { + 0% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); + } + 70% { + transform: scale(1.01); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +} + +/* Slide-in animation */ +@keyframes slide-in-right { + 0% { + transform: translateX(20px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-left { + 0% { + transform: translateX(-20px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-bottom { + 0% { + transform: translateY(20px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +/* Common element transitions */ + +/* Card hover animation */ +.hvac-card { + transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing), + box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing), + border-color var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +.hvac-card:hover { + transform: translateY(-3px); + box-shadow: var(--hvac-shadow-lg); + border-color: var(--hvac-primary-light); +} + +/* Stat cards animation */ +.hvac-event-stat-card, +.hvac-stat-card { + transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing), + box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +.hvac-event-stat-card:hover, +.hvac-stat-card:hover { + transform: translateY(-3px); + box-shadow: var(--hvac-shadow-lg); +} + +/* Button hover animations */ +.hvac-button, +.hvac-content .button, +.hvac-content button[type="submit"], +.hvac-content input[type="submit"] { + transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing), + color var(--hvac-transition-speed) var(--hvac-transition-timing), + transform var(--hvac-transition-speed) var(--hvac-transition-timing), + box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +/* Form field transitions */ +.hvac-form-input, +.hvac-content input[type="text"], +.hvac-content input[type="email"], +.hvac-content input[type="password"], +.hvac-content input[type="url"], +.hvac-content textarea, +.hvac-content select { + transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing), + box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing), + background-color var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +/* Table row hover transition */ +.hvac-table tbody tr, +.events-table tbody tr, +.hvac-transactions-table tbody tr { + transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +/* Link hover transition */ +.hvac-content a { + transition: color var(--hvac-transition-speed) var(--hvac-transition-timing), + text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +/* Alert/message transitions */ +.hvac-alert, +.hvac-email-sent, +.hvac-email-error, +.login-error, +.hvac-errors, +.hvac-success { + transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing), + transform var(--hvac-transition-speed) var(--hvac-transition-timing); +} + +/* Animation classes that can be applied to elements */ + +/* Apply fade-in animation */ +.hvac-animate-fade-in { + animation: fade-in 0.5s ease-out forwards; +} + +/* Apply scale-up animation */ +.hvac-animate-scale-up { + animation: scale-up 0.3s ease-out forwards; +} + +/* Apply pulse animation */ +.hvac-animate-pulse { + animation: pulse 2s infinite; +} + +/* Apply slide-in animations */ +.hvac-animate-slide-in-right { + animation: slide-in-right 0.3s ease-out forwards; +} + +.hvac-animate-slide-in-left { + animation: slide-in-left 0.3s ease-out forwards; +} + +.hvac-animate-slide-in-bottom { + animation: slide-in-bottom 0.3s ease-out forwards; +} + +/* Apply animations to specific elements */ +.hvac-dashboard-stats .hvac-stat-card:nth-child(1) { + animation: slide-in-bottom 0.3s ease-out 0.1s both; +} + +.hvac-dashboard-stats .hvac-stat-card:nth-child(2) { + animation: slide-in-bottom 0.3s ease-out 0.2s both; +} + +.hvac-dashboard-stats .hvac-stat-card:nth-child(3) { + animation: slide-in-bottom 0.3s ease-out 0.3s both; +} + +.hvac-dashboard-stats .hvac-stat-card:nth-child(4) { + animation: slide-in-bottom 0.3s ease-out 0.4s both; +} + +/* Event summary stats sequence */ +.hvac-event-summary-stats .hvac-event-stat-card:nth-child(1) { + animation: slide-in-bottom 0.3s ease-out 0.1s both; +} + +.hvac-event-summary-stats .hvac-event-stat-card:nth-child(2) { + animation: slide-in-bottom 0.3s ease-out 0.2s both; +} + +.hvac-event-summary-stats .hvac-event-stat-card:nth-child(3) { + animation: slide-in-bottom 0.3s ease-out 0.3s both; +} + +/* Initial loading state for animated elements */ +.hvac-animate-fade-in, +.hvac-animate-scale-up, +.hvac-animate-slide-in-right, +.hvac-animate-slide-in-left, +.hvac-animate-slide-in-bottom, +.hvac-dashboard-stats .hvac-stat-card, +.hvac-event-summary-stats .hvac-event-stat-card { + opacity: 0; +} + +/* Disable animations for users who prefer reduced motion */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.001s !important; + animation-delay: 0s !important; + transition-duration: 0.001s !important; + } + + .hvac-animate-fade-in, + .hvac-animate-scale-up, + .hvac-animate-slide-in-right, + .hvac-animate-slide-in-left, + .hvac-animate-slide-in-bottom, + .hvac-dashboard-stats .hvac-stat-card, + .hvac-event-summary-stats .hvac-event-stat-card { + opacity: 1; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-common.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-common.css new file mode 100644 index 00000000..f8fb81c7 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-common.css @@ -0,0 +1,479 @@ +/** + * HVAC Community Events Common Styles + * + * These styles apply to all pages in the HVAC Community Events plugin. + * They enhance buttons, links, typography, and spacing for a consistent look. + */ + +:root { + /* Primary colors */ + --hvac-primary: #0274be; + --hvac-primary-dark: #005fa3; + --hvac-primary-light: #e6f3fb; + + /* Secondary colors */ + --hvac-secondary: #54595f; + --hvac-secondary-dark: #3a3f44; + --hvac-secondary-light: #f0f0f1; + + /* Success/Error colors */ + --hvac-success: #4caf50; + --hvac-success-light: #e8f5e9; + --hvac-error: #d63638; + --hvac-error-light: #ffebe9; + + /* Neutral colors */ + --hvac-border: #e0e0e0; + --hvac-border-light: #f0f0f0; + --hvac-text: #333333; + --hvac-text-light: #757575; + + /* Spacing */ + --hvac-spacing-xs: 0.25rem; /* 4px */ + --hvac-spacing-sm: 0.5rem; /* 8px */ + --hvac-spacing-md: 1rem; /* 16px */ + --hvac-spacing-lg: 1.5rem; /* 24px */ + --hvac-spacing-xl: 2rem; /* 32px */ + + /* Border radius */ + --hvac-border-radius: 4px; + --hvac-border-radius-lg: 8px; + + /* Box shadow */ + --hvac-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + --hvac-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1); + + /* Focus styles */ + --hvac-focus-color: #2271b1; + --hvac-focus-width: 2px; + --hvac-focus-offset: 2px; +} + +/* Typography Enhancements */ +.hvac-content h1, +.hvac-content h2, +.hvac-content h3, +.hvac-content h4 { + color: var(--hvac-text); + font-weight: 600; + margin-bottom: var(--hvac-spacing-md); + line-height: 1.3; +} + +.hvac-content h1 { + font-size: 1.75rem; + margin-bottom: var(--hvac-spacing-lg); +} + +.hvac-content h2 { + font-size: 1.5rem; + margin-top: var(--hvac-spacing-xl); +} + +.hvac-content h3 { + font-size: 1.25rem; + margin-top: var(--hvac-spacing-lg); +} + +.hvac-content p { + margin-bottom: var(--hvac-spacing-md); + line-height: 1.6; + color: var(--hvac-text); +} + +/* Enhanced Button Styles */ +.hvac-button, +.hvac-content .button, +.hvac-content button[type="submit"], +.hvac-content input[type="submit"], +.hvac-content .ast-button { + display: inline-block; + background-color: var(--hvac-primary); + color: white !important; + padding: 0.75rem 1.25rem; + border: none; + border-radius: var(--hvac-border-radius); + font-size: 1rem; + font-weight: 600; + text-decoration: none; + text-align: center; + cursor: pointer; + transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s; + box-shadow: var(--hvac-shadow); + line-height: 1.4; + min-height: 44px; /* Minimum touch target size */ + position: relative; + overflow: hidden; +} + +.hvac-button:hover, +.hvac-content .button:hover, +.hvac-content button[type="submit"]:hover, +.hvac-content input[type="submit"]:hover, +.hvac-content .ast-button:hover { + background-color: var(--hvac-primary-dark); + text-decoration: none; + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-lg); +} + +.hvac-button:active, +.hvac-content .button:active, +.hvac-content button[type="submit"]:active, +.hvac-content input[type="submit"]:active, +.hvac-content .ast-button:active { + transform: translateY(0); + box-shadow: var(--hvac-shadow); +} + +/* Button ripple effect */ +.hvac-button::after, +.hvac-content .button::after, +.hvac-content button[type="submit"]::after, +.hvac-content input[type="submit"]::after, +.hvac-content .ast-button::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%, -50%); + transform-origin: 50% 50%; +} + +.hvac-button:active::after, +.hvac-content .button:active::after, +.hvac-content button[type="submit"]:active::after, +.hvac-content input[type="submit"]:active::after, +.hvac-content .ast-button:active::after { + animation: ripple 0.4s ease-out; +} + +/* Secondary buttons */ +.hvac-button-secondary, +.hvac-content .button-secondary { + background-color: var(--hvac-secondary); +} + +.hvac-button-secondary:hover, +.hvac-content .button-secondary:hover { + background-color: var(--hvac-secondary-dark); +} + +/* Success/danger button variants */ +.hvac-button-success, +.hvac-content .button-success { + background-color: var(--hvac-success); +} + +.hvac-button-success:hover, +.hvac-content .button-success:hover { + background-color: var(--hvac-success); + filter: brightness(0.9); +} + +.hvac-button-danger, +.hvac-content .button-danger { + background-color: var(--hvac-error); +} + +.hvac-button-danger:hover, +.hvac-content .button-danger:hover { + background-color: var(--hvac-error); + filter: brightness(0.9); +} + +/* Outline button variant */ +.hvac-button-outline, +.hvac-content .button-outline { + background-color: transparent; + color: var(--hvac-primary) !important; + border: 2px solid var(--hvac-primary); + box-shadow: none; +} + +.hvac-button-outline:hover, +.hvac-content .button-outline:hover { + background-color: var(--hvac-primary-light); + color: var(--hvac-primary) !important; + box-shadow: var(--hvac-shadow); +} + +/* Mobile optimized buttons */ +@media (max-width: 480px) { + .hvac-button, + .hvac-content .button, + .hvac-content button[type="submit"], + .hvac-content input[type="submit"], + .hvac-content .ast-button { + padding: 0.85rem 1rem; + width: 100%; + max-width: 100%; + display: block; + font-size: 1rem; + margin-bottom: var(--hvac-spacing-sm); + } + + /* Fix for buttons in a row on mobile */ + .hvac-button-group { + display: flex; + flex-direction: column; + gap: var(--hvac-spacing-sm); + width: 100%; + } +} + +@keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 0.7; + } + 20% { + transform: scale(25, 25); + opacity: 0.5; + } + 100% { + opacity: 0; + transform: scale(40, 40); + } +} + +/* Enhanced Link Styles */ +.hvac-content a:not(.button):not(.hvac-button) { + color: var(--hvac-primary); + text-decoration: none; + font-weight: 500; + transition: color 0.2s; +} + +.hvac-content a:not(.button):not(.hvac-button):hover { + color: var(--hvac-primary-dark); + text-decoration: underline; +} + +/* Responsive Table Improvements */ +.hvac-table-wrapper { + overflow-x: auto; + margin-bottom: var(--hvac-spacing-lg); +} + +.hvac-table { + width: 100%; + border-collapse: collapse; + border: 1px solid var(--hvac-border); + background-color: white; +} + +.hvac-table th { + background-color: var(--hvac-secondary-light); + color: var(--hvac-secondary-dark); + font-weight: 600; + text-align: left; + padding: var(--hvac-spacing-md); + border-bottom: 2px solid var(--hvac-border); +} + +.hvac-table td { + padding: var(--hvac-spacing-md); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; +} + +.hvac-table tbody tr:hover { + background-color: var(--hvac-primary-light); +} + +/* Card Component Styles */ +.hvac-card { + background-color: white; + border-radius: var(--hvac-border-radius); + box-shadow: var(--hvac-shadow); + padding: var(--hvac-spacing-lg); + margin-bottom: var(--hvac-spacing-lg); + border: 1px solid var(--hvac-border); +} + +.hvac-card-title { + margin-top: 0; + margin-bottom: var(--hvac-spacing-md); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); +} + +/* Form Element Improvements */ +.hvac-form-group { + margin-bottom: var(--hvac-spacing-lg); +} + +.hvac-form-label { + display: block; + margin-bottom: var(--hvac-spacing-sm); + font-weight: 600; + color: var(--hvac-text); +} + +.hvac-form-input, +.hvac-content input[type="text"], +.hvac-content input[type="email"], +.hvac-content input[type="password"], +.hvac-content input[type="url"], +.hvac-content textarea, +.hvac-content select { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + font-size: 1rem; + background-color: white; + transition: border-color 0.2s, box-shadow 0.2s; +} + +.hvac-form-input:focus, +.hvac-content input[type="text"]:focus, +.hvac-content input[type="email"]:focus, +.hvac-content input[type="password"]:focus, +.hvac-content input[type="url"]:focus, +.hvac-content textarea:focus, +.hvac-content select:focus { + border-color: var(--hvac-primary); + outline: none; + box-shadow: 0 0 0 3px var(--hvac-primary-light); +} + +/* Alert/Message Styles */ +.hvac-alert { + padding: var(--hvac-spacing-md); + border-radius: var(--hvac-border-radius); + margin-bottom: var(--hvac-spacing-lg); + border-left: 4px solid transparent; +} + +.hvac-alert-success { + background-color: var(--hvac-success-light); + border-color: var(--hvac-success); + color: var(--hvac-success); +} + +.hvac-alert-error { + background-color: var(--hvac-error-light); + border-color: var(--hvac-error); + color: var(--hvac-error); +} + +/* Layout Helper Classes */ +.hvac-flex { + display: flex; +} + +.hvac-flex-between { + justify-content: space-between; +} + +.hvac-flex-center { + align-items: center; +} + +.hvac-flex-wrap { + flex-wrap: wrap; +} + +.hvac-mt-sm { margin-top: var(--hvac-spacing-sm); } +.hvac-mt-md { margin-top: var(--hvac-spacing-md); } +.hvac-mb-sm { margin-bottom: var(--hvac-spacing-sm); } +.hvac-mb-md { margin-bottom: var(--hvac-spacing-md); } +.hvac-mb-lg { margin-bottom: var(--hvac-spacing-lg); } +.hvac-mr-sm { margin-right: var(--hvac-spacing-sm); } + +/* Accessibility Focus Styles */ +.hvac-button:focus, +.hvac-content .button:focus, +.hvac-content button:focus, +.hvac-content input[type="submit"]:focus, +.hvac-content input[type="button"]:focus, +.hvac-content .ast-button:focus { + outline: var(--hvac-focus-width) solid var(--hvac-focus-color); + outline-offset: var(--hvac-focus-offset); + box-shadow: none; + position: relative; + z-index: 1; +} + +.hvac-content a:focus, +.hvac-content [tabindex="0"]:focus { + outline: var(--hvac-focus-width) solid var(--hvac-focus-color); + outline-offset: var(--hvac-focus-offset); + border-radius: 2px; +} + +.hvac-content input[type="text"]:focus, +.hvac-content input[type="email"]:focus, +.hvac-content input[type="password"]:focus, +.hvac-content input[type="url"]:focus, +.hvac-content textarea:focus, +.hvac-content select:focus { + outline: none; /* Remove default outline */ + border-color: var(--hvac-focus-color); + box-shadow: 0 0 0 var(--hvac-focus-width) rgba(34, 113, 177, 0.3); +} + +/* High contrast focus style for keyboard navigation */ +.keyboard-nav-active :focus { + outline: 3px solid #ffbf47 !important; + outline-offset: var(--hvac-focus-offset) !important; +} + +/* Skip link for keyboard users */ +.hvac-skip-link { + position: absolute; + top: -40px; + left: 0; + z-index: 100; + background: var(--hvac-primary); + color: white; + padding: 10px; + transition: top 0.2s; +} + +.hvac-skip-link:focus { + top: 0; + outline: var(--hvac-focus-width) solid var(--hvac-focus-color); +} + +/* Responsive improvements */ +@media (max-width: 767px) { + .hvac-flex { + flex-direction: column; + } + + .hvac-form-group { + margin-bottom: var(--hvac-spacing-md); + } + + .hvac-card { + padding: var(--hvac-spacing-md); + } +} + +/* Apply to all plugin pages */ +body.page-hvac-dashboard, +body.page-community-login, +body.page-trainer-registration, +body.page-trainer-profile, +body.page-event-summary, +body.page-email-attendees, +body.page-my-events, +body.page-manage-event { + /* Base font settings */ + font-size: 16px; + line-height: 1.6; + color: var(--hvac-text); +} + +/* Enable detection of keyboard navigation for better accessibility */ +body:not(.user-is-tabbing) :focus { + outline: none !important; +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard.css index 759d2ea1..3977564c 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard.css @@ -1,27 +1,58 @@ /* - * HVAC Trainer Dashboard Styles + * HVAC Trainer Dashboard Styles - Enhanced Version * - * Styles specific to the template-hvac-dashboard.php template. + * Styles specific to the trainer dashboard page. */ +/* Dashboard Container */ +.hvac-dashboard { + padding: var(--hvac-spacing-lg); + background-color: #f9f9f9; + border-radius: var(--hvac-border-radius); +} + /* Header */ .hvac-dashboard-header { - margin-bottom: 2em; - padding-bottom: 1em; - border-bottom: 1px solid #eee; /* Consider using theme variable for border color */ - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; /* Allow wrapping on smaller screens */ + margin-bottom: 2em; + padding-bottom: 1em; + border-bottom: 1px solid var(--hvac-border); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +.hvac-dashboard-header h1 { + margin: 0 0 var(--hvac-spacing-sm) 0; + color: var(--hvac-text); + font-size: 1.8rem; + font-weight: 600; +} + +.hvac-dashboard-nav { + display: flex; + gap: var(--hvac-spacing-sm); + flex-wrap: wrap; } .hvac-dashboard-nav a { - margin-left: 0.5em; /* Add some space between nav buttons */ + margin: 0; + min-width: 120px; + text-align: center; } /* Stats Section */ .hvac-dashboard-stats { - margin-bottom: 2em; + margin-bottom: var(--hvac-spacing-xl); +} + +.hvac-dashboard-stats h2 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-md); + font-size: 1.4rem; + color: var(--hvac-text); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); } /* Row layout for stats */ @@ -29,84 +60,176 @@ display: flex; flex-direction: row; flex-wrap: wrap; - margin: -10px; /* Counteract the padding on columns */ + margin: -10px; justify-content: space-between; align-items: stretch; } .hvac-stat-col { flex: 1; - min-width: 160px; /* Ensure minimum width for readability */ + min-width: 160px; padding: 10px; -} - -/* Target column padding specifically within the stats section - maintain compatibility */ -.hvac-dashboard-stats .ast-row > [class*="ast-col-"] { - padding: 10px; /* Replicates removed inline style */ - display: flex; /* Ensure cards fill height if needed */ - flex-direction: column; + margin-bottom: var(--hvac-spacing-sm); } .hvac-stat-card { - border: 1px solid #eee; /* Consider using theme variable */ - padding: 15px; - background: #fff; /* Consider using theme variable */ - text-align: center; - width: 100%; /* Make card fill column */ - flex-grow: 1; /* Allow card to grow if needed */ - height: 100%; /* Ensure equal height */ - /* Add box-shadow or other theme-consistent styling if desired */ + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + padding: var(--hvac-spacing-lg); + background: white; + text-align: center; + width: 100%; + flex-grow: 1; + height: 100%; + box-shadow: var(--hvac-shadow); + transition: transform 0.2s, box-shadow 0.2s; +} + +.hvac-stat-card:hover { + transform: translateY(-2px); + box-shadow: var(--hvac-shadow-lg); } .hvac-stat-card h3 { margin-top: 0; - margin-bottom: 0.5em; - font-size: 1em; /* Adjust as needed */ + margin-bottom: var(--hvac-spacing-sm); + font-size: 1.1em; + color: var(--hvac-secondary); + font-weight: 600; } .hvac-stat-card p { - font-size: 2em; /* Replicates removed inline style */ - margin: 0.2em 0; /* Replicates removed inline style */ - font-weight: bold; + font-size: 2.2em; + margin: 0.2em 0; + font-weight: 700; line-height: 1.2; + color: var(--hvac-primary); } .hvac-stat-card small { display: block; - margin-top: 0.5em; - font-size: 0.8em; - color: #777; /* Consider using theme variable */ + margin-top: var(--hvac-spacing-sm); + font-size: 0.85em; + color: var(--hvac-text-light); } +/* Events Section */ +.hvac-dashboard-events { + background: white; + border-radius: var(--hvac-border-radius); + padding: var(--hvac-spacing-lg); + box-shadow: var(--hvac-shadow); + margin-bottom: var(--hvac-spacing-xl); +} + +.hvac-dashboard-events h2 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-md); + font-size: 1.4rem; + color: var(--hvac-text); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); +} /* Event Filters */ .hvac-event-filters { - margin-bottom: 1em; /* Replicates removed inline style */ + margin-bottom: var(--hvac-spacing-lg); + padding: var(--hvac-spacing-md); + background-color: var(--hvac-secondary-light); + border-radius: var(--hvac-border-radius); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--hvac-spacing-sm); } .hvac-event-filters span { - margin-right: 0.5em; - font-weight: bold; + margin-right: var(--hvac-spacing-md); + font-weight: 600; + color: var(--hvac-secondary-dark); } -.hvac-event-filters .ast-button { - margin-right: 0.3em; /* Space between filter buttons */ +.hvac-filter { + padding: 0.5rem 1rem !important; + margin: 0 !important; +} + +.hvac-filter-active { + background-color: var(--hvac-primary) !important; + color: white !important; } /* Events Table */ .hvac-events-table-wrapper { - overflow-x: auto; /* Add horizontal scroll for smaller screens */ - position: relative; /* For loading indicator positioning */ - min-height: 100px; /* Ensure space for loading indicator */ + overflow-x: auto; + position: relative; + min-height: 100px; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); } -/* Ensure table uses standard WP/Theme styling */ .events-table { - /* Add any specific overrides if needed, but rely on .wp-list-table first */ + width: 100%; + border-collapse: collapse; +} + +.events-table th { + background-color: #f8f9fa; + color: var(--hvac-secondary-dark); + padding: var(--hvac-spacing-md); + font-weight: 600; + text-align: left; + border-bottom: 2px solid var(--hvac-border); +} + +.events-table td { + padding: var(--hvac-spacing-md); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; +} + +.events-table tbody tr:hover { + background-color: var(--hvac-primary-light); +} + +.events-table .column-actions { + white-space: nowrap; } .events-table .column-actions a { - margin-right: 0.5em; + margin-right: var(--hvac-spacing-sm); + color: var(--hvac-primary); + text-decoration: none; + font-weight: 500; +} + +.events-table .column-actions a:hover { + text-decoration: underline; +} + +/* Status indicators */ +.status-indicator { + display: inline-block; + padding: 0.25rem 0.5rem; + border-radius: 12px; + font-size: 0.85em; + font-weight: 500; + text-align: center; +} + +.status-published { + background-color: #e8f5e9; + color: #2e7d32; +} + +.status-draft { + background-color: #eceff1; + color: #546e7a; +} + +.status-pending { + background-color: #fff3e0; + color: #ef6c00; } /* Loading indicator */ @@ -133,10 +256,53 @@ /* Error message */ .hvac-error { - color: #d63638; - padding: 10px; + color: var(--hvac-error); + padding: var(--hvac-spacing-md); border: 1px solid #ffb8bb; - background-color: #ffebe9; - margin: 10px 0; - border-radius: 4px; + background-color: var(--hvac-error-light); + margin: var(--hvac-spacing-md) 0; + border-radius: var(--hvac-border-radius); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .hvac-dashboard-header { + flex-direction: column; + align-items: flex-start; + } + + .hvac-dashboard-nav { + margin-top: var(--hvac-spacing-md); + width: 100%; + } + + .hvac-dashboard-nav a { + flex: 1; + min-width: unset; + } + + .hvac-stat-col { + min-width: 140px; + flex-basis: calc(50% - 20px); + } + + .hvac-event-filters { + flex-direction: column; + align-items: flex-start; + } + + .hvac-event-filters span { + margin-bottom: var(--hvac-spacing-sm); + } + + .hvac-filter { + width: 100%; + text-align: center; + } +} + +@media (max-width: 480px) { + .hvac-stat-col { + flex-basis: 100%; + } } \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-email-attendees.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-email-attendees.css index ab3b86ed..cec75833 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-email-attendees.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-email-attendees.css @@ -1,120 +1,307 @@ /** - * Styles for the Email Attendees page + * Enhanced Styles for the Email Attendees page + * + * @version 2.0.0 */ +/* Main Container */ .hvac-email-attendees-wrapper { max-width: 1200px; margin: 0 auto; - padding: 20px; + padding: var(--hvac-spacing-xl); + background-color: #f9fafb; + border-radius: var(--hvac-border-radius); } +/* Header Section */ .hvac-email-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: var(--hvac-spacing-xl); flex-wrap: wrap; + border-bottom: 1px solid var(--hvac-border); + padding-bottom: var(--hvac-spacing-md); } .hvac-email-title h1 { - margin: 0 0 10px 0; + margin: 0 0 var(--hvac-spacing-sm) 0; + color: var(--hvac-text); + font-size: 1.8rem; + font-weight: 600; +} + +.hvac-email-title h2 { + margin: 0; + color: var(--hvac-text-light); + font-size: 1.2rem; + font-weight: 500; } .hvac-email-navigation { display: flex; - gap: 10px; + gap: var(--hvac-spacing-sm); flex-wrap: wrap; } +.hvac-email-navigation a { + min-width: 120px; + text-align: center; +} + +/* Email Form */ .hvac-email-form { - margin-top: 20px; + background-color: white; + padding: var(--hvac-spacing-lg); + border-radius: var(--hvac-border-radius); + box-shadow: var(--hvac-shadow); + margin-bottom: var(--hvac-spacing-xl); } +/* Event Info Section */ .hvac-email-info { - background-color: #f9f9f9; - padding: 15px; - border-radius: 5px; - margin-bottom: 20px; + background-color: var(--hvac-primary-light); + padding: var(--hvac-spacing-md) var(--hvac-spacing-lg); + border-radius: var(--hvac-border-radius); + margin-bottom: var(--hvac-spacing-lg); + border-left: 4px solid var(--hvac-primary); } +.hvac-email-info p { + margin: var(--hvac-spacing-sm) 0; + color: var(--hvac-text); +} + +.hvac-email-info strong { + color: var(--hvac-primary); +} + +/* Form Rows */ .hvac-email-form-row { - margin-bottom: 15px; + margin-bottom: var(--hvac-spacing-lg); } .hvac-email-form-row label { display: block; - margin-bottom: 5px; + margin-bottom: var(--hvac-spacing-sm); font-weight: 600; + color: var(--hvac-text); + font-size: 0.95rem; } .hvac-email-form-row input[type="text"], .hvac-email-form-row textarea { width: 100%; - padding: 8px; - border-radius: 4px; - border: 1px solid #ddd; + padding: 0.85rem; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + font-size: 1rem; + transition: border-color 0.2s, box-shadow 0.2s; + background-color: #f9fafb; } +.hvac-email-form-row input[type="text"]:focus, +.hvac-email-form-row textarea:focus { + border-color: var(--hvac-primary); + outline: none; + box-shadow: 0 0 0 3px var(--hvac-primary-light); + background-color: white; +} + +.hvac-email-form-row textarea { + min-height: 200px; + resize: vertical; +} + +/* Recipients Section */ .hvac-email-recipients { - margin-top: 20px; - border: 1px solid #ddd; - padding: 15px; - border-radius: 5px; + margin-top: var(--hvac-spacing-xl); + border: 1px solid var(--hvac-border); + padding: var(--hvac-spacing-lg); + border-radius: var(--hvac-border-radius); + background-color: #f9fafb; } +.hvac-email-recipients h3 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-md); + color: var(--hvac-text); + font-size: 1.2rem; + font-weight: 600; + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); +} + +/* Filter Section */ .hvac-email-filter { - margin-bottom: 15px; + margin-bottom: var(--hvac-spacing-lg); display: flex; - gap: 15px; + gap: var(--hvac-spacing-md); align-items: center; flex-wrap: wrap; + padding: var(--hvac-spacing-md); + background-color: white; + border-radius: var(--hvac-border-radius); + box-shadow: var(--hvac-shadow); } +.hvac-email-filter label { + font-weight: 600; + margin-right: var(--hvac-spacing-sm); + color: var(--hvac-text); +} + +.hvac-email-filter select { + padding: 0.5rem 1rem; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + background-color: white; + min-width: 200px; + font-size: 0.95rem; +} + +/* Attendee List */ .hvac-attendee-list { max-height: 300px; overflow-y: auto; - border: 1px solid #eee; - padding: 10px; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + background-color: white; + margin-bottom: var(--hvac-spacing-lg); } .hvac-attendee-item { - margin-bottom: 10px; - padding: 5px; - background-color: #f9f9f9; - border-radius: 3px; + padding: var(--hvac-spacing-md); + border-bottom: 1px solid var(--hvac-border-light); + transition: background-color 0.2s; + display: flex; + align-items: center; +} + +.hvac-attendee-item:last-child { + border-bottom: none; +} + +.hvac-attendee-item:hover { + background-color: var(--hvac-primary-light); } .hvac-attendee-checkbox { - margin-right: 10px; + margin-right: var(--hvac-spacing-md); + width: 20px; + height: 20px; + cursor: pointer; } +.hvac-attendee-info { + flex: 1; +} + +.hvac-attendee-name { + font-weight: 600; + color: var(--hvac-text); + margin-bottom: var(--hvac-spacing-xs); +} + +.hvac-attendee-email { + color: var(--hvac-text-light); + font-size: 0.9rem; +} + +.hvac-attendee-ticket { + display: inline-block; + padding: 0.25rem 0.5rem; + background-color: var(--hvac-secondary-light); + color: var(--hvac-secondary-dark); + border-radius: 12px; + font-size: 0.75rem; + margin-left: var(--hvac-spacing-md); +} + +/* Select All Option */ +.hvac-select-all-container { + margin-bottom: var(--hvac-spacing-md); + padding: var(--hvac-spacing-sm) var(--hvac-spacing-md); + background-color: white; + border-radius: var(--hvac-border-radius); + border: 1px solid var(--hvac-border); +} + +.hvac-select-all-container label { + display: flex; + align-items: center; + font-weight: 600; + cursor: pointer; +} + +.hvac-select-all-container input[type="checkbox"] { + margin-right: var(--hvac-spacing-sm); + width: 18px; + height: 18px; + cursor: pointer; +} + +/* Count Badge */ +.hvac-count-badge { + background-color: var(--hvac-primary); + color: white; + padding: 0.2rem 0.6rem; + border-radius: 10px; + font-size: 0.75rem; + margin-left: var(--hvac-spacing-sm); + font-weight: 600; +} + +/* Form Submit Button */ +.hvac-email-submit-row { + margin-top: var(--hvac-spacing-xl); + text-align: center; +} + +button.hvac-email-submit { + padding: 0.85rem 2rem; + background-color: var(--hvac-primary); + color: white; + border: none; + border-radius: var(--hvac-border-radius); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s, transform 0.1s; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: var(--hvac-shadow); +} + +button.hvac-email-submit:hover { + background-color: var(--hvac-primary-dark); + transform: translateY(-1px); + box-shadow: var(--hvac-shadow-lg); +} + +button.hvac-email-submit:active { + transform: translateY(0); +} + +/* Success/Error Messages */ .hvac-email-sent { - background-color: #d4edda; - color: #155724; - padding: 15px; - border-radius: 5px; - margin-bottom: 20px; + background-color: var(--hvac-success-light); + color: var(--hvac-success); + padding: var(--hvac-spacing-md) var(--hvac-spacing-lg); + border-radius: var(--hvac-border-radius); + margin-bottom: var(--hvac-spacing-lg); + border-left: 4px solid var(--hvac-success); + font-weight: 500; } .hvac-email-error { - background-color: #f8d7da; - color: #721c24; - padding: 15px; - border-radius: 5px; - margin-bottom: 20px; -} - -.hvac-count-badge { - background-color: #007cba; - color: white; - padding: 2px 8px; - border-radius: 10px; - font-size: 0.8em; - margin-left: 5px; -} - -.hvac-select-all-container { - margin-bottom: 10px; + background-color: var(--hvac-error-light); + color: var(--hvac-error); + padding: var(--hvac-spacing-md) var(--hvac-spacing-lg); + border-radius: var(--hvac-border-radius); + margin-bottom: var(--hvac-spacing-lg); + border-left: 4px solid var(--hvac-error); + font-weight: 500; } /* Responsive styles */ @@ -125,12 +312,54 @@ } .hvac-email-navigation { - margin-top: 15px; - margin-bottom: 15px; + margin-top: var(--hvac-spacing-md); + width: 100%; + } + + .hvac-email-navigation a { + flex: 1; + min-width: unset; } .hvac-email-filter { flex-direction: column; align-items: flex-start; } + + .hvac-email-filter select { + width: 100%; + margin-top: var(--hvac-spacing-xs); + } + + .hvac-email-attendees-wrapper { + padding: var(--hvac-spacing-md); + } + + .hvac-email-form { + padding: var(--hvac-spacing-md); + } +} + +@media (max-width: 480px) { + .hvac-email-title h1 { + font-size: 1.5rem; + } + + .hvac-email-title h2 { + font-size: 1rem; + } + + .hvac-attendee-item { + flex-direction: column; + align-items: flex-start; + } + + .hvac-attendee-checkbox { + margin-bottom: var(--hvac-spacing-xs); + } + + .hvac-attendee-ticket { + margin-left: 0; + margin-top: var(--hvac-spacing-xs); + } } \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-event-summary.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-event-summary.css index ac99f86e..62fa7197 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-event-summary.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-event-summary.css @@ -1,71 +1,338 @@ /** - * Styles for the HVAC Community Events Single Event Summary Template + * Enhanced Styles for the HVAC Community Events Single Event Summary Template + * + * @version 2.0.0 */ -.hvac-event-summary-details, -.hvac-event-summary-transactions { - margin-bottom: 2em; /* Add spacing between sections */ - padding: 1.5em; - border: 1px solid #e2e2e2; /* Basic border like theme cards */ - border-radius: 4px; /* Slight rounding */ - background-color: #fff; /* White background */ +/* Main Container */ +.hvac-event-summary-wrapper { + max-width: 1200px; + margin: 0 auto; + padding: var(--hvac-spacing-xl) var(--hvac-spacing-md); } -.hvac-event-summary-details h2, -.hvac-event-summary-transactions h2 { +/* Page Header */ +.hvac-event-summary-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--hvac-spacing-xl); + flex-wrap: wrap; + border-bottom: 1px solid var(--hvac-border); + padding-bottom: var(--hvac-spacing-md); +} + +.hvac-event-summary-title h1 { + margin: 0 0 var(--hvac-spacing-sm) 0; + color: var(--hvac-text); + font-size: 1.8rem; + font-weight: 600; +} + +.hvac-event-summary-title .event-date { + color: var(--hvac-text-light); + font-size: 1.1rem; + font-weight: 500; +} + +.hvac-event-summary-actions { + display: flex; + gap: var(--hvac-spacing-sm); + flex-wrap: wrap; +} + +.hvac-event-summary-actions a { + min-width: 120px; + text-align: center; +} + +/* Quick Stats Cards */ +.hvac-event-summary-stats { + display: flex; + flex-wrap: wrap; + gap: var(--hvac-spacing-md); + margin-bottom: var(--hvac-spacing-xl); +} + +.hvac-event-stat-card { + flex: 1; + min-width: 180px; + background-color: white; + border-radius: var(--hvac-border-radius); + box-shadow: var(--hvac-shadow); + padding: var(--hvac-spacing-lg); + text-align: center; + border: 1px solid var(--hvac-border-light); + transition: transform 0.2s, box-shadow 0.2s; +} + +.hvac-event-stat-card:hover { + transform: translateY(-3px); + box-shadow: var(--hvac-shadow-lg); +} + +.hvac-event-stat-card h3 { + margin: 0 0 var(--hvac-spacing-sm) 0; + font-size: 1rem; + color: var(--hvac-text-light); + font-weight: 600; +} + +.hvac-event-stat-card .stat-value { + font-size: 2.2rem; + font-weight: 700; + color: var(--hvac-primary); + line-height: 1.2; + margin-bottom: var(--hvac-spacing-sm); +} + +.hvac-event-stat-card .stat-subtext { + font-size: 0.85rem; + color: var(--hvac-text-light); +} + +/* Event Details Section */ +.hvac-event-summary-details { + margin-bottom: var(--hvac-spacing-xl); + padding: var(--hvac-spacing-xl); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + background-color: white; + box-shadow: var(--hvac-shadow); +} + +.hvac-event-summary-details h2 { margin-top: 0; - margin-bottom: 1em; - font-size: 1.5em; /* Adjust as needed */ - border-bottom: 1px solid #eee; - padding-bottom: 0.5em; + margin-bottom: var(--hvac-spacing-lg); + font-size: 1.4rem; + color: var(--hvac-text); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); } -.hvac-event-summary-details h3 { - margin-top: 1.5em; - margin-bottom: 0.5em; - font-size: 1.2em; +.hvac-event-detail-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: var(--hvac-spacing-lg); + margin-bottom: var(--hvac-spacing-lg); } -.hvac-event-summary-details p, -.hvac-event-summary-transactions p { - margin-bottom: 0.8em; +.hvac-event-detail-item h3 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-sm); + font-size: 1.1rem; + color: var(--hvac-secondary); + font-weight: 600; } -.hvac-event-summary-details .event-description { - margin-top: 1em; - padding-top: 1em; - border-top: 1px dashed #eee; +.hvac-event-detail-item p { + color: var(--hvac-text); + margin: 0; + line-height: 1.5; +} + +.hvac-event-description { + margin-top: var(--hvac-spacing-lg); + padding-top: var(--hvac-spacing-lg); + border-top: 1px dashed var(--hvac-border); +} + +.hvac-event-description h3 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-md); + font-size: 1.2rem; + color: var(--hvac-text); +} + +/* Attendees Section */ +.hvac-event-summary-attendees { + margin-bottom: var(--hvac-spacing-xl); + padding: var(--hvac-spacing-xl); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + background-color: white; + box-shadow: var(--hvac-shadow); +} + +.hvac-event-summary-attendees h2 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-lg); + font-size: 1.4rem; + color: var(--hvac-text); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); + display: flex; + justify-content: space-between; + align-items: center; +} + +.hvac-attendee-count { + display: inline-block; + padding: 0.3rem 0.8rem; + background-color: var(--hvac-primary-light); + color: var(--hvac-primary); + border-radius: var(--hvac-border-radius); + font-size: 0.9rem; + font-weight: 600; +} + +/* Table Styling */ +.hvac-transactions-table-wrapper { + overflow-x: auto; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); } -/* Basic Table Styling - Inherit Astra's base styles where possible */ .hvac-transactions-table { width: 100%; border-collapse: collapse; - margin-top: 1em; -} - -.hvac-transactions-table th, -.hvac-transactions-table td { - text-align: left; - padding: 0.8em 1em; - border-bottom: 1px solid #eee; } .hvac-transactions-table th { - background-color: #f8f8f8; /* Light background for header */ - font-weight: bold; + background-color: #f8f9fa; + color: var(--hvac-secondary-dark); + padding: var(--hvac-spacing-md); + font-weight: 600; + text-align: left; + border-bottom: 2px solid var(--hvac-border); } -.hvac-transactions-table tbody tr:nth-child(odd) { - background-color: #fdfdfd; /* Subtle striping */ +.hvac-transactions-table td { + padding: var(--hvac-spacing-md); + border-bottom: 1px solid var(--hvac-border-light); + vertical-align: middle; } .hvac-transactions-table tbody tr:hover { - background-color: #f1f1f1; /* Hover effect */ + background-color: var(--hvac-primary-light); } -/* Ensure edit button has some margin */ -.entry-header .button.astra-button { - margin-left: 1em; - vertical-align: middle; /* Align with title */ +.hvac-transactions-table .attendee-name { + font-weight: 600; + color: var(--hvac-text); +} + +.hvac-transactions-table .ticket-type { + display: inline-block; + padding: 0.25rem 0.5rem; + background-color: var(--hvac-secondary-light); + color: var(--hvac-secondary-dark); + border-radius: 12px; + font-size: 0.75rem; +} + +/* Revenue & Transactions Section */ +.hvac-event-summary-transactions { + margin-bottom: var(--hvac-spacing-xl); + padding: var(--hvac-spacing-xl); + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + background-color: white; + box-shadow: var(--hvac-shadow); +} + +.hvac-event-summary-transactions h2 { + margin-top: 0; + margin-bottom: var(--hvac-spacing-lg); + font-size: 1.4rem; + color: var(--hvac-text); + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px solid var(--hvac-border-light); +} + +.hvac-revenue-summary { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--hvac-spacing-md); + margin-bottom: var(--hvac-spacing-lg); + padding: var(--hvac-spacing-md); + background-color: var(--hvac-primary-light); + border-radius: var(--hvac-border-radius); +} + +.hvac-revenue-item { + flex: 1; + min-width: 180px; + text-align: center; +} + +.hvac-revenue-item h3 { + margin: 0 0 var(--hvac-spacing-xs) 0; + font-size: 0.9rem; + color: var(--hvac-text-light); + font-weight: 600; +} + +.hvac-revenue-item .revenue-value { + font-size: 1.5rem; + font-weight: 700; + color: var(--hvac-primary); +} + +/* No Attendees Message */ +.hvac-no-attendees { + padding: var(--hvac-spacing-lg); + background-color: var(--hvac-secondary-light); + border-radius: var(--hvac-border-radius); + text-align: center; + color: var(--hvac-secondary-dark); + font-weight: 500; +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .hvac-event-summary-header { + flex-direction: column; + align-items: flex-start; + } + + .hvac-event-summary-actions { + margin-top: var(--hvac-spacing-md); + width: 100%; + } + + .hvac-event-summary-actions a { + flex: 1; + min-width: unset; + } + + .hvac-event-summary-details, + .hvac-event-summary-attendees, + .hvac-event-summary-transactions { + padding: var(--hvac-spacing-md); + } + + .hvac-event-detail-grid { + grid-template-columns: 1fr; + gap: var(--hvac-spacing-md); + } + + .hvac-revenue-item { + flex-basis: calc(50% - var(--hvac-spacing-md)); + } +} + +@media (max-width: 480px) { + .hvac-event-summary-title h1 { + font-size: 1.5rem; + } + + .hvac-event-stat-card { + flex-basis: 100%; + } + + .hvac-revenue-item { + flex-basis: 100%; + margin-bottom: var(--hvac-spacing-sm); + } + + .hvac-event-summary-attendees h2 { + flex-direction: column; + align-items: flex-start; + } + + .hvac-attendee-count { + margin-top: var(--hvac-spacing-xs); + } } \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-mobile-nav.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-mobile-nav.css new file mode 100644 index 00000000..51474e11 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-mobile-nav.css @@ -0,0 +1,162 @@ +/** + * HVAC Community Events Mobile Navigation + * + * This stylesheet provides an enhanced mobile navigation experience + * for the dashboard and other main pages of the HVAC Community Events plugin. + */ + +/* Mobile Navigation Container */ +.hvac-mobile-nav-container { + display: none; /* Hidden by default, shows on mobile */ +} + +/* Responsive nav toggle button */ +.hvac-mobile-nav-toggle { + display: none; + background-color: var(--hvac-primary); + color: white; + border: none; + padding: 10px; + border-radius: var(--hvac-border-radius); + cursor: pointer; + font-weight: bold; + text-align: center; + width: 100%; + margin-bottom: var(--hvac-spacing-md); + position: relative; + padding-left: 40px; + font-size: 1rem; +} + +.hvac-mobile-nav-toggle::before { + content: ""; + position: absolute; + left: 15px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 2px; + background-color: white; + box-shadow: 0 -5px 0 0 white, 0 5px 0 0 white; + transition: all 0.3s ease; +} + +.hvac-mobile-nav-toggle.active::before { + box-shadow: none; + transform: translateY(-50%) rotate(45deg); +} + +.hvac-mobile-nav-toggle.active::after { + content: ""; + position: absolute; + left: 15px; + top: 50%; + width: 18px; + height: 2px; + background-color: white; + transform: translateY(-50%) rotate(-45deg); +} + +/* Mobile navigation menu */ +.hvac-mobile-nav { + display: none; + background-color: white; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); + overflow: hidden; + box-shadow: var(--hvac-shadow); + margin-bottom: var(--hvac-spacing-lg); + max-height: 0; + opacity: 0; + transition: max-height 0.3s ease, opacity 0.2s ease; +} + +.hvac-mobile-nav.open { + display: block; + max-height: 500px; + opacity: 1; +} + +.hvac-mobile-nav ul { + list-style: none; + padding: 0; + margin: 0; +} + +.hvac-mobile-nav li { + border-bottom: 1px solid var(--hvac-border-light); +} + +.hvac-mobile-nav li:last-child { + border-bottom: none; +} + +.hvac-mobile-nav a { + display: block; + padding: var(--hvac-spacing-md); + text-decoration: none; + color: var(--hvac-text); + font-weight: 500; + transition: background-color 0.2s; +} + +.hvac-mobile-nav a:hover, +.hvac-mobile-nav a:focus { + background-color: var(--hvac-primary-light); + color: var(--hvac-primary); +} + +.hvac-mobile-nav a.active { + background-color: var(--hvac-primary); + color: white; +} + +/* Mobile nav icon indicator */ +.hvac-mobile-nav a i, +.hvac-mobile-nav a svg { + margin-right: var(--hvac-spacing-sm); + width: 16px; + text-align: center; +} + +/* Apply to screens smaller than 768px */ +@media (max-width: 767px) { + /* Hide original navigation */ + .hvac-dashboard-nav, + .hvac-event-summary-actions, + .hvac-email-navigation { + display: none; + } + + /* Show mobile navigation components */ + .hvac-mobile-nav-container { + display: block; + } + + .hvac-mobile-nav-toggle { + display: block; + } + + /* Adjust header spacing */ + .hvac-dashboard-header, + .hvac-event-summary-header, + .hvac-email-header { + margin-bottom: var(--hvac-spacing-md); + padding-bottom: var(--hvac-spacing-sm); + } +} + +/* Slide-out navigation for larger mobile screens */ +@media (min-width: 480px) and (max-width: 767px) { + .hvac-mobile-nav { + position: relative; + transform: translateX(-100%); + transition: transform 0.3s ease; + max-height: none; + opacity: 1; + } + + .hvac-mobile-nav.open { + transform: translateX(0); + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-print.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-print.css new file mode 100644 index 00000000..1ecfda72 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-print.css @@ -0,0 +1,271 @@ +/** + * HVAC Community Events Print Styles + * + * This stylesheet optimizes event summary and other pages for printing, + * hiding unnecessary elements and formatting content for paper output. + */ + +@media print { + /* Global print styles */ + * { + background: transparent !important; + color: #000 !important; + box-shadow: none !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + } + + body { + font-size: 12pt; + line-height: 1.4; + padding: 0 !important; + margin: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + /* Hide non-essential elements */ + header, + footer, + nav, + aside, + .sidebar, + .navigation, + .hvac-event-summary-actions, + .hvac-dashboard-header, + .hvac-dashboard-nav, + .hvac-mobile-nav-container, + .hvac-dashboard-filter, + .hvac-event-filters, + .hvac-email-navigation, + .site-header, + .site-footer, + #site-navigation, + #comments, + #respond, + #secondary, + .widget-area, + button, + input[type="submit"], + .hvac-button, + .button, + .ast-button, + .no-print { + display: none !important; + } + + /* Allow wrapping of URLs and words */ + a, blockquote { + page-break-inside: avoid; + } + + h1, h2, h3, h4, h5, h6 { + page-break-after: avoid; + page-break-inside: avoid; + } + + img { + page-break-inside: avoid; + page-break-after: avoid; + max-width: 100% !important; + } + + table, pre { + page-break-inside: avoid; + } + + ul, ol, dl { + page-break-before: avoid; + } + + /* Show URLs after links */ + a[href^="http"]:after { + content: " (" attr(href) ")"; + font-size: 90%; + color: #555 !important; + } + + /* Don't show URLs for same-domain links */ + a[href^="/"]:after { + content: ""; + } + + /* Event Summary specific print styles */ + .hvac-event-summary-wrapper { + max-width: 100% !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + } + + .hvac-event-summary-title h1 { + font-size: 18pt; + margin-bottom: 1cm; + padding-bottom: 0.5cm; + border-bottom: 1pt solid #ddd; + } + + .hvac-event-summary-stats { + display: flex !important; + flex-wrap: wrap !important; + gap: 0.5cm !important; + border: 1pt solid #ddd !important; + padding: 0.5cm !important; + margin-bottom: 1cm !important; + } + + .hvac-event-stat-card { + flex: 1 1 45% !important; + border: 1pt solid #eee !important; + padding: 0.5cm !important; + text-align: center !important; + box-shadow: none !important; + page-break-inside: avoid !important; + min-width: 5cm !important; + } + + .hvac-event-stat-card .stat-value { + font-size: 16pt !important; + font-weight: bold !important; + } + + /* Details and tables for printing */ + .hvac-event-summary-details, + .hvac-event-summary-attendees, + .hvac-event-summary-transactions { + border: 1pt solid #ddd !important; + padding: 0.5cm !important; + margin-bottom: 1cm !important; + page-break-inside: avoid !important; + } + + .hvac-event-summary-details h2, + .hvac-event-summary-attendees h2, + .hvac-event-summary-transactions h2 { + font-size: 14pt !important; + margin-top: 0 !important; + margin-bottom: 0.5cm !important; + padding-bottom: 0.25cm !important; + border-bottom: 1pt solid #ddd !important; + } + + .hvac-table, + .hvac-transactions-table, + .events-table { + width: 100% !important; + border-collapse: collapse !important; + margin-bottom: 0.5cm !important; + font-size: 9pt !important; + } + + .hvac-table th, + .hvac-transactions-table th, + .events-table th { + text-align: left !important; + padding: 0.25cm !important; + border-bottom: 1pt solid #000 !important; + font-weight: bold !important; + } + + .hvac-table td, + .hvac-transactions-table td, + .events-table td { + padding: 0.25cm !important; + border-bottom: 1pt solid #ddd !important; + } + + /* Add print header with logo and date */ + .hvac-event-summary-wrapper::before { + content: "HVAC Community Events - Event Summary" !important; + display: block !important; + font-size: 10pt !important; + text-align: right !important; + color: #999 !important; + margin-bottom: 0.25cm !important; + } + + /* Dashboard specific print styles */ + .hvac-dashboard { + max-width: 100% !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + } + + .hvac-dashboard-stats { + display: flex !important; + flex-wrap: wrap !important; + gap: 0.5cm !important; + margin-bottom: 1cm !important; + } + + .hvac-stat-card { + flex: 1 1 45% !important; + border: 1pt solid #eee !important; + padding: 0.5cm !important; + text-align: center !important; + page-break-inside: avoid !important; + } + + .hvac-dashboard-events { + margin-bottom: 1cm !important; + } + + /* Email attendees specific print styles */ + .hvac-email-attendees-wrapper { + max-width: 100% !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + } + + .hvac-email-form { + display: none !important; /* Hide the email form when printing */ + } + + .hvac-attendee-list { + max-height: none !important; + overflow: visible !important; + } + + /* Page break control */ + .hvac-event-summary-attendees { + page-break-before: always !important; + } + + /* QR code for event details (if available) */ + .hvac-event-qr-code { + display: block !important; + max-width: 4cm !important; + margin: 0.5cm auto 1cm auto !important; + } + + /* Add page numbering */ + @page { + margin: 1.5cm !important; + } + + @page :first { + margin-top: 2cm !important; + } + + @page :left { + margin-right: 2cm !important; + } + + @page :right { + margin-left: 2cm !important; + } + + /* Add page numbers */ + body::after { + content: "Page " counter(page) !important; + counter-increment: page !important; + position: fixed !important; + bottom: 0.5cm !important; + right: 0.5cm !important; + font-size: 8pt !important; + color: #999 !important; + } +} \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-registration.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-registration.css index 5288c2fb..501bc231 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-registration.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-registration.css @@ -1,39 +1,96 @@ -/* HVAC Trainer Registration Form Styles */ +/** + * HVAC Trainer Registration Form Enhanced Styles + * + * @version 2.0.0 + */ + +/* Main Container */ +.hvac-registration-form-wrapper { + max-width: 1200px; + margin: 0 auto; + padding: var(--hvac-spacing-xl) var(--hvac-spacing-md); + background-color: #f9fafb; +} + +/* Form Card */ .hvac-registration-form { max-width: 800px; margin: 0 auto; - padding: 2rem; - background: #fff; - border-radius: 4px; - box-shadow: 0 0 10px rgba(0,0,0,0.05); + padding: var(--hvac-spacing-xl); + background-color: white; + border-radius: var(--hvac-border-radius); + box-shadow: var(--hvac-shadow-lg); + border: 1px solid var(--hvac-border); +} + +/* Form Header */ +.hvac-registration-form-header { + text-align: center; + margin-bottom: var(--hvac-spacing-xl); + padding-bottom: var(--hvac-spacing-md); + border-bottom: 1px solid var(--hvac-border-light); } .hvac-registration-form h2 { - color: #1a1a1a; - margin-bottom: 1.5rem; - text-align: center; + color: var(--hvac-primary); + font-size: 1.8rem; + margin-bottom: var(--hvac-spacing-sm); + font-weight: 700; } +.hvac-registration-form-header p { + color: var(--hvac-text-light); + font-size: 1rem; + max-width: 600px; + margin: 0 auto; +} + +/* Form Sections */ .hvac-registration-form .form-section { - margin-bottom: 2rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid #eee; + margin-bottom: var(--hvac-spacing-xl); + padding-bottom: var(--hvac-spacing-lg); + border-bottom: 1px solid var(--hvac-border-light); +} + +.hvac-registration-form .form-section:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; } .hvac-registration-form .form-section h3 { - color: #1a1a1a; - margin-bottom: 1rem; + color: var(--hvac-secondary-dark); + margin-bottom: var(--hvac-spacing-md); + font-size: 1.3rem; + font-weight: 600; + padding-bottom: var(--hvac-spacing-sm); + border-bottom: 1px dashed var(--hvac-border-light); } +/* Form Grid Layout */ +.hvac-registration-form .form-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: var(--hvac-spacing-md); +} + +/* Form Rows */ .hvac-registration-form .form-row { - margin-bottom: 1rem; + margin-bottom: var(--hvac-spacing-md); } +/* Form Fields */ .hvac-registration-form label { display: block; - margin-bottom: 0.5rem; + margin-bottom: var(--hvac-spacing-sm); font-weight: 600; - color: #1a1a1a; + color: var(--hvac-text); + font-size: 0.95rem; +} + +.hvac-registration-form label .required { + color: var(--hvac-error); + margin-left: var(--hvac-spacing-xs); } .hvac-registration-form input[type="text"], @@ -43,64 +100,237 @@ .hvac-registration-form textarea, .hvac-registration-form select { width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; + padding: 0.85rem; + border: 1px solid var(--hvac-border); + border-radius: var(--hvac-border-radius); font-size: 1rem; + transition: border-color 0.2s, box-shadow 0.2s; + background-color: #f9fafb; } +.hvac-registration-form input[type="text"]:focus, +.hvac-registration-form input[type="email"]:focus, +.hvac-registration-form input[type="password"]:focus, +.hvac-registration-form input[type="url"]:focus, +.hvac-registration-form textarea:focus, +.hvac-registration-form select:focus { + border-color: var(--hvac-primary); + outline: none; + box-shadow: 0 0 0 3px var(--hvac-primary-light); + background-color: white; +} + +.hvac-registration-form textarea { + min-height: 120px; + resize: vertical; +} + +.hvac-registration-form select { + appearance: none; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + padding-right: 2.5rem; +} + +/* Field Helper Text */ +.hvac-registration-form .field-help { + margin-top: var(--hvac-spacing-xs); + font-size: 0.85rem; + color: var(--hvac-text-light); +} + +/* Submit Button Section */ .hvac-registration-form .form-submit { - margin-top: 2rem; + margin-top: var(--hvac-spacing-xl); text-align: center; } .hvac-registration-form input[type="submit"] { - background-color: #0274be; + display: inline-block; + padding: 0.85rem 2.5rem; + background-color: var(--hvac-primary); color: white; - padding: 0.75rem 1.5rem; border: none; - border-radius: 4px; + border-radius: var(--hvac-border-radius); + font-size: 1.1rem; + font-weight: 600; cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s; + text-align: center; + transition: background-color 0.2s, transform 0.1s; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: var(--hvac-shadow); } .hvac-registration-form input[type="submit"]:hover { - background-color: #0261a0; + background-color: var(--hvac-primary-dark); + transform: translateY(-2px); + box-shadow: var(--hvac-shadow-lg); } -/* Checkbox/Radio Group Styles */ +.hvac-registration-form input[type="submit"]:active { + transform: translateY(0); +} + +/* Checkbox & Radio Styles */ .hvac-registration-form .checkbox-group { display: flex; flex-direction: column; - gap: 0.5rem; - margin-top: 0.5rem; + gap: var(--hvac-spacing-sm); + margin-top: var(--hvac-spacing-sm); } .hvac-registration-form .checkbox-group label { display: flex; align-items: center; - gap: 0.5rem; + gap: var(--hvac-spacing-sm); font-weight: normal; cursor: pointer; + margin-bottom: 0; } .hvac-registration-form .checkbox-group input[type="checkbox"], .hvac-registration-form .checkbox-group input[type="radio"] { - width: auto; - margin: 0; + width: 18px; + height: 18px; + cursor: pointer; } -/* Error message styling */ +/* Error Messages */ .hvac-registration-form .hvac-errors { - background-color: #fff0f0; - border: 1px solid #ffcccc; - border-radius: 4px; - padding: 1rem; - margin-bottom: 1.5rem; + background-color: var(--hvac-error-light); + border: 1px solid var(--hvac-error); + border-radius: var(--hvac-border-radius); + padding: var(--hvac-spacing-md); + margin-bottom: var(--hvac-spacing-lg); + color: var(--hvac-error); } .hvac-registration-form .hvac-errors .error { - color: #d63638; - margin: 0.25rem 0; + margin: var(--hvac-spacing-xs) 0; +} + +.hvac-registration-form .form-row.has-error input, +.hvac-registration-form .form-row.has-error select, +.hvac-registration-form .form-row.has-error textarea { + border-color: var(--hvac-error); +} + +.hvac-registration-form .form-row.has-error .field-error { + color: var(--hvac-error); + font-size: 0.85rem; + margin-top: var(--hvac-spacing-xs); +} + +/* Success Message */ +.hvac-registration-form .hvac-success { + background-color: var(--hvac-success-light); + border: 1px solid var(--hvac-success); + border-radius: var(--hvac-border-radius); + padding: var(--hvac-spacing-md); + margin-bottom: var(--hvac-spacing-lg); + color: var(--hvac-success); +} + +/* Login Link */ +.hvac-login-link { + margin-top: var(--hvac-spacing-lg); + text-align: center; + padding-top: var(--hvac-spacing-md); + border-top: 1px solid var(--hvac-border-light); + font-size: 0.95rem; +} + +.hvac-login-link a { + color: var(--hvac-primary); + font-weight: 600; + text-decoration: none; +} + +.hvac-login-link a:hover { + text-decoration: underline; +} + +/* Progress Indicator for Multi-step Forms */ +.hvac-registration-progress { + margin-bottom: var(--hvac-spacing-xl); + padding: var(--hvac-spacing-md); + background-color: var(--hvac-secondary-light); + border-radius: var(--hvac-border-radius); + display: flex; + justify-content: space-between; + position: relative; +} + +.hvac-registration-progress::before { + content: ''; + position: absolute; + top: 50%; + left: var(--hvac-spacing-md); + right: var(--hvac-spacing-md); + height: 2px; + background-color: var(--hvac-border); + transform: translateY(-50%); + z-index: 1; +} + +.hvac-registration-step { + width: 30px; + height: 30px; + border-radius: 50%; + background-color: white; + border: 2px solid var(--hvac-border); + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + position: relative; + z-index: 2; +} + +.hvac-registration-step.active { + background-color: var(--hvac-primary); + border-color: var(--hvac-primary); + color: white; +} + +.hvac-registration-step.completed { + background-color: var(--hvac-success); + border-color: var(--hvac-success); + color: white; +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .hvac-registration-form { + padding: var(--hvac-spacing-lg); + } + + .hvac-registration-form .form-grid { + grid-template-columns: 1fr; + } + + .hvac-registration-form h2 { + font-size: 1.5rem; + } + + .hvac-registration-progress { + padding: var(--hvac-spacing-sm); + } +} + +@media (max-width: 480px) { + .hvac-registration-form { + padding: var(--hvac-spacing-md); + } + + .hvac-registration-form h2 { + font-size: 1.3rem; + } + + .hvac-registration-form .form-submit input[type="submit"] { + width: 100%; + } } \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-accessibility.js b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-accessibility.js new file mode 100644 index 00000000..9291bf8d --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-accessibility.js @@ -0,0 +1,54 @@ +/** + * HVAC Community Events Accessibility Helper + * + * This script helps improve accessibility by: + * 1. Detecting keyboard navigation to show focus styles only when needed + * 2. Adding skip links for keyboard users + */ + +(function() { + // Function to run when DOM is fully loaded + document.addEventListener('DOMContentLoaded', function() { + // Add keyboard navigation detection + function handleFirstTab(e) { + if (e.keyCode === 9) { // Tab key + document.body.classList.add('user-is-tabbing'); + + // Remove the event listener after first tab press + window.removeEventListener('keydown', handleFirstTab); + + // Add listener for mouse use + window.addEventListener('mousedown', handleMouseDownOnce); + } + } + + // Remove tabbing class when mouse is used + function handleMouseDownOnce() { + document.body.classList.remove('user-is-tabbing'); + + // Re-add tab listener + window.removeEventListener('mousedown', handleMouseDownOnce); + window.addEventListener('keydown', handleFirstTab); + } + + // Add initial keyboard detection + window.addEventListener('keydown', handleFirstTab); + + // Add skip links to all HVAC pages + const mainContent = document.querySelector('.hvac-content, #primary, .entry-content'); + if (mainContent) { + // Create skip link + const skipLink = document.createElement('a'); + skipLink.href = '#content'; + skipLink.className = 'hvac-skip-link'; + skipLink.innerText = 'Skip to main content'; + skipLink.setAttribute('tabindex', '0'); + + // Add ID to main content + mainContent.setAttribute('id', 'content'); + + // Insert skip link as first element in body + document.body.insertBefore(skipLink, document.body.firstChild); + } + }); +})(); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-animations.js b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-animations.js new file mode 100644 index 00000000..f4dc5f22 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-animations.js @@ -0,0 +1,128 @@ +/** + * HVAC Community Events Animation Helper + * + * This script adds animation support for dynamic elements and + * provides animation utility functions. + */ + +(function() { + document.addEventListener('DOMContentLoaded', function() { + // Apply animations to elements with data-animate attribute + function animateElements() { + const elements = document.querySelectorAll('[data-animate]'); + + elements.forEach(element => { + const animationClass = element.getAttribute('data-animate'); + const delay = element.getAttribute('data-animate-delay') || 0; + + setTimeout(() => { + element.classList.add(animationClass); + element.style.opacity = '1'; + }, delay); + }); + } + + // Initialize animations when page loads + animateElements(); + + // Apply animations to dynamically added content + function setupMutationObserver() { + // Watch for new elements being added to the DOM + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.addedNodes && mutation.addedNodes.length > 0) { + // Check if any added node has animation attributes + mutation.addedNodes.forEach(node => { + // Skip non-element nodes + if (node.nodeType !== 1) return; + + // Check for data-animate attribute + if (node.getAttribute('data-animate')) { + const animationClass = node.getAttribute('data-animate'); + const delay = node.getAttribute('data-animate-delay') || 0; + + setTimeout(() => { + node.classList.add(animationClass); + node.style.opacity = '1'; + }, delay); + } + + // Check children for data-animate attribute + const childElements = node.querySelectorAll('[data-animate]'); + if (childElements.length > 0) { + childElements.forEach(element => { + const animationClass = element.getAttribute('data-animate'); + const delay = element.getAttribute('data-animate-delay') || 0; + + setTimeout(() => { + element.classList.add(animationClass); + element.style.opacity = '1'; + }, delay); + }); + } + }); + } + }); + }); + + // Start observing the document + observer.observe(document.body, { + childList: true, + subtree: true + }); + } + + // Start the observer + setupMutationObserver(); + + // Animate table rows in sequence + function animateTableRows() { + const tables = document.querySelectorAll('.hvac-table, .events-table, .hvac-transactions-table'); + + tables.forEach(table => { + const rows = table.querySelectorAll('tbody tr'); + + rows.forEach((row, index) => { + row.style.opacity = '0'; + + setTimeout(() => { + row.classList.add('hvac-animate-slide-in-bottom'); + row.style.opacity = '1'; + }, 50 * (index + 1)); // Stagger animation + }); + }); + } + + // Run table row animations + setTimeout(animateTableRows, 300); + + // Add animation class to alerts and messages + const alerts = document.querySelectorAll('.hvac-alert, .hvac-email-sent, .hvac-email-error, .login-error, .hvac-errors, .hvac-success'); + alerts.forEach(alert => { + alert.classList.add('hvac-animate-fade-in'); + }); + + // Expose animation API to global scope + window.hvacAnimations = { + animateElement: function(element, animationClass, delay = 0) { + if (!element) return; + + element.style.opacity = '0'; + + setTimeout(() => { + element.classList.add(animationClass); + element.style.opacity = '1'; + }, delay); + }, + + animateElements: animateElements, + animateTableRows: animateTableRows + }; + + // Check if user prefers reduced motion + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (prefersReducedMotion) { + document.body.classList.add('reduced-motion'); + } + }); +})(); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-mobile-nav.js b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-mobile-nav.js new file mode 100644 index 00000000..3cded8da --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-mobile-nav.js @@ -0,0 +1,139 @@ +/** + * HVAC Community Events Mobile Navigation + * + * This script handles the mobile navigation functionality including: + * - Creating mobile menu from existing navigation elements + * - Toggle functionality for mobile menu + * - Highlighting active menu items + * - Handling page-specific navigation setups + */ + +(function() { + document.addEventListener('DOMContentLoaded', function() { + // Mobile navigation setup + function setupMobileNavigation() { + // Target pages that need mobile navigation + const dashboardPage = document.querySelector('.hvac-dashboard'); + const eventSummaryPage = document.querySelector('.hvac-event-summary-wrapper'); + const emailAttendeesPage = document.querySelector('.hvac-email-attendees-wrapper'); + + // Only run on pages with these elements + if (!dashboardPage && !eventSummaryPage && !emailAttendeesPage) { + return; + } + + // Find the appropriate existing navigation element + let existingNav = null; + let headerElement = null; + let pageType = ''; + + if (dashboardPage) { + existingNav = document.querySelector('.hvac-dashboard-nav'); + headerElement = document.querySelector('.hvac-dashboard-header'); + pageType = 'dashboard'; + } else if (eventSummaryPage) { + existingNav = document.querySelector('.hvac-event-summary-actions'); + headerElement = document.querySelector('.hvac-event-summary-header'); + pageType = 'event-summary'; + } else if (emailAttendeesPage) { + existingNav = document.querySelector('.hvac-email-navigation'); + headerElement = document.querySelector('.hvac-email-header'); + pageType = 'email-attendees'; + } + + // If no existing navigation found, exit + if (!existingNav || !headerElement) { + return; + } + + // Create mobile nav container + const mobileNavContainer = document.createElement('div'); + mobileNavContainer.className = 'hvac-mobile-nav-container'; + + // Create toggle button + const toggleButton = document.createElement('button'); + toggleButton.className = 'hvac-mobile-nav-toggle'; + toggleButton.setAttribute('aria-label', 'Toggle navigation menu'); + toggleButton.setAttribute('aria-expanded', 'false'); + toggleButton.innerText = 'Menu'; + + // Create mobile nav menu + const mobileNav = document.createElement('nav'); + mobileNav.className = 'hvac-mobile-nav'; + mobileNav.setAttribute('aria-label', 'Mobile navigation'); + + // Create list of menu items by cloning original nav links + const navList = document.createElement('ul'); + const links = existingNav.querySelectorAll('a'); + + links.forEach(link => { + const listItem = document.createElement('li'); + const newLink = link.cloneNode(true); + + // Highlight active page in mobile nav + if (newLink.getAttribute('href') === window.location.pathname || + newLink.getAttribute('href') === window.location.href) { + newLink.classList.add('active'); + } + + listItem.appendChild(newLink); + navList.appendChild(listItem); + }); + + mobileNav.appendChild(navList); + + // Add components to container + mobileNavContainer.appendChild(toggleButton); + mobileNavContainer.appendChild(mobileNav); + + // Insert container after the header + headerElement.after(mobileNavContainer); + + // Toggle button functionality + toggleButton.addEventListener('click', function() { + const isOpen = mobileNav.classList.contains('open'); + + if (isOpen) { + mobileNav.classList.remove('open'); + toggleButton.classList.remove('active'); + toggleButton.setAttribute('aria-expanded', 'false'); + } else { + mobileNav.classList.add('open'); + toggleButton.classList.add('active'); + toggleButton.setAttribute('aria-expanded', 'true'); + } + }); + + // Close menu when a link is clicked + mobileNav.querySelectorAll('a').forEach(link => { + link.addEventListener('click', function() { + mobileNav.classList.remove('open'); + toggleButton.classList.remove('active'); + toggleButton.setAttribute('aria-expanded', 'false'); + }); + }); + + // Close menu when clicking outside + document.addEventListener('click', function(event) { + if (!mobileNavContainer.contains(event.target)) { + mobileNav.classList.remove('open'); + toggleButton.classList.remove('active'); + toggleButton.setAttribute('aria-expanded', 'false'); + } + }); + + // Add keyboard navigation + document.addEventListener('keydown', function(event) { + if (event.key === 'Escape' && mobileNav.classList.contains('open')) { + mobileNav.classList.remove('open'); + toggleButton.classList.remove('active'); + toggleButton.setAttribute('aria-expanded', 'false'); + toggleButton.focus(); + } + }); + } + + // Run setup + setupMobileNavigation(); + }); +})(); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php index c5bd08d8..6400c6ae 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/hvac-community-events.php @@ -168,21 +168,116 @@ register_deactivation_hook(__FILE__, 'hvac_ce_remove_roles'); /** - * Enqueue styles specifically for the HVAC Dashboard page. + * Enqueue common styles and scripts for all HVAC Community Events pages */ -function hvac_ce_enqueue_dashboard_styles() { - // Check if we are on the specific dashboard page - // Assumes the page slug is 'hvac-dashboard' as created in the activation hook - if ( is_page( 'hvac-dashboard' ) ) { +function hvac_ce_enqueue_common_assets() { + // Enqueue the common CSS file for all pages + wp_enqueue_style( + 'hvac-common-style', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-common.css', + [], // No dependencies + HVAC_CE_VERSION + ); + + // Enqueue animations CSS file + wp_enqueue_style( + 'hvac-animations', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-animations.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + + // Enqueue mobile navigation CSS file + wp_enqueue_style( + 'hvac-mobile-nav', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-mobile-nav.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + + // Enqueue print stylesheet + wp_enqueue_style( + 'hvac-print-style', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-print.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION, + 'print' // Print media only + ); + + // Enqueue the accessibility helper JS for all pages + wp_enqueue_script( + 'hvac-accessibility-js', + HVAC_CE_PLUGIN_URL . 'assets/js/hvac-accessibility.js', + [], // No dependencies + HVAC_CE_VERSION, + true // Load in footer + ); + + // Enqueue animations JS for all pages + wp_enqueue_script( + 'hvac-animations-js', + HVAC_CE_PLUGIN_URL . 'assets/js/hvac-animations.js', + [], // No dependencies + HVAC_CE_VERSION, + true // Load in footer + ); + + // Enqueue mobile navigation JS for all pages + wp_enqueue_script( + 'hvac-mobile-nav-js', + HVAC_CE_PLUGIN_URL . 'assets/js/hvac-mobile-nav.js', + [], // No dependencies + HVAC_CE_VERSION, + true // Load in footer + ); + + // Enqueue page-specific styles based on current page + if (is_page('hvac-dashboard')) { wp_enqueue_style( 'hvac-dashboard-style', HVAC_CE_PLUGIN_URL . 'assets/css/hvac-dashboard.css', - [], // No dependencies for now + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + } + + if (is_page('community-login')) { + wp_enqueue_style( + 'hvac-community-login-style', + HVAC_CE_PLUGIN_URL . 'assets/css/community-login.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + } + + if (is_page('trainer-registration')) { + wp_enqueue_style( + 'hvac-registration-style', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-registration.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + } + + if (is_page('email-attendees')) { + wp_enqueue_style( + 'hvac-email-attendees-style', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-email-attendees.css', + ['hvac-common-style'], // Depends on common styles + HVAC_CE_VERSION + ); + } + + if (is_singular(Tribe__Events__Main::POSTTYPE) || is_page('event-summary')) { + wp_enqueue_style( + 'hvac-event-summary-style', + HVAC_CE_PLUGIN_URL . 'assets/css/hvac-event-summary.css', + ['hvac-common-style'], // Depends on common styles HVAC_CE_VERSION ); } } -add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_dashboard_styles' ); +add_action('wp_enqueue_scripts', 'hvac_ce_enqueue_common_assets'); /** * Enqueue styles and scripts for admin dashboard @@ -216,40 +311,6 @@ function hvac_ce_enqueue_admin_assets($hook) { 'nonce' => wp_create_nonce('hvac_admin_nonce') )); } -add_action('admin_enqueue_scripts', 'hvac_ce_enqueue_admin_assets'); - - -/** - * Enqueue styles specifically for the HVAC Event Summary page. - */ -function hvac_ce_enqueue_event_summary_styles() { - // Check if we are on a single event page - if ( is_singular( Tribe__Events__Main::POSTTYPE ) ) { - wp_enqueue_style( - 'hvac-event-summary-style', - HVAC_CE_PLUGIN_URL . 'assets/css/hvac-event-summary.css', - [], // No dependencies for now - HVAC_CE_VERSION - ); - } -} -add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_event_summary_styles' ); - -/** - * Enqueue styles specifically for the HVAC Email Attendees page. - */ -function hvac_ce_enqueue_email_attendees_styles() { - // Check if we are on the email attendees page - if ( is_page( 'email-attendees' ) ) { - wp_enqueue_style( - 'hvac-email-attendees-style', - HVAC_CE_PLUGIN_URL . 'assets/css/hvac-email-attendees.css', - [], // No dependencies for now - HVAC_CE_VERSION - ); - } -} -add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_email_attendees_styles' );