diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-attendee-profile.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-attendee-profile.css index ab2dd614..df8d920c 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-attendee-profile.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-attendee-profile.css @@ -1,5 +1,6 @@ /** * HVAC Attendee Profile Styles + * Harmonized with existing plugin styles */ .hvac-attendee-profile { @@ -11,240 +12,151 @@ /* Profile Header */ .hvac-profile-header { display: flex; + justify-content: space-between; align-items: center; - gap: 30px; - background: #fff; - padding: 30px; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - margin-bottom: 30px; -} - -.hvac-profile-avatar { - flex-shrink: 0; -} - -.hvac-profile-avatar img { - width: 120px; - height: 120px; - border-radius: 50%; - object-fit: cover; - border: 4px solid #f0f4f8; -} - -.hvac-avatar-placeholder { - width: 120px; - height: 120px; - border-radius: 50%; - background: #f0f4f8; - display: flex; - align-items: center; - justify-content: center; - color: #8b95a1; -} - -.hvac-avatar-placeholder i { - font-size: 80px; + margin-bottom: 2em; + padding-bottom: 1em; + border-bottom: 1px solid #e0e0e0; + flex-wrap: wrap; } .hvac-profile-title h1 { - margin: 0 0 10px 0; - font-size: 32px; - color: #1e293b; + margin: 0 0 0.5em 0; + color: #333; + font-size: 1.8rem; font-weight: 600; } -.hvac-profile-email { - margin: 0; - color: #64748b; - font-size: 16px; +.hvac-profile-subtitle { + color: #666; + font-size: 1.1rem; + font-weight: 500; + display: block; } -/* Statistics Section */ -.hvac-stats-section { - margin-bottom: 40px; -} - -.hvac-stats-section h2 { - font-size: 24px; - color: #1e293b; - margin-bottom: 20px; +.hvac-profile-actions { display: flex; - align-items: center; gap: 10px; + flex-wrap: wrap; } -.hvac-stats-section h2 i { - color: #007cba; - font-size: 20px; +.hvac-profile-actions a, +.hvac-profile-actions button { + min-width: 120px; + text-align: center; } -.hvac-stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; +/* Statistics Row - Matching Dashboard Styles */ +.hvac-stats-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: -10px; + margin-bottom: 2em; + justify-content: space-between; + align-items: stretch; +} + +.hvac-stat-col { + flex: 1; + min-width: 160px; + padding: 10px; + margin-bottom: 0.5em; } .hvac-stat-card { - background: #fff; - border-radius: 12px; - padding: 25px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - display: flex; - align-items: center; - gap: 20px; - transition: transform 0.2s ease; + border: 1px solid #e0e0e0; + border-radius: 5px; + padding: 1.5em; + background: white; + text-align: center; + width: 100%; + flex-grow: 1; + height: 100%; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + transition: transform 0.2s, box-shadow 0.2s; } .hvac-stat-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 6px rgba(0,0,0,0.15); } -.hvac-stat-icon { - width: 60px; - height: 60px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - flex-shrink: 0; -} - -.hvac-stat-card:nth-child(1) .hvac-stat-icon { - background: #e0f2fe; - color: #0284c7; -} - -.hvac-stat-card:nth-child(2) .hvac-stat-icon { - background: #f0fdf4; - color: #16a34a; -} - -.hvac-stat-card:nth-child(3) .hvac-stat-icon { - background: #fef3c7; - color: #d97706; -} - -.hvac-stat-card:nth-child(4) .hvac-stat-icon { - background: #fce7f3; - color: #db2777; -} - -.hvac-stat-content { - flex: 1; -} - -.hvac-stat-value { - font-size: 32px; - font-weight: 700; - color: #1e293b; - line-height: 1; - margin-bottom: 5px; -} - -.hvac-stat-label { - color: #64748b; - font-size: 14px; - font-weight: 500; -} - -/* Profile Information Section */ -.hvac-profile-section { - background: #fff; - border-radius: 12px; - padding: 30px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - margin-bottom: 40px; -} - -.hvac-profile-section h2 { - font-size: 24px; - color: #1e293b; - margin-bottom: 25px; - display: flex; - align-items: center; - gap: 10px; -} - -.hvac-profile-section h2 i { +.hvac-stat-card h3 { + margin-top: 0; + margin-bottom: 0.5em; + font-size: 1.1em; color: #007cba; - font-size: 20px; + font-weight: 600; } -.hvac-profile-info { - display: flex; - flex-direction: column; - gap: 20px; +.stat-value { + font-size: 2.4em; + font-weight: 700; + color: #333; + line-height: 1; } -.hvac-info-row { - display: flex; - align-items: center; - padding: 15px 0; - border-bottom: 1px solid #f1f5f9; +/* Content Sections */ +.hvac-content-section { + margin-bottom: 2em; + padding: 1.5em; + border: 1px solid #e0e0e0; + border-radius: 5px; + background-color: white; + box-shadow: 0 1px 3px rgba(0,0,0,0.05); } -.hvac-info-row:last-child { +.hvac-content-section h2 { + margin-top: 0; + margin-bottom: 1em; + font-size: 1.4rem; + color: #333; + padding-bottom: 0.5em; + border-bottom: 1px solid #e0e0e0; +} + +/* Info Table */ +.hvac-info-table { + overflow-x: auto; +} + +.hvac-table { + width: 100%; + border-collapse: collapse; +} + +.hvac-table td { + padding: 0.75em 1em; + border-bottom: 1px solid #e0e0e0; +} + +.hvac-table tr:last-child td { border-bottom: none; } -.hvac-info-label { - flex: 0 0 200px; - color: #64748b; - font-weight: 500; - display: flex; - align-items: center; - gap: 10px; +.hvac-label { + font-weight: 600; + color: #666; + width: 150px; } -.hvac-info-label i { - width: 20px; - text-align: center; - color: #94a3b8; -} - -.hvac-info-value { - flex: 1; - color: #1e293b; - font-weight: 500; -} - -.hvac-info-value a { +.hvac-table a { color: #007cba; text-decoration: none; } -.hvac-info-value a:hover { +.hvac-table a:hover { text-decoration: underline; } -/* Timeline Section */ -.hvac-timeline-section { - margin-bottom: 40px; -} - -.hvac-timeline-section h2 { - font-size: 24px; - color: #1e293b; - margin-bottom: 25px; - display: flex; - align-items: center; - gap: 10px; -} - -.hvac-timeline-section h2 i { - color: #007cba; - font-size: 20px; -} - +/* Timeline */ .hvac-no-activity { text-align: center; - color: #64748b; - padding: 40px; - background: #f8fafc; - border-radius: 8px; + color: #666; + padding: 2em; + background: #f9f9f9; + border-radius: 5px; } .hvac-timeline { @@ -254,28 +166,25 @@ .hvac-timeline-item { position: relative; - margin-bottom: 40px; + margin-bottom: 2em; display: flex; align-items: flex-start; - gap: 30px; + gap: 20px; } .hvac-timeline-date { flex: 0 0 150px; text-align: right; padding-top: 5px; -} - -.hvac-timeline-date { font-weight: 600; - color: #1e293b; + color: #333; font-size: 14px; } .hvac-timeline-time { display: block; font-weight: 400; - color: #94a3b8; + color: #999; font-size: 12px; margin-top: 2px; } @@ -305,22 +214,22 @@ top: 40px; width: 2px; height: calc(100% + 20px); - background: #e2e8f0; + background: #e0e0e0; z-index: 1; } .hvac-timeline-content { flex: 1; background: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + padding: 1.5em; + border-radius: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-left: 40px; } .hvac-timeline-content h4 { - margin: 0 0 10px 0; - color: #1e293b; + margin: 0 0 0.5em 0; + color: #333; font-size: 16px; font-weight: 600; } @@ -335,8 +244,8 @@ } .hvac-checkin-status.checked-in { - background: #dcfce7; - color: #15803d; + background: #d4edda; + color: #155724; } .hvac-checkin-status.not-checked-in { @@ -347,8 +256,8 @@ .hvac-certificate-number { display: inline-block; padding: 4px 12px; - background: #fef3c7; - color: #a16207; + background: #fff3cd; + color: #856404; border-radius: 20px; font-size: 12px; font-weight: 500; @@ -373,148 +282,86 @@ margin-left: 5px; } -/* Timeline Chart Section */ -.hvac-timeline-chart-section { - background: #fff; - border-radius: 12px; - padding: 30px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - margin-bottom: 40px; -} - -.hvac-timeline-chart-section h2 { - font-size: 24px; - color: #1e293b; - margin-bottom: 25px; - display: flex; - align-items: center; - gap: 10px; -} - -.hvac-timeline-chart-section h2 i { +/* Icon for profile links */ +.hvac-attendee-profile-icon { + display: inline-block; + margin-left: 10px; color: #007cba; - font-size: 20px; -} - -.hvac-chart-container { - position: relative; - height: 400px; -} - -/* Action Buttons */ -.hvac-profile-actions { - display: flex; - gap: 15px; - justify-content: center; - margin-top: 40px; -} - -.hvac-button { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 24px; - border-radius: 8px; - font-weight: 500; text-decoration: none; - transition: all 0.2s ease; - border: none; - cursor: pointer; font-size: 16px; + vertical-align: middle; } -.hvac-button.hvac-primary { - background: #007cba; - color: #fff; -} - -.hvac-button.hvac-primary:hover { - background: #005a87; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3); -} - -.hvac-button.hvac-secondary { - background: #f3f4f6; - color: #374151; -} - -.hvac-button.hvac-secondary:hover { - background: #e5e7eb; -} - -.hvac-button.hvac-ghost { - background: transparent; - color: #6b7280; - border: 1px solid #e5e7eb; -} - -.hvac-button.hvac-ghost:hover { - background: #f9fafb; +.hvac-attendee-profile-icon:hover { + color: #005a87; } /* Responsive Design */ @media (max-width: 768px) { .hvac-profile-header { - flex-direction: column; - text-align: center; - } - - .hvac-stats-grid { - grid-template-columns: 1fr; - } - - .hvac-info-row { flex-direction: column; align-items: flex-start; - gap: 5px; - } - - .hvac-info-label { - flex: unset; - } - - .hvac-timeline-item { - flex-direction: column; - padding-left: 50px; - } - - .hvac-timeline-date { - text-align: left; - flex: unset; - order: 2; - margin-top: 10px; - } - - .hvac-timeline-marker { - left: 0; - } - - .hvac-timeline-connector { - left: 19px; - } - - .hvac-timeline-content { - margin-left: 0; + gap: 1em; } .hvac-profile-actions { + width: 100%; + } + + .hvac-profile-actions a, + .hvac-profile-actions button { + flex: 1; + min-width: auto; + } + + .hvac-stats-row { flex-direction: column; } - .hvac-button { + .hvac-stat-col { width: 100%; - justify-content: center; + padding: 5px 0; + } + + .hvac-timeline { + padding-left: 20px; + } + + .hvac-timeline-date { + flex: 0 0 100px; + font-size: 12px; + } + + .hvac-timeline-marker { + left: 118px; + width: 30px; + height: 30px; + } + + .hvac-timeline-connector { + left: 132px; + } + + .hvac-timeline-content { + margin-left: 20px; + padding: 1em; } } /* Print Styles */ @media print { - .hvac-profile-actions { - display: none; + .hvac-profile-actions, + .ast-button { + display: none !important; } - .hvac-timeline-chart-section { + .hvac-attendee-profile { + padding: 0; + } + + .hvac-content-section { + box-shadow: none; + border: 1px solid #ddd; page-break-inside: avoid; } diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-attendee-profile.js b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-attendee-profile.js index 3d2f20aa..9028affb 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-attendee-profile.js +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-attendee-profile.js @@ -1,288 +1,51 @@ /** * HVAC Attendee Profile JavaScript + * Handles timeline animations and interactions */ -(function($) { +jQuery(document).ready(function($) { 'use strict'; - - $(document).ready(function() { - // Initialize timeline chart if data exists - if (typeof hvacTimelineData !== 'undefined' && hvacTimelineData.length > 0) { - initializeTimelineChart(); - } - - // Add smooth scrolling for timeline - smoothScrollTimeline(); - - // Initialize tooltips - initializeTooltips(); + + // Animate timeline items on scroll + function animateTimeline() { + $('.hvac-timeline-item').each(function() { + var $this = $(this); + var elementTop = $this.offset().top; + var elementBottom = elementTop + $this.outerHeight(); + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + + if (elementBottom > viewportTop && elementTop < viewportBottom) { + $this.addClass('hvac-timeline-visible'); + } + }); + } + + // Initial animation check + animateTimeline(); + + // Animate on scroll + $(window).on('scroll', animateTimeline); + + // Print functionality + $('.hvac-button[onclick*="print"]').on('click', function(e) { + e.preventDefault(); + window.print(); }); - - /** - * Initialize the timeline chart using Chart.js - */ - function initializeTimelineChart() { - const ctx = document.getElementById('hvac-timeline-chart'); - if (!ctx) return; - - // Process timeline data for the chart - const chartData = processTimelineData(); - - // Create the chart - new Chart(ctx, { - type: 'line', - data: { - labels: chartData.labels, - datasets: [ - { - label: 'Registrations', - data: chartData.registrations, - borderColor: '#007cba', - backgroundColor: 'rgba(0, 124, 186, 0.1)', - borderWidth: 2, - pointRadius: 4, - pointHoverRadius: 6, - tension: 0.4 - }, - { - label: 'Events Attended', - data: chartData.attended, - borderColor: '#28a745', - backgroundColor: 'rgba(40, 167, 69, 0.1)', - borderWidth: 2, - pointRadius: 4, - pointHoverRadius: 6, - tension: 0.4 - }, - { - label: 'Certificates Earned', - data: chartData.certificates, - borderColor: '#ffc107', - backgroundColor: 'rgba(255, 193, 7, 0.1)', - borderWidth: 2, - pointRadius: 4, - pointHoverRadius: 6, - tension: 0.4 - } - ] - }, - options: { - responsive: true, - maintainAspectRatio: false, - interaction: { - mode: 'index', - intersect: false - }, - plugins: { - legend: { - position: 'top', - labels: { - usePointStyle: true, - padding: 15, - font: { - size: 14 - } - } - }, - tooltip: { - backgroundColor: 'rgba(0, 0, 0, 0.8)', - titleFont: { - size: 14 - }, - bodyFont: { - size: 13 - }, - padding: 12, - cornerRadius: 8, - displayColors: true, - callbacks: { - title: function(tooltipItems) { - return tooltipItems[0].label; - } - } - } - }, - scales: { - x: { - display: true, - title: { - display: true, - text: 'Month', - font: { - size: 14 - } - }, - grid: { - display: false - } - }, - y: { - display: true, - title: { - display: true, - text: 'Count', - font: { - size: 14 - } - }, - beginAtZero: true, - ticks: { - stepSize: 1, - precision: 0 - }, - grid: { - borderDash: [5, 5] - } - } - } - } - }); - } - - /** - * Process timeline data for chart display - */ - function processTimelineData() { - // Group events by month - const monthlyData = {}; - - hvacTimelineData.forEach(function(event) { - const date = new Date(event.date); - const monthKey = date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0'); - - if (!monthlyData[monthKey]) { - monthlyData[monthKey] = { - registrations: 0, - attended: 0, - certificates: 0 - }; - } - - switch(event.type) { - case 'registration': - monthlyData[monthKey].registrations++; - break; - case 'event': - if (event.checked_in) { - monthlyData[monthKey].attended++; - } - break; - case 'certificate': - monthlyData[monthKey].certificates++; - break; - } - }); - - // Sort months and create arrays for chart - const sortedMonths = Object.keys(monthlyData).sort(); - const labels = []; - const registrations = []; - const attended = []; - const certificates = []; - - // Get last 12 months of data - const lastMonths = sortedMonths.slice(-12); - - lastMonths.forEach(function(monthKey) { - const [year, month] = monthKey.split('-'); - const date = new Date(year, month - 1); - labels.push(date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })); - - registrations.push(monthlyData[monthKey].registrations); - attended.push(monthlyData[monthKey].attended); - certificates.push(monthlyData[monthKey].certificates); - }); - - return { - labels: labels, - registrations: registrations, - attended: attended, - certificates: certificates - }; - } - - /** - * Add smooth scrolling to timeline - */ - function smoothScrollTimeline() { - // Add hover effect to timeline items - $('.hvac-timeline-item').on('mouseenter', function() { - $(this).find('.hvac-timeline-content').addClass('hover'); - }).on('mouseleave', function() { - $(this).find('.hvac-timeline-content').removeClass('hover'); - }); - - // Add animation on scroll - const observer = new IntersectionObserver(function(entries) { - entries.forEach(function(entry) { - if (entry.isIntersecting) { - entry.target.classList.add('visible'); - } - }); - }, { - threshold: 0.1 - }); - - document.querySelectorAll('.hvac-timeline-item').forEach(function(item) { - observer.observe(item); - }); - } - - /** - * Initialize tooltips - */ - function initializeTooltips() { - // Add tooltips to stat cards - $('.hvac-stat-card').each(function() { - const label = $(this).find('.hvac-stat-label').text(); - $(this).attr('title', 'View ' + label + ' details'); - }); - - // Add tooltips to timeline markers - $('.hvac-timeline-marker').each(function() { - const item = $(this).closest('.hvac-timeline-item'); - const type = item.data('type'); - let tooltip = ''; - - switch(type) { - case 'registration': - tooltip = 'Event Registration'; - break; - case 'event': - tooltip = 'Event Attendance'; - break; - case 'certificate': - tooltip = 'Certificate Earned'; - break; - } - - $(this).attr('title', tooltip); - }); - } - - // Add CSS for animations - const style = document.createElement('style'); - style.innerHTML = ` - .hvac-timeline-item { - opacity: 0; - transform: translateY(20px); - transition: opacity 0.5s ease, transform 0.5s ease; + + // Smooth scroll for timeline + $('.hvac-timeline-item').on('click', '.hvac-event-link', function(e) { + // Allow default link behavior but add tracking if needed + console.log('Event link clicked:', $(this).attr('href')); + }); + + // Add hover effects to timeline items + $('.hvac-timeline-item').hover( + function() { + $(this).find('.hvac-timeline-content').addClass('hvac-timeline-hover'); + }, + function() { + $(this).find('.hvac-timeline-content').removeClass('hvac-timeline-hover'); } - - .hvac-timeline-item.visible { - opacity: 1; - transform: translateY(0); - } - - .hvac-timeline-content { - transition: box-shadow 0.3s ease, transform 0.3s ease; - } - - .hvac-timeline-content.hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); - transform: translateX(5px); - } - `; - document.head.appendChild(style); - -})(jQuery); \ No newline at end of file + ); +}); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/class-attendee-profile.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/class-attendee-profile.php index 7fc82dd1..461d597b 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/class-attendee-profile.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/class-attendee-profile.php @@ -60,15 +60,6 @@ class HVAC_Attendee_Profile { return; } - // Enqueue Chart.js for timeline visualization - wp_enqueue_script( - 'chartjs', - 'https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js', - array(), - '3.9.1', - true - ); - // Enqueue custom styles and scripts wp_enqueue_style( 'hvac-attendee-profile', @@ -80,7 +71,7 @@ class HVAC_Attendee_Profile { wp_enqueue_script( 'hvac-attendee-profile', HVAC_CE_PLUGIN_URL . 'assets/js/hvac-attendee-profile.js', - array('jquery', 'chartjs'), + array('jquery'), HVAC_CE_VERSION, true ); diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/attendee/template-attendee-profile.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/attendee/template-attendee-profile.php index 08768d25..91fe42ac 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/attendee/template-attendee-profile.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/attendee/template-attendee-profile.php @@ -19,137 +19,93 @@ $timeline = $attendee_data['timeline'];
- +
-
- - <?php echo esc_attr($profile['name']); ?> - -
- -
- -
-

-

+

Attendee Profile

+ +
+
+ + Email Attendee + + + + Back +
-
-

- - Activity Summary -

-
+
+
-
- -
-
-
-
Purchases Made
-
+

Total Purchases

+
- +
+
-
- -
-
-
-
Events Registered
-
+

Events Registered

+
- +
+
-
- -
-
-
-
Events Attended
-
+

Events Attended

+
- +
+
-
- -
-
-
-
Certificates Earned
-
+

Certificates Earned

+
-
-

- - Profile Information -

-
-
-
- - Name -
-
-
- -
-
- - Email -
-
- -
-
- - -
-
- - Phone -
-
- -
-
- - - -
-
- - Company -
-
-
- - - -
-
- - State -
-
-
- +
+

Contact Information

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name
Email
Phone
Company
State
-
-

- - Activity Timeline -

+
+

Activity Timeline

No activity recorded for this attendee.

@@ -190,33 +146,4 @@ $timeline = $attendee_data['timeline'];
- - -
-

- - Activity Over Time -

-
- -
-
- - -
- - Email Attendee - - - - Back - -
-
- - \ No newline at end of file +
\ No newline at end of file