From 24380d5ddabfce29f52276c32fe357e63b1bec33 Mon Sep 17 00:00:00 2001 From: MeysamMoghaddam <65253484+MeysamMoghaddam@users.noreply.github.com> Date: Mon, 13 Oct 2025 20:52:23 +0330 Subject: [PATCH] u --- .../Shared/OrganizationChart.razor.cs | 114 +++++++++--------- .../Shared/OrganizationChartLevel.razor.css | 107 ++++++++++------ 2 files changed, 128 insertions(+), 93 deletions(-) diff --git a/src/FrontOffice.Main/Shared/OrganizationChart.razor.cs b/src/FrontOffice.Main/Shared/OrganizationChart.razor.cs index 4b5abf7..cc671df 100644 --- a/src/FrontOffice.Main/Shared/OrganizationChart.razor.cs +++ b/src/FrontOffice.Main/Shared/OrganizationChart.razor.cs @@ -23,76 +23,76 @@ public partial class OrganizationChart PersonalPurchase = 2500000, TeamPurchase = 15000000, Children = new List - { - new UserNode { - Id = 2, - FirstName = "مریم", - LastName = "احمدی", - Avatar = "images/avatar2.jpg", - PersonalPurchase = 1800000, - TeamPurchase = 8500000, - Children = new List + new UserNode { - new UserNode + Id = 2, + FirstName = "مریم", + LastName = "احمدی", + Avatar = "images/avatar2.jpg", + PersonalPurchase = 1800000, + TeamPurchase = 8500000, + Children = new List { - Id = 5, - FirstName = "سارا", - LastName = "کریمی", - PersonalPurchase = 1200000, - TeamPurchase = 3200000, - Children = new List + new UserNode { - new UserNode + Id = 5, + FirstName = "سارا", + LastName = "کریمی", + PersonalPurchase = 1200000, + TeamPurchase = 3200000, + Children = new List { - Id = 8, - FirstName = "نازنین", - LastName = "رضایی", - PersonalPurchase = 950000, - TeamPurchase = 2100000 + new UserNode + { + Id = 8, + FirstName = "نازنین", + LastName = "رضایی", + PersonalPurchase = 950000, + TeamPurchase = 2100000 + } } + }, + new UserNode + { + Id = 6, + FirstName = "امیر", + LastName = "حسینی", + PersonalPurchase = 950000, + TeamPurchase = 1800000 } - }, - new UserNode - { - Id = 6, - FirstName = "امیر", - LastName = "حسینی", - PersonalPurchase = 950000, - TeamPurchase = 1800000 } - } - }, - new UserNode - { - Id = 3, - FirstName = "حسن", - LastName = "کریمی", - Avatar = "images/avatar3.jpg", - PersonalPurchase = 2200000, - TeamPurchase = 9200000, - Children = new List + }, + new UserNode { - new UserNode + Id = 3, + FirstName = "حسن", + LastName = "کریمی", + Avatar = "images/avatar3.jpg", + PersonalPurchase = 2200000, + TeamPurchase = 9200000, + Children = new List { - Id = 7, - FirstName = "فاطمه", - LastName = "رضایی", - PersonalPurchase = 1350000, - TeamPurchase = 4100000 + new UserNode + { + Id = 7, + FirstName = "فاطمه", + LastName = "رضایی", + PersonalPurchase = 1350000, + TeamPurchase = 4100000 + } } + }, + new UserNode + { + Id = 4, + FirstName = "زهرا", + LastName = "محمدی", + Avatar = "images/avatar4.jpg", + PersonalPurchase = 1950000, + TeamPurchase = 7800000 } - }, - new UserNode - { - Id = 4, - FirstName = "زهرا", - LastName = "محمدی", - Avatar = "images/avatar4.jpg", - PersonalPurchase = 1950000, - TeamPurchase = 7800000 } - } }; } diff --git a/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css b/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css index 0c6c65a..f7bf760 100644 --- a/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css +++ b/src/FrontOffice.Main/Shared/OrganizationChartLevel.razor.css @@ -1,27 +1,27 @@ -/* Organization Chart Level Styles - inherits from main chart styles */ +/* Organization Chart Level Styles */ .org-level { display: flex; justify-content: center; flex-wrap: wrap; position: relative; - margin-top: 20px; + margin-top: 40px; } .org-level::before { content: ''; position: absolute; - top: -40px; + top: -80px; left: 50%; transform: translateX(-50%); width: 2px; - height: 20px; + height: 40px; background: #ddd; } .org-level::after { content: ''; position: absolute; - top: -20px; + top: -40px; left: 0; right: 0; height: 2px; @@ -29,28 +29,20 @@ z-index: 1; } -/* Responsive adjustments for levels */ -@media (max-width: 768px) { - .org-level { - flex-direction: column; - align-items: center; - } +/* Node styles for levels */ +.org-node { + position: relative; + margin: 0px 15px 20px 15px; } -/* Animation for level expansion */ -.org-level { - animation: fadeInLevel 0.3s ease-in-out; -} - -@keyframes fadeInLevel { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } +.node-connector { + position: absolute; + top: -40px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: 40px; + background: #ddd; } .node-card { @@ -64,10 +56,10 @@ transition: all 0.3s ease; } - .node-card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); - border-color: #e0e0e0; - } +.node-card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + border-color: #e0e0e0; +} .node-avatar { position: relative; @@ -94,10 +86,10 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } - .expand-btn:hover { - background: #026a9e; - transform: translateX(-50%) scale(1.1); - } +.expand-btn:hover { + background: #026a9e; + transform: translateX(-50%) scale(1.1); +} .node-info { text-align: center; @@ -114,9 +106,9 @@ font-size: 12px; } - .node-amounts > div { - margin-bottom: 4px; - } +.node-amounts > div { + margin-bottom: 4px; +} .personal-amount { color: #0380C0; @@ -133,4 +125,47 @@ .amount { font-weight: 600; +} + +/* Responsive adjustments for levels */ +@media (max-width: 768px) { + .org-level { + flex-direction: column; + align-items: center; + margin-top: 20px; + } + + .org-node { + margin: 10px 0; + } + + .node-card { + min-width: 160px; + max-width: 220px; + padding: 12px; + } + + .node-name { + font-size: 13px; + } + + .node-amounts { + font-size: 11px; + } +} + +/* Animation for level expansion */ +.org-level { + animation: fadeInLevel 0.3s ease-in-out; +} + +@keyframes fadeInLevel { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } } \ No newline at end of file