refactor: Simplify attendee profile page UI/UX
## Summary • Removed duplicate profile information section - now only one contact info section • Removed "Activity Over Time" chart and Chart.js dependency • Harmonized styling with existing plugin UI patterns ## Changes - Consolidated profile header with page title and action buttons - Used consistent table layout for contact information - Applied dashboard-style statistics cards - Removed Chart.js enqueue and JavaScript functionality - Updated CSS to match plugin's existing styling patterns - Simplified JavaScript to handle only timeline animations ## UI Improvements - Cleaner, more focused layout without redundant information - Better responsive design for mobile devices - Consistent styling with other plugin pages - Improved print layout 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
bengizmo
parent
8c030d4410
commit
bcc0a082d3
4 changed files with 280 additions and 752 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
// 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();
|
||||
|
||||
// Add smooth scrolling for timeline
|
||||
smoothScrollTimeline();
|
||||
|
||||
// Initialize tooltips
|
||||
initializeTooltips();
|
||||
});
|
||||
|
||||
/**
|
||||
* 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]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (elementBottom > viewportTop && elementTop < viewportBottom) {
|
||||
$this.addClass('hvac-timeline-visible');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Process timeline data for chart display
|
||||
*/
|
||||
function processTimelineData() {
|
||||
// Group events by month
|
||||
const monthlyData = {};
|
||||
// Initial animation check
|
||||
animateTimeline();
|
||||
|
||||
hvacTimelineData.forEach(function(event) {
|
||||
const date = new Date(event.date);
|
||||
const monthKey = date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
|
||||
// Animate on scroll
|
||||
$(window).on('scroll', animateTimeline);
|
||||
|
||||
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;
|
||||
}
|
||||
// Print functionality
|
||||
$('.hvac-button[onclick*="print"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.print();
|
||||
});
|
||||
|
||||
// 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);
|
||||
// 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'));
|
||||
});
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
registrations: registrations,
|
||||
attended: attended,
|
||||
certificates: certificates
|
||||
};
|
||||
// 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');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
.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);
|
||||
);
|
||||
});
|
||||
|
|
@ -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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,137 +19,93 @@ $timeline = $attendee_data['timeline'];
|
|||
|
||||
<div class="hvac-attendee-profile">
|
||||
|
||||
<!-- Profile Header -->
|
||||
<!-- Page Header -->
|
||||
<div class="hvac-profile-header">
|
||||
<div class="hvac-profile-avatar">
|
||||
<?php if (!empty($profile['avatar_url'])): ?>
|
||||
<img src="<?php echo esc_url($profile['avatar_url']); ?>" alt="<?php echo esc_attr($profile['name']); ?>">
|
||||
<?php else: ?>
|
||||
<div class="hvac-avatar-placeholder">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="hvac-profile-title">
|
||||
<h1><?php echo esc_html($profile['name']); ?></h1>
|
||||
<p class="hvac-profile-email"><?php echo esc_html($profile['email']); ?></p>
|
||||
<h1>Attendee Profile</h1>
|
||||
<span class="hvac-profile-subtitle"><?php echo esc_html($profile['name']); ?></span>
|
||||
</div>
|
||||
<div class="hvac-profile-actions">
|
||||
<a href="mailto:<?php echo esc_attr($profile['email']); ?>" class="ast-button ast-button-primary">
|
||||
<i class="fas fa-envelope"></i> Email Attendee
|
||||
</a>
|
||||
<button class="ast-button ast-button-secondary" onclick="window.print()">
|
||||
<i class="fas fa-print"></i> Print
|
||||
</button>
|
||||
<a href="<?php echo esc_url(wp_get_referer() ?: home_url('/hvac-dashboard/')); ?>" class="ast-button ast-button-secondary">
|
||||
<i class="fas fa-arrow-left"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Section -->
|
||||
<div class="hvac-stats-section">
|
||||
<h2>
|
||||
<i class="fas fa-chart-line"></i>
|
||||
Activity Summary
|
||||
</h2>
|
||||
<div class="hvac-stats-grid">
|
||||
<div class="hvac-stats-row">
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<div class="hvac-stat-icon">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
<div class="hvac-stat-content">
|
||||
<div class="hvac-stat-value"><?php echo number_format($stats['total_purchases']); ?></div>
|
||||
<div class="hvac-stat-label">Purchases Made</div>
|
||||
<h3>Total Purchases</h3>
|
||||
<div class="stat-value"><?php echo number_format($stats['total_purchases']); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<div class="hvac-stat-icon">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<div class="hvac-stat-content">
|
||||
<div class="hvac-stat-value"><?php echo number_format($stats['events_registered']); ?></div>
|
||||
<div class="hvac-stat-label">Events Registered</div>
|
||||
<h3>Events Registered</h3>
|
||||
<div class="stat-value"><?php echo number_format($stats['events_registered']); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<div class="hvac-stat-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="hvac-stat-content">
|
||||
<div class="hvac-stat-value"><?php echo number_format($stats['events_checked_in']); ?></div>
|
||||
<div class="hvac-stat-label">Events Attended</div>
|
||||
<h3>Events Attended</h3>
|
||||
<div class="stat-value"><?php echo number_format($stats['events_checked_in']); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<div class="hvac-stat-icon">
|
||||
<i class="fas fa-certificate"></i>
|
||||
</div>
|
||||
<div class="hvac-stat-content">
|
||||
<div class="hvac-stat-value"><?php echo number_format($stats['certificates_earned']); ?></div>
|
||||
<div class="hvac-stat-label">Certificates Earned</div>
|
||||
</div>
|
||||
<h3>Certificates Earned</h3>
|
||||
<div class="stat-value"><?php echo number_format($stats['certificates_earned']); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Information Section -->
|
||||
<div class="hvac-profile-section">
|
||||
<h2>
|
||||
<i class="fas fa-user"></i>
|
||||
Profile Information
|
||||
</h2>
|
||||
<div class="hvac-profile-info">
|
||||
<div class="hvac-info-row">
|
||||
<div class="hvac-info-label">
|
||||
<i class="fas fa-user"></i>
|
||||
Name
|
||||
</div>
|
||||
<div class="hvac-info-value"><?php echo esc_html($profile['name']); ?></div>
|
||||
</div>
|
||||
|
||||
<div class="hvac-info-row">
|
||||
<div class="hvac-info-label">
|
||||
<i class="fas fa-envelope"></i>
|
||||
Email
|
||||
</div>
|
||||
<div class="hvac-info-value">
|
||||
<a href="mailto:<?php echo esc_attr($profile['email']); ?>"><?php echo esc_html($profile['email']); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hvac-content-section">
|
||||
<h2>Contact Information</h2>
|
||||
<div class="hvac-info-table">
|
||||
<table class="hvac-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="hvac-label">Name</td>
|
||||
<td><?php echo esc_html($profile['name']); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="hvac-label">Email</td>
|
||||
<td><a href="mailto:<?php echo esc_attr($profile['email']); ?>"><?php echo esc_html($profile['email']); ?></a></td>
|
||||
</tr>
|
||||
<?php if (!empty($profile['phone'])): ?>
|
||||
<div class="hvac-info-row">
|
||||
<div class="hvac-info-label">
|
||||
<i class="fas fa-phone"></i>
|
||||
Phone
|
||||
</div>
|
||||
<div class="hvac-info-value">
|
||||
<a href="tel:<?php echo esc_attr($profile['phone']); ?>"><?php echo esc_html($profile['phone']); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="hvac-label">Phone</td>
|
||||
<td><a href="tel:<?php echo esc_attr($profile['phone']); ?>"><?php echo esc_html($profile['phone']); ?></a></td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($profile['company'])): ?>
|
||||
<div class="hvac-info-row">
|
||||
<div class="hvac-info-label">
|
||||
<i class="fas fa-building"></i>
|
||||
Company
|
||||
</div>
|
||||
<div class="hvac-info-value"><?php echo esc_html($profile['company']); ?></div>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="hvac-label">Company</td>
|
||||
<td><?php echo esc_html($profile['company']); ?></td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($profile['state'])): ?>
|
||||
<div class="hvac-info-row">
|
||||
<div class="hvac-info-label">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
State
|
||||
</div>
|
||||
<div class="hvac-info-value"><?php echo esc_html($profile['state']); ?></div>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="hvac-label">State</td>
|
||||
<td><?php echo esc_html($profile['state']); ?></td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="hvac-timeline-section">
|
||||
<h2>
|
||||
<i class="fas fa-history"></i>
|
||||
Activity Timeline
|
||||
</h2>
|
||||
<div class="hvac-content-section">
|
||||
<h2>Activity Timeline</h2>
|
||||
|
||||
<?php if (empty($timeline)): ?>
|
||||
<p class="hvac-no-activity">No activity recorded for this attendee.</p>
|
||||
|
|
@ -190,33 +146,4 @@ $timeline = $attendee_data['timeline'];
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Chart -->
|
||||
<div class="hvac-timeline-chart-section">
|
||||
<h2>
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
Activity Over Time
|
||||
</h2>
|
||||
<div class="hvac-chart-container">
|
||||
<canvas id="hvac-timeline-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="hvac-profile-actions">
|
||||
<a href="mailto:<?php echo esc_attr($profile['email']); ?>" class="hvac-button hvac-primary">
|
||||
<i class="fas fa-envelope"></i> Email Attendee
|
||||
</a>
|
||||
<button class="hvac-button hvac-secondary" onclick="window.print()">
|
||||
<i class="fas fa-print"></i> Print Profile
|
||||
</button>
|
||||
<a href="<?php echo esc_url(wp_get_referer() ?: home_url('/hvac-dashboard/')); ?>" class="hvac-button hvac-ghost">
|
||||
<i class="fas fa-arrow-left"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Pass timeline data to JavaScript
|
||||
var hvacTimelineData = <?php echo json_encode($timeline); ?>;
|
||||
</script>
|
||||
Loading…
Reference in a new issue