feat(organization-chart): update statistics display and improve layout
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 4m44s
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 4m44s
- Updated the organization chart to include additional statistics such as left and right leg counts, tree depth, and weaker leg identification for enhanced user insights. - Improved the layout and styling of the statistics bar for better visibility and user experience. - Adjusted the CSS for the organization chart to refine the overall presentation and responsiveness. These changes enhance the clarity and usability of the organization chart, providing users with essential metrics at a glance.
This commit is contained in:
@@ -72,10 +72,10 @@
|
||||
/* Compact Header */
|
||||
.node-header-compact {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
|
||||
}
|
||||
|
||||
@@ -141,22 +141,7 @@
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
/* D3: طلایی / نقرهای — پای چپ و راست */
|
||||
.node-leg-scores {
|
||||
margin-top: 3px;
|
||||
line-height: 1.25;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.node-leg-scores .leg-score-line.gold {
|
||||
color: #b8860b;
|
||||
}
|
||||
|
||||
.node-leg-scores .leg-score-line.silver {
|
||||
color: #607d8b;
|
||||
}
|
||||
|
||||
/* D3: امتیاز طلایی/نقرهای فقط در نوار پایین شجره (.org-chart-stats) */
|
||||
/* Referral Code - only for club active members */
|
||||
.node-referral {
|
||||
display: flex;
|
||||
@@ -386,14 +371,27 @@
|
||||
/* Stats Bar */
|
||||
.org-chart-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.org-chart-stats-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.org-chart-stats-row.leg-scores {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -401,6 +399,21 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stat-item.leg-score-gold .stat-label {
|
||||
color: #b8860b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-item.leg-score-silver .stat-label {
|
||||
color: #607d8b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-sep {
|
||||
color: #adb5bd;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #6c757d;
|
||||
}
|
||||
@@ -464,10 +477,13 @@
|
||||
}
|
||||
|
||||
.org-chart-stats {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.org-chart-stats-row {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 12px;
|
||||
|
||||
Reference in New Issue
Block a user