From f383fc83e9b850761441c4daf7ae3ef0d2b18c72 Mon Sep 17 00:00:00 2001 From: Sultan khan <> Date: Sun, 5 Mar 2023 17:25:45 +0300 Subject: [PATCH] fixed employee hierarchy design --- .../employee-hierarchy-card.component.scss | 34 ++--- .../employee-hierarchy.component.html | 50 ++++---- .../employee-hierarchy.component.scss | 119 +++++++++++++++++- Mohem/src/assets/localization/i18n.json | 2 +- Mohem/src/theme/styles.scss | 12 +- 5 files changed, 179 insertions(+), 38 deletions(-) diff --git a/Mohem/src/app/hmg-common/ui/employee-hierarchy-card/employee-hierarchy-card.component.scss b/Mohem/src/app/hmg-common/ui/employee-hierarchy-card/employee-hierarchy-card.component.scss index abf864a4..e9264160 100644 --- a/Mohem/src/app/hmg-common/ui/employee-hierarchy-card/employee-hierarchy-card.component.scss +++ b/Mohem/src/app/hmg-common/ui/employee-hierarchy-card/employee-hierarchy-card.component.scss @@ -43,9 +43,7 @@ } .title { - - font-family: 'Inter' !important; - line-height: 12px; + font-family: "Inter" !important; letter-spacing: -0.56px; color: #575757; opacity: 1; @@ -53,10 +51,10 @@ width: 100%; text-overflow: ellipsis; white-space: nowrap; - // overflow: hidden; display: block; margin-left: -10px; - margin-top: -10px; + margin-top: -15px; + overflow: hidden; } } @@ -123,28 +121,36 @@ .numberEmp { color: white; - font-size: 12px; + font-size: 11px; font-weight: bolder; margin-left: 13px; - width: 23px; - height: 23px; + width: 22px; + height: 22px; border-radius: 100%; background-color: #024d71; z-index: 9; text-align: center; - padding-top: 3px; + padding: 4px 2px 2px; + position: absolute; + right: 10px; + top: -8px; } .numberEmp-ar { color: white; - font-size: 12px; + font-size: 11px; font-weight: bolder; - margin-right: 13px; - width: 23px; - height: 23px; + margin-left: 13px; + width: 22px; + height: 22px; border-radius: 100%; background-color: #024d71; z-index: 9; text-align: center; - padding-top: 3px; + padding: 4px 2px 2px; + position: absolute; + left: 10px; + top: -8px; } + + diff --git a/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.html b/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.html index e343afa3..c38e4c63 100644 --- a/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.html +++ b/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.html @@ -7,38 +7,46 @@
+
-
- - -
+ + + -
- - - - -
diff --git a/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.scss b/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.scss index 30e4390b..b91768c2 100644 --- a/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.scss +++ b/Mohem/src/app/my-team/employee-hierarchy/employee-hierarchy.component.scss @@ -1,9 +1,126 @@ .contentBg { - padding: 0px 20px; + padding: 0px 15px; margin-top: 20px; } .current-employee { padding: 0px 20px; +} +// .current-employee::before{ +// content: ""; +// position: absolute; +// top: -10px; +// left: -20px; +// border-left: 1px solid #ddd; +// border-bottom: 1px solid #ddd; +// width: 20px; +// height: 15px; + +// } +// .current-employee::after{ +// position: absolute; +// content: ""; +// top: 5px; +// left: -20px; +// border-left: 1px solid #000; +// border-top: 1px solid #000; +// width: 20px; +// height: 100%; + +// } + +ul { + margin:10px; + padding:0; + } + + .current-employee li { + list-style-type: none; + margin: 10px 0 10px 10px; + position: relative; + } + .current-employee li:before { + content: ""; + position: absolute; + top: -15px !important; + left: -20px; + border-left: 2px solid #000; + border-bottom: 2px solid #000; + width: 20px; + height: 15px; + } + .current-employee li:after { + position: absolute; + content: ""; + top: 5px; + left: -20px; + border-left: 2px solid #000; + border-top: 2px solid #000; + width: 20px; + height: 100%; + } + +// .current-employee li:last-child:after { +// display: none; +// } + + .supervisor li:after { + position: absolute; + content: ""; + top: 5px; + left: -20px; + border-left: 2px solid #000; + border-top: 0; + width: 20px; + height: 100%; + } + .supervisor li { + list-style-type: none; + margin: 10px 0 10px 10px; + position: relative; + } + + .supervisor li:before { + content: ""; + position: absolute; + top: -10px; + left: -20px; + border-left: 2px solid #000; + border-bottom: 2px solid #000; + width: 20px; + height: 55px; + + } +// li:last-child:after, li:last-child:before { +// display: none; +// } + .supervisor li:last-child:after{ + visibility: hidden; + } + .supervisor-li li:last-child:after, li.supervisor-li:last-of-type::after{ + visibility: hidden; +} + + +li.supervisor-li:first-of-type::before{ + border-top: 0; + top: -20px; + height: 65px; + border-left: 0; +} +li.supervisor-li:first-of-type::after{ + top: 45px; +} + +.current-employee li.subordinate:before{ + top: -15px !important; +} +ul.current-employee, .current-employee ul{ + margin:0; +} +.current-employee li:before{ + left:-13px !important; + top: -17px !important; + width: 13px; } \ No newline at end of file diff --git a/Mohem/src/assets/localization/i18n.json b/Mohem/src/assets/localization/i18n.json index cab219ec..3487c562 100644 --- a/Mohem/src/assets/localization/i18n.json +++ b/Mohem/src/assets/localization/i18n.json @@ -1268,7 +1268,7 @@ "ar": "هل ترغب في تسجيل الدخول باسم المستخدم الحالي؟" }, "monthly-attendance": { - "ar": "التقويم يترك", + "ar":"اجازاتي", "en": "Leaves Calendar" }, "monthly-time-sheet-view": { diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index 87b6656d..9a8a2eb2 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -2010,4 +2010,14 @@ ion-app[dir="rtl"] { } .toolTip-inside ion-icon{ position: absolute; -} \ No newline at end of file +} + + .current-employee{ + .name{ + font-size: 14px !important; + margin-left: -5px !important; + } + .title{ + margin-left: -5px !important; + } +} \ No newline at end of file