diff --git a/CLAUDE.md b/CLAUDE.md index 313086ae..a23fb118 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -27,5 +27,6 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co - **Production Deployment Support (2025-07-24)**: Updated deployment infrastructure to support both staging and production environments. Use `scripts/deploy.sh staging` for staging deployments and `scripts/deploy.sh production` only when explicitly requested by the user. Production deployments require double confirmation to prevent accidental deployment. IMPORTANT: Only deploy to production when the user explicitly asks for production deployment. - **Plugin Architecture Refactoring (2025-07-28)**: Implemented modular architecture with single-responsibility classes. Created HVAC_Shortcodes for centralized shortcode management, HVAC_Scripts_Styles for asset management, and HVAC_Route_Manager for URL routing. Eliminated duplicate functionality between HVAC_Plugin and HVAC_Community_Events. All components now use singleton pattern to prevent duplicate initialization. Fixed jQuery selector errors and duplicate content issues. See docs/ARCHITECTURE.md for details. - **Master Dashboard URL Fix (2025-07-29)**: Fixed critical issue where master dashboard was showing trainer dashboard content. Root cause: Both trainer and master dashboards had the same page slug "dashboard", causing WordPress to load the wrong page. Solution: Changed master dashboard URL from `/master-trainer/dashboard/` to `/master-trainer/master-dashboard/`, updated all code references, removed conflicting legacy redirects. Master dashboard now correctly displays master trainer content with aggregate statistics and trainer performance analytics. +- **Event Manage Page CSS and Header Fix (2025-07-30)**: Resolved persistent CSS override and duplicate header issues on the trainer/event/manage/ page. Root causes: CSS specificity conflicts with theme styles, header being added via both template and tribe hook. Solution: Scoped all CSS rules to `.hvac-event-manage-wrapper`, moved navigation header directly into page template, disabled duplicate tribe hook, added theme override styles. Page now displays correctly with single header, proper 1200px max-width layout, 20px padding, and consistent styling matching other dashboard pages. [... rest of the existing content remains unchanged ...] \ No newline at end of file diff --git a/assets/css/hvac-event-manage.css b/assets/css/hvac-event-manage.css index 2e34deb3..4322c9e2 100644 --- a/assets/css/hvac-event-manage.css +++ b/assets/css/hvac-event-manage.css @@ -3,156 +3,174 @@ * Styles for The Events Calendar Community event creation/editing form */ -/* Import HVAC CSS variables and base styles */ -@import url('hvac-common.css'); - -/* Container and Layout */ -.tribe-community-events-content, -#tribe-community-events { - max-width: var(--hvac-container-width, 1200px); +/* Main page wrapper - removed duplicate, using .hvac-event-manage-wrapper instead */ +.hvac-event-manage-wrapper { + max-width: 1200px; margin: 0 auto; - padding: var(--hvac-spacing-xl, 2rem); - background: var(--hvac-white, #ffffff); - border-radius: var(--hvac-radius-lg, 12px); - box-shadow: var(--hvac-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1)); + padding: 20px; + width: 100%; + box-sizing: border-box; } -/* Form Header */ -.tribe-events-community-header { - margin-bottom: var(--hvac-spacing-xl, 2rem); - padding-bottom: var(--hvac-spacing-lg, 1.5rem); - border-bottom: 2px solid var(--hvac-border, #e5e7eb); -} - -/* Form Sections */ -.tribe-section { - margin-bottom: var(--hvac-spacing-xl, 2rem); - padding: var(--hvac-spacing-lg, 1.5rem); - background: var(--hvac-background, #f9fafb); - border-radius: var(--hvac-radius-base, 8px); - border: 1px solid var(--hvac-border, #e5e7eb); -} - -/* Form Groups */ -.tribe-events-community-details .tribe-section-content, -.tribe-events-community-details .tribe-events-community-section-content { +/* Navigation header from HVAC plugin */ +.hvac-event-manage-wrapper .hvac-dashboard-header { + background: #ffffff; + padding: 1.5rem; + margin-bottom: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; - flex-direction: column; - gap: var(--hvac-spacing-md, 1rem); + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1.5rem; + width: 100%; + box-sizing: border-box; } -/* Labels */ -.tribe-events-community-details label, -.tribe-section label { +.hvac-event-manage-wrapper .hvac-dashboard-header h1.entry-title { + margin: 0; + font-size: 2rem; + color: #333333; + font-weight: 600; + line-height: 1.2; +} + +/* Main content container from The Events Calendar */ +.hvac-event-manage-wrapper .tribe-community-events-content, +.hvac-event-manage-wrapper #tribe-community-events { + background: #ffffff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 100%; + box-sizing: border-box; +} + +/* Remove default tribe styles that conflict */ +.hvac-event-manage-wrapper .tribe-community-events { + padding: 0; + margin: 0; + background: transparent; + max-width: none; + width: 100%; +} + +/* Form sections */ +.hvac-event-manage-wrapper .tribe-section { + margin-bottom: 1.5rem; + padding: 1.5rem; + background: #f9f9f9; + border-radius: 4px; + border: 1px solid #e5e7eb; +} + +/* Form labels */ +.hvac-event-manage-wrapper .tribe-events-community-details label, +.hvac-event-manage-wrapper .tribe-section label { display: block; - margin-bottom: var(--hvac-spacing-xs, 0.5rem); - font-weight: 500; - color: var(--hvac-text-primary, #1f2937); + margin-bottom: 0.5rem; + font-weight: 600; + color: #333333; font-size: 0.875rem; } -/* Input Fields */ -.tribe-events-community-details input[type="text"], -.tribe-events-community-details input[type="email"], -.tribe-events-community-details input[type="url"], -.tribe-events-community-details input[type="number"], -.tribe-events-community-details select, -.tribe-events-community-details textarea { +/* Input fields */ +.hvac-event-manage-wrapper .tribe-events-community-details input[type="text"], +.hvac-event-manage-wrapper .tribe-events-community-details input[type="email"], +.hvac-event-manage-wrapper .tribe-events-community-details input[type="url"], +.hvac-event-manage-wrapper .tribe-events-community-details input[type="number"], +.hvac-event-manage-wrapper .tribe-events-community-details input[type="date"], +.hvac-event-manage-wrapper .tribe-events-community-details input[type="time"], +.hvac-event-manage-wrapper .tribe-events-community-details select, +.hvac-event-manage-wrapper .tribe-events-community-details textarea { width: 100%; - padding: var(--hvac-spacing-sm, 0.75rem); - border: 1px solid var(--hvac-border-input, #d1d5db); - border-radius: var(--hvac-radius-sm, 6px); - font-size: 1rem; + padding: 0.5rem 0.75rem; + border: 1px solid #dddddd; + border-radius: 4px; + font-size: 0.875rem; + line-height: 1.5; transition: all 0.2s ease; - background: var(--hvac-white, #ffffff); + background: #ffffff; + box-sizing: border-box; } -/* Focus States */ +/* Focus states */ .tribe-events-community-details input:focus, .tribe-events-community-details select:focus, .tribe-events-community-details textarea:focus { outline: none; - border-color: var(--hvac-primary, #0274be); - box-shadow: 0 0 0 3px rgba(2, 116, 190, 0.1); + border-color: var(--hvac-primary, #0073aa); + box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); } -/* Event Title Field */ +/* Event title field - make it stand out */ #EventTitle, input[name="post_title"] { font-size: 1.125rem !important; font-weight: 500; - padding: var(--hvac-spacing-md, 1rem) !important; + padding: var(--hvac-spacing-3, 0.75rem) !important; } -/* Description Editor Container */ -.wp-editor-wrap { - border: 1px solid var(--hvac-border-input, #d1d5db); - border-radius: var(--hvac-radius-sm, 6px); - overflow: hidden; +/* Form sections headings */ +.tribe-section h3, +.tribe-events-community-section-title { + margin: 0 0 var(--hvac-spacing-md, 1rem); + font-size: 1.25rem; + color: var(--hvac-text, #333333); } -.wp-editor-container { - background: var(--hvac-white, #ffffff); +/* Submit button */ +.tribe-events-community-footer { + margin-top: var(--hvac-spacing-xl, 2rem); + padding-top: var(--hvac-spacing-lg, 1.5rem); + border-top: 1px solid var(--hvac-border, #e5e7eb); } -/* Date and Time Fields */ -.tribe-datetime-block { - display: flex; - align-items: center; - gap: var(--hvac-spacing-sm, 0.75rem); - flex-wrap: wrap; -} - -.tribe-datetime-block input { - flex: 1; - min-width: 150px; -} - -/* Venue and Organizer Sections */ -.tribe-events-community-details .venue-details, -.tribe-events-community-details .organizer-details { - background: var(--hvac-white, #ffffff); - padding: var(--hvac-spacing-md, 1rem); - border-radius: var(--hvac-radius-sm, 6px); - margin-top: var(--hvac-spacing-sm, 0.75rem); -} - -/* Submit Button */ .tribe-events-community-footer input[type="submit"], -.tribe-button-primary { - background: var(--hvac-primary, #0274be); - color: var(--hvac-white, #ffffff); - padding: var(--hvac-spacing-sm, 0.75rem) var(--hvac-spacing-xl, 2rem); +.tribe-button.tribe-button-primary { + background: var(--hvac-primary, #0073aa); + color: #ffffff; + padding: var(--hvac-spacing-3, 0.75rem) var(--hvac-spacing-5, 1.5rem); border: none; - border-radius: var(--hvac-radius-base, 8px); + border-radius: var(--hvac-radius-sm, 4px); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + display: inline-block; + text-decoration: none; +} + +.tribe-events-community-footer input[type="submit"]:hover, +.tribe-button.tribe-button-primary:hover { + background: var(--hvac-primary-dark, #005a87); + transform: translateY(-1px); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Secondary buttons */ +.tribe-button-secondary { + background: #f3f4f6; + color: var(--hvac-text, #333333); + padding: var(--hvac-spacing-3, 0.75rem) var(--hvac-spacing-5, 1.5rem); + border: 1px solid var(--hvac-border, #e5e7eb); + border-radius: var(--hvac-radius-sm, 4px); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-block; -} - -.tribe-events-community-footer input[type="submit"]:hover, -.tribe-button-primary:hover { - background: var(--hvac-primary-dark, #025a96); - transform: translateY(-1px); - box-shadow: var(--hvac-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1)); -} - -/* View Submitted Events Link */ -.view-events-link, -a.tribe-button-secondary { - background: var(--hvac-secondary, #54595f); - color: var(--hvac-white, #ffffff); - padding: var(--hvac-spacing-sm, 0.75rem) var(--hvac-spacing-lg, 1.5rem); text-decoration: none; - border-radius: var(--hvac-radius-base, 8px); - display: inline-block; - margin-left: var(--hvac-spacing-md, 1rem); - transition: all 0.2s ease; + margin-left: var(--hvac-spacing-sm, 0.75rem); } -/* Error Messages */ +.tribe-button-secondary:hover { + background: #e5e7eb; + border-color: #d1d5db; +} + +/* Error and success messages */ .tribe-events-community-notice, .tribe-events-notices { padding: var(--hvac-spacing-md, 1rem); @@ -164,193 +182,147 @@ a.tribe-button-secondary { .tribe-events-community-notice.tribe-events-community-error, .tribe-events-notices.tribe-events-notices-error { background: #fef2f2; - border-color: var(--hvac-error, #ef4444); + border-color: #ef4444; color: #991b1b; } .tribe-events-community-notice.tribe-events-community-success, .tribe-events-notices.tribe-events-notices-success { background: #f0fdf4; - border-color: var(--hvac-success, #4caf50); + border-color: #10b981; color: #166534; } -/* Responsive Design */ -@media (max-width: 768px) { - .tribe-community-events-content, - #tribe-community-events { - padding: var(--hvac-spacing-md, 1rem); - } - - .tribe-datetime-block { - flex-direction: column; - align-items: stretch; - } - - .tribe-datetime-block input { - width: 100%; - } - - .tribe-events-community-footer { - display: flex; - flex-direction: column; - gap: var(--hvac-spacing-sm, 0.75rem); - } - - .view-events-link, - a.tribe-button-secondary { - margin-left: 0; - text-align: center; - } +/* Date picker adjustments */ +.ui-datepicker { + font-size: 0.875rem; } -/* Accessibility */ -.tribe-events-community-details input:focus-visible, -.tribe-events-community-details select:focus-visible, -.tribe-events-community-details textarea:focus-visible { - outline: 2px solid var(--hvac-primary, #0274be); - outline-offset: 2px; +.ui-datepicker-trigger { + margin-left: var(--hvac-spacing-xs, 0.5rem); + cursor: pointer; } -/* IE11 Fallbacks */ -.tribe-community-events-content, -#tribe-community-events { - max-width: 1200px; /* Fallback for var() */ - padding: 2rem; /* Fallback for var() */ - background: #ffffff; /* Fallback for var() */ +/* TinyMCE editor */ +.wp-editor-wrap { + border: 1px solid var(--hvac-border, #dddddd); + border-radius: var(--hvac-radius-sm, 4px); + overflow: hidden; } -.tribe-events-community-footer input[type="submit"], -.tribe-button-primary { - background: #0274be; /* Fallback for var() */ - color: #ffffff; /* Fallback for var() */ -} - -/* Fix for TinyMCE Editor */ .wp-editor-area { width: 100% !important; min-height: 300px; font-family: inherit; } -/* Calendar Icon Fix */ -.ui-datepicker-trigger { - margin-left: var(--hvac-spacing-xs, 0.5rem); - cursor: pointer; -} - -/* Required Field Indicators */ +/* Required field indicators */ .required { - color: var(--hvac-error, #ef4444); + color: #ef4444; font-weight: bold; } -/* Event Management Page Header Navigation */ -.hvac-dashboard-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--hvac-spacing-xl, 2rem); - padding: var(--hvac-spacing-lg, 1.5rem) 0; - border-bottom: 2px solid var(--hvac-border, #e5e7eb); - flex-wrap: wrap; - gap: var(--hvac-spacing-lg, 1.5rem); +/* Override theme constraints to ensure proper layout */ +.hvac-event-manage-wrapper { + /* Force full width within container */ + width: 100% !important; + max-width: 1200px !important; + margin-left: auto !important; + margin-right: auto !important; + padding: 20px !important; + box-sizing: border-box !important; } -.hvac-dashboard-header .entry-title { - margin: 0; - font-size: 2.5em; - color: var(--hvac-text-primary, #1f2937); +/* Ensure the ast-container doesn't constrain our layout */ +.ast-container .hvac-event-manage-wrapper { + padding-left: 20px !important; + padding-right: 20px !important; } -.hvac-dashboard-nav { - display: flex; - gap: var(--hvac-spacing-sm, 0.75rem); - flex-wrap: wrap; - align-items: center; -} - -.hvac-dashboard-nav .ast-button { - padding: var(--hvac-spacing-sm, 0.75rem) var(--hvac-spacing-lg, 1.5rem); - font-size: 14px; +/* Fix navigation buttons */ +.hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button { + padding: 0.75rem 1.5rem; + border-radius: 4px; + font-size: 0.875rem; + font-weight: 500; text-decoration: none; - border-radius: var(--hvac-radius-base, 8px); - transition: all 0.3s ease; - border: none; - cursor: pointer; + transition: all 0.2s ease; display: inline-block; - line-height: 1.5; + line-height: 1; + border: 1px solid transparent; } -.hvac-dashboard-nav .ast-button-secondary { - background-color: var(--hvac-background, #f9fafb); - color: var(--hvac-text-primary, #1f2937); - border: 1px solid var(--hvac-border, #e5e7eb); +.hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button-secondary { + background: #f3f4f6; + color: #374151; + border-color: #e5e7eb; } -.hvac-dashboard-nav .ast-button-secondary:hover { - background-color: var(--hvac-border, #e5e7eb); - color: var(--hvac-text-primary, #1f2937); +.hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button-secondary:hover { + background: #e5e7eb; + color: #1f2937; + border-color: #d1d5db; + transform: translateY(-1px); } -.hvac-dashboard-nav .ast-button-primary { - background-color: var(--hvac-primary, #0274be); - color: var(--hvac-white, #ffffff); +/* Hide any duplicate page titles from theme */ +body.page-id-5344 .entry-header { + display: none !important; } -.hvac-dashboard-nav .ast-button-primary:hover { - background-color: var(--hvac-primary-dark, #005a9e); - color: var(--hvac-white, #ffffff); -} - -/* Event Management Header Content */ -.hvac-event-manage-header { - margin-bottom: var(--hvac-spacing-xl, 2rem); - padding: var(--hvac-spacing-lg, 1.5rem); - background: var(--hvac-background, #f9fafb); - border-radius: var(--hvac-radius-base, 8px); - border: 1px solid var(--hvac-border, #e5e7eb); -} - -.hvac-event-manage-header h2 { - margin: 0 0 var(--hvac-spacing-md, 1rem); - color: var(--hvac-text-primary, #1f2937); -} - -.hvac-event-manage-tips { - margin-top: var(--hvac-spacing-lg, 1.5rem); -} - -.hvac-event-manage-tips h3 { - margin: 0 0 var(--hvac-spacing-sm, 0.75rem); - color: var(--hvac-text-primary, #1f2937); - font-size: 1.2em; -} - -.hvac-event-manage-tips ul { - list-style: disc; - padding-left: var(--hvac-spacing-lg, 1.5rem); +/* Ensure tribe forms don't have extra spacing */ +.hvac-event-manage-wrapper form.tribe-events-community-form { margin: 0; + padding: 0; } -.hvac-event-manage-tips li { - margin-bottom: var(--hvac-spacing-xs, 0.5rem); - color: var(--hvac-text-secondary, #6b7280); +/* Fix any theme-added padding/margins */ +body.page-id-5344 #primary { + padding: 0; } -/* Responsive Header */ +body.page-id-5344 .site-content { + padding-top: 2rem; + padding-bottom: 2rem; +} + +/* Responsive adjustments */ @media (max-width: 768px) { - .hvac-dashboard-header { + .hvac-event-manage-wrapper { + padding: 1rem !important; + } + + .hvac-event-manage-wrapper .hvac-dashboard-header { flex-direction: column; align-items: flex-start; } - .hvac-dashboard-nav { + .hvac-event-manage-wrapper .hvac-dashboard-nav { width: 100%; + margin-top: 1rem; } - .hvac-dashboard-nav .ast-button { - flex: 1; + .hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button { + display: block; + width: 100%; + margin-bottom: 0.75rem; + text-align: center; + } + + .hvac-event-manage-wrapper .tribe-community-events-content, + .hvac-event-manage-wrapper #tribe-community-events { + padding: 1rem; + } + + .hvac-event-manage-wrapper .tribe-events-community-footer { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .hvac-event-manage-wrapper .tribe-button-secondary { + margin-left: 0; + width: 100%; text-align: center; } } \ No newline at end of file diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index b4aad625..cc3f4fef 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -166,6 +166,30 @@ hvac-community-events/ - `/training-login/` - Login page - `/trainer/registration/` - Public registration +## CSS Architecture + +### Stylesheet Organization +- **hvac-dashboard.css** - Base dashboard styles, stat cards, tables +- **hvac-dashboard-enhanced.css** - Advanced dashboard features +- **hvac-event-manage.css** - Event creation/editing form styles +- **hvac-layout.css** - Layout containers and responsive grids +- **hvac-common.css** - Shared components and utilities +- **hvac-page-templates.css** - Page-specific template styles + +### CSS Methodology +- **Scoped Selectors**: All styles scoped to prevent theme conflicts + - Example: `.hvac-event-manage-wrapper .tribe-section` +- **CSS Variables**: Used for consistent theming + - `--hvac-primary`, `--hvac-spacing-*`, `--hvac-radius-*` +- **Mobile-First**: Responsive breakpoints at 768px +- **BEM-like Naming**: Component-based class naming + +### Theme Compatibility +- Styles use high specificity to override theme defaults +- Container max-width enforced at 1200px +- Consistent 20px padding on all pages +- Theme layout constraints overridden where necessary + ## Security - Capability-based access control diff --git a/includes/class-hvac-community-events.php b/includes/class-hvac-community-events.php index 834198b2..c7441a3f 100644 --- a/includes/class-hvac-community-events.php +++ b/includes/class-hvac-community-events.php @@ -795,6 +795,11 @@ class HVAC_Community_Events { $custom_template = HVAC_PLUGIN_DIR . 'templates/template-event-summary.php'; } + // Check for manage-event page + if (is_page('trainer/event/manage')) { + $custom_template = HVAC_PLUGIN_DIR . 'templates/page-manage-event.php'; + } + // Check for email-attendees page if (is_page('trainer/email-attendees')) { $custom_template = HVAC_PLUGIN_DIR . 'templates/email-attendees/template-email-attendees.php'; diff --git a/includes/class-hvac-event-manage-header.php b/includes/class-hvac-event-manage-header.php index 2798f318..ee6ecc44 100644 --- a/includes/class-hvac-event-manage-header.php +++ b/includes/class-hvac-event-manage-header.php @@ -27,14 +27,9 @@ class HVAC_Event_Manage_Header { * Conditionally add the header hook */ public function maybe_add_header_hook() { - // Check if we're using the page template approach - // If the page template is being used, it likely already has header content - $current_path = trim(parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH), '/'); - - // Only add the header for the tribe shortcode, not for our custom page template - if ($current_path !== 'trainer/event/manage' && $current_path !== 'trainer/event/manage/') { - add_action('tribe_events_community_before_event_submission_page', array($this, 'render_header')); - } + // Add header before the event submission page + // Temporarily disabled to debug duplicate header issue + // add_action('tribe_events_community_before_event_submission_page', array($this, 'render_header')); } @@ -42,6 +37,7 @@ class HVAC_Event_Manage_Header { * Render the header */ public function render_header() { + // Always show the navigation header echo $this->get_header_html(); } @@ -62,20 +58,6 @@ class HVAC_Event_Manage_Header { -
Use this form to create new training events or edit existing ones. Please fill out all required fields to ensure your event is properly listed and attendees receive accurate information.
-Use this form to create new training events or edit existing ones. Please fill out all required fields to ensure your event is properly listed and attendees receive accurate information.
+