masoodafar-web
8252e408b6
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 3m41s
- Modified the OrganizationChart component to convert and display the registration date in Jalali format, enhancing user understanding of the date information. - Updated the NetworkMembershipDtos class to include a comment in Persian for the JoinedAt property, clarifying its purpose. - Adjusted the NetworkMembershipService to utilize the UserCreated date when available, improving data accuracy. - Introduced new CSS styles for the registration date display, ensuring better visibility and presentation in the organization chart. These changes enhance the clarity and usability of the organization chart by providing accurate registration date information in a user-friendly format.
607 lines
11 KiB
CSS
607 lines
11 KiB
CSS
/**
|
|
* d3-org-chart custom styles for FourSat
|
|
* Binary Network Tree visualization
|
|
*/
|
|
|
|
/* Container */
|
|
.org-chart-wrapper {
|
|
width: 100%;
|
|
min-height: 500px;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.org-chart-container {
|
|
width: 100%;
|
|
height: 550px;
|
|
}
|
|
|
|
/* Loading & Error States */
|
|
.chart-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 400px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.no-data-message,
|
|
.error-message {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #6c757d;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.error-message {
|
|
color: #dc3545;
|
|
}
|
|
|
|
/* Node Card - Compact */
|
|
.org-node-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
border: 1px solid #e0e0e0;
|
|
font-family: 'Vazirmatn', 'IRANSans', sans-serif;
|
|
direction: rtl;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.org-node-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-color: #0380C0;
|
|
}
|
|
|
|
.org-node-card.active {
|
|
border-left: 3px solid #28a745;
|
|
}
|
|
|
|
.org-node-card.inactive {
|
|
opacity: 0.6;
|
|
border-left: 3px solid #dc3545;
|
|
}
|
|
|
|
/* Compact Header */
|
|
.node-header-compact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
|
|
}
|
|
|
|
.node-header-compact.root {
|
|
background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
|
|
}
|
|
|
|
.node-header-compact.root .node-avatar-sm {
|
|
background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
|
|
}
|
|
|
|
/* Avatar Small */
|
|
.node-avatar-sm {
|
|
width: 26px;
|
|
height: 26px;
|
|
min-width: 26px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #0380C0 0%, #026a9e 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.node-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.node-name-sm {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.node-registered-at {
|
|
font-size: 8px;
|
|
color: #6c757d;
|
|
margin-top: 1px;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.node-level-sm {
|
|
font-size: 9px;
|
|
color: #6c757d;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.org-node-card .package-name-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 14px;
|
|
padding: 0 6px;
|
|
margin-top: 2px;
|
|
border-radius: 7px;
|
|
font-size: 9px;
|
|
color: #546e7a;
|
|
background: #eceff1;
|
|
border: 1px solid #b0bec5;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 120px;
|
|
}
|
|
|
|
/* D3: تعداد پکیج طلایی/نقرهای فقط در نوار پایین شجره (.org-chart-stats) */
|
|
/* Referral Code - only for club active members */
|
|
.node-referral {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
margin-top: 2px;
|
|
padding: 2px 5px;
|
|
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.node-referral:hover {
|
|
background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.node-referral .referral-icon {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.node-referral .referral-code {
|
|
color: #2e7d32;
|
|
font-weight: 600;
|
|
font-size: 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Club Active indicator */
|
|
.org-node-card.club-active {
|
|
border-top: 2px solid #4caf50;
|
|
}
|
|
|
|
.org-node-card.club-active .node-avatar-sm {
|
|
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
|
|
}
|
|
|
|
/* Toast notification */
|
|
.org-chart-toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(100px);
|
|
background: #323232;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: 'Vazirmatn', 'IRANSans', sans-serif;
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
direction: rtl;
|
|
}
|
|
|
|
.org-chart-toast.show {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
/* Legacy Avatar (keep for compatibility) */
|
|
.node-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px solid white;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Position Badge */
|
|
.position-badge {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.position-badge.position-left {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.position-badge.position-right {
|
|
background: #fce4ec;
|
|
color: #c2185b;
|
|
}
|
|
|
|
.position-badge.position-root {
|
|
background: #e8f5e9;
|
|
color: #388e3c;
|
|
}
|
|
|
|
/* Node Body */
|
|
.node-body {
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.node-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
margin-bottom: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.node-mobile {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
direction: ltr;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.node-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.level-badge {
|
|
font-size: 10px;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
background: #f8f9fa;
|
|
color: #495057;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.club-badge {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Expand/Collapse Button */
|
|
.org-expand-btn {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #0380C0;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 2px 6px rgba(3, 128, 192, 0.4);
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.org-expand-btn:hover {
|
|
background: #026a9e;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Toolbar */
|
|
.org-chart-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 10px 12px;
|
|
background: white;
|
|
border-bottom: 1px solid #e9ecef;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toolbar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #dee2e6;
|
|
background: white;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.toolbar-btn:hover {
|
|
background: #f8f9fa;
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.toolbar-btn.primary {
|
|
background: #0380C0;
|
|
color: white;
|
|
border-color: #0380C0;
|
|
}
|
|
|
|
.toolbar-btn.primary:hover {
|
|
background: #026a9e;
|
|
}
|
|
|
|
/* Stats Bar */
|
|
.org-chart-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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;
|
|
gap: 8px;
|
|
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;
|
|
}
|
|
|
|
.stat-value {
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
|
|
.stat-value.left {
|
|
color: #1976d2;
|
|
}
|
|
|
|
.stat-value.right {
|
|
color: #c2185b;
|
|
}
|
|
|
|
/* Depth Controls */
|
|
.depth-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.depth-control label {
|
|
font-size: 13px;
|
|
color: #495057;
|
|
}
|
|
|
|
.depth-control select {
|
|
padding: 6px 12px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
background: white;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.org-chart-wrapper {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.org-chart-container {
|
|
height: 450px;
|
|
}
|
|
|
|
.org-chart-toolbar {
|
|
padding: 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-group {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.org-chart-stats {
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.org-chart-stats-row {
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-item {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.org-chart-container {
|
|
height: 400px;
|
|
}
|
|
|
|
.org-chart-toolbar {
|
|
padding: 8px;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
padding: 5px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.toolbar-btn span {
|
|
display: none;
|
|
}
|
|
|
|
.stat-item {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.org-chart-toolbar,
|
|
.org-chart-stats {
|
|
display: none;
|
|
}
|
|
|
|
.org-chart-container {
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
/* Referral Code Style */
|
|
.node-referral {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
margin-top: 2px;
|
|
padding: 2px 4px;
|
|
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.node-referral:hover {
|
|
background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.node-referral .referral-icon {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.node-referral .referral-code {
|
|
font-size: 8px;
|
|
font-weight: 600;
|
|
color: #e65100;
|
|
font-family: monospace;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Club Active Badge */
|
|
.org-node-card.club-active {
|
|
border-right: 3px solid #ff9800;
|
|
}
|
|
|
|
.org-node-card.club-active .node-avatar-sm {
|
|
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
|
|
}
|
|
|
|
/* Toast Notification */
|
|
.org-chart-toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(100px);
|
|
background: #323232;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
direction: rtl;
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.org-chart-toast.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
.node-button-div{
|
|
justify-content: center;
|
|
align-items: center;
|
|
} |