From 3e99b36313d286aea50d8f27275ca173ba2b5d02 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Thu, 15 Sep 2022 11:48:42 +0300 Subject: [PATCH] design changes --- Mohem/src/app/app.component.html | 8 +- Mohem/src/app/app.component.scss | 64 +++-- .../sms-page/sms-page.page.scss | 2 +- .../employee-information.component.scss | 232 +++++++----------- .../src/app/my-team/home/home.component.html | 78 +----- .../src/app/my-team/home/home.component.scss | 125 ++++------ .../app/notification/home/home.component.scss | 17 +- .../worklist-main.component.html | 4 +- .../worklist-main.component.scss | 11 +- .../worklist-main/worklist-main.component.ts | 2 +- .../src/app/profile/home/home.component.scss | 27 +- 11 files changed, 201 insertions(+), 369 deletions(-) diff --git a/Mohem/src/app/app.component.html b/Mohem/src/app/app.component.html index e9ec497d..2cbae42b 100644 --- a/Mohem/src/app/app.component.html +++ b/Mohem/src/app/app.component.html @@ -3,10 +3,10 @@
-
+
@@ -128,9 +128,9 @@
-
+
diff --git a/Mohem/src/app/app.component.scss b/Mohem/src/app/app.component.scss index a24939c4..22419a06 100644 --- a/Mohem/src/app/app.component.scss +++ b/Mohem/src/app/app.component.scss @@ -10,21 +10,19 @@ header } .mohemmLogo { - max-width: 46% !important; border: 0 !important; - margin-left: 70px !important; + margin-right: 70px !important; margin-top: -24px !important; - margin-bottom: 11px; + margin-bottom: 5px; } .mohemmLogo-ar { - max-width: 46% !important; border: 0 !important; margin-right: 70px !important; margin-top: -24px !important; - margin-bottom: 11px; + margin-bottom: 5px; } .closeIcon { @@ -38,6 +36,10 @@ header top: 10px; } +hr { + border-width: 1px; +} + .menubutton { white-space: normal; @@ -77,21 +79,19 @@ header .logout { - background-color: #024d71; + background-color: #0ca2de; border: none; color: white; - // padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; - margin-left: 120px !important; + margin-right: 95px !important; margin-top: 15px !important; margin-bottom: 20px !important; border-radius: 30px; - // width: 40px; - height: 26px; - padding: 6px 24px; + height: 30px; + padding: 0px 18px; } @@ -289,22 +289,26 @@ button.menu-item.item.item-block.item-ios { } .TxtPlace { - margin: 0; - padding: 0; - text-align: center; - font-weight: bolder; - color: black; - font-size: 16px; + font-size: 20px; + color: #000; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 90%; + margin: auto; } .TxtPlaces { + margin-top: 2px; - margin: 0; - padding: 0; - text-align: center; - font-weight: bolder; font-size: 14px; - color: darkgray; + color: #000; + font-family: 'Inter' !important; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 90%; + margin: auto; } .menuFooter { @@ -323,24 +327,12 @@ button.menu-item.item.item-block.item-ios { margin: auto; } - -// .menuFooter .CompanyImg { -// width: 100%; -// height: 100%; -// } - - .menuFooter .CompanyImg { width: 65%; height: 60%; margin-bottom: -21px; } -// .logoImg{ -// width: 120px; -// position: relative; -// } - .logoImgWithMyTeam { width: 225px; @@ -394,8 +386,8 @@ ion-thumbnail.menu-thumb { // } .profileImg { - width: 140px; - height: 140px; + width: 100px; + height: 100px; display: -webkit-inline-box; display: inline-flex; overflow: hidden; diff --git a/Mohem/src/app/authentication/sms-page/sms-page.page.scss b/Mohem/src/app/authentication/sms-page/sms-page.page.scss index 86b95644..cd63a3de 100644 --- a/Mohem/src/app/authentication/sms-page/sms-page.page.scss +++ b/Mohem/src/app/authentication/sms-page/sms-page.page.scss @@ -56,7 +56,7 @@ ion-input { outline: none; width: 20%; transition: all .2s ease-in-out; - border-radius: 3px; + border-radius: 15px; display: inline-block; &:focus { diff --git a/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.scss b/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.scss index 09b14503..240f7b1e 100644 --- a/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.scss +++ b/Mohem/src/app/hmg-common/ui/employee-information/employee-information.component.scss @@ -1,186 +1,122 @@ -.team-member-container{ - // background: white; - // border-radius: 100px 20px 20px 100px; - // margin-top: 15px; - // font-family: WorkSans-Regular; - // border: 1px solid #ccc; - // border-radius: 15px; - // padding-bottom: 8px; +.team-member-container { + background: white; /* margin-top: 2px; */ font-family: WorkSans-Regular; border: 1px solid #ccc; border-radius: 15px; - padding-bottom: 8px; - margin-bottom: 7px; + padding-bottom: 5px; + margin-bottom: 15px; + box-shadow: 0px 1px 5px #cdcdcd; } -// .user-image-container{ -// position: relative; -// width: 70px; -// height: 70px; -// display: block; -// margin: 0 auto; -// &:before{ -// position: absolute; -// content: ""; -// width: 20px; -// height: 20px; -// border-radius: 20px; -// border: 1px solid white; -// top: 0; -// right: 0; -// background-color: red; -// z-index: 9; -// } -// &.present:before{ -// background-color: green !important; -// } -// } -.user-image{ - // overflow: hidden; - // position: relative; - // display: block; - // width: 100%; - // height: 100%; - // border-radius: 80px; - // border: 1px solid #ccc; - // margin: 0px auto 6px; +.user-image { img { - // width: 100%; - // max-height: 100%; - width: 74%; - max-height: 74%; - margin-top: 4px; - margin-left: 6px; + width: 60px; + height: 60px; + + border-radius: 30px; + margin: 5px; } } -.employee-name{ +.employee-name { display: inline-block; width: 80%; - .name{ - // font-size: 16px; - // color: black; - // // margin: 0; - // width: 100%; - // text-overflow: ellipsis; - // white-space: nowrap; - // overflow: hidden; - // margin-left: -10px; - // margin-top: -5px; - // font-family: 'WorkSans-Bold'; - font-size: 16px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - margin-left: -10px; - margin-top: -5px; - text-align: left; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 25px; - letter-spacing: -0.64px; - color: #2B353E; - opacity: 1; + + .name { + + font-size: 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-left: -10px; + margin-top: -5px; + text-align: left; + font-weight: bold; + line-height: 25px; + letter-spacing: -0.64px; + color: #2B353E; + opacity: 1; + font-family: 'Inter' !important; } - - .title{ - // font-size: 13px; - // color: #888; - // width: 100%; - // text-overflow: ellipsis; - // white-space: nowrap; - // overflow: hidden; - // display: block; - // margin-left: -10px; - // margin-top: -6px; - // color: black; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 12px; - letter-spacing: -0.56px; - color: #575757; - opacity: 1; - font-size: 14px; - width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - margin-left: -10px; - margin-top: -10px; + + .title { + + font-family: 'Inter' !important; + line-height: 12px; + letter-spacing: -0.56px; + color: #575757; + opacity: 1; + font-size: 14px; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + margin-left: -10px; + margin-top: -10px; } } -.employee-name-ar{ +.employee-name-ar { display: inline-block; width: 80%; - .name{ - // font-size: 16px; - // color: black; - // // margin: 0; - // width: 100%; - // text-overflow: ellipsis; - // white-space: nowrap; - // overflow: hidden; - // margin-left: -10px; - // margin-top: -5px; - // font-family: 'WorkSans-Bold'; - font-size: 16px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - margin-left: -10px; - margin-top: -5px; - text-align: right; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 25px; - letter-spacing: -0.64px; - color: #2B353E; - opacity: 1; + + .name { + font-size: 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-left: -10px; + margin-top: -5px; + text-align: right; + font-family: 'Inter' !important; + line-height: 25px; + letter-spacing: -0.64px; + color: #2B353E; + opacity: 1; + font-weight: bold; } - - .title{ - // font-size: 13px; - // color: #888; - // width: 100%; - // text-overflow: ellipsis; - // white-space: nowrap; - // overflow: hidden; - // display: block; - // margin-left: -10px; - // margin-top: -6px; - // color: black; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 12px; - letter-spacing: -0.56px; - color: #575757; - opacity: 1; - font-size: 14px; - width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - margin-left: -10px; - margin-top: -10px; + + .title { + + font-family: 'Inter' !important; + line-height: 12px; + letter-spacing: -0.56px; + color: #575757; + opacity: 1; + font-size: 14px; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + display: block; + margin-left: -10px; + margin-top: -10px; } } -.image-container{ + +.image-container { width: 20%; display: inline-block; text-align: center; vertical-align: top; margin-top: 5px; + position: relative; + top: 12px; } -.swipe-information{ + +.swipe-information { color: #888; font-size: 12px; border-top: 1px solid #ccc; padding-top: 6px; margin-top: 6px; + .check-in { font-size: 12px; - margin-right: 15px; + margin-right: 15px; } } \ No newline at end of file diff --git a/Mohem/src/app/my-team/home/home.component.html b/Mohem/src/app/my-team/home/home.component.html index 2280064d..f3ac6890 100644 --- a/Mohem/src/app/my-team/home/home.component.html +++ b/Mohem/src/app/my-team/home/home.component.html @@ -43,7 +43,7 @@
-
+
@@ -51,85 +51,13 @@
- +
{{ts.trPK('myTeam','my-team-members')}}
{{EmployeeTotal}}
- - - - - - - - - - - - +
- +
- diff --git a/Mohem/src/app/notification/worklist-main/worklist-main.component.scss b/Mohem/src/app/notification/worklist-main/worklist-main.component.scss index 93192de0..3a6c1b2e 100644 --- a/Mohem/src/app/notification/worklist-main/worklist-main.component.scss +++ b/Mohem/src/app/notification/worklist-main/worklist-main.component.scss @@ -113,7 +113,7 @@ button.actionBtn.button.button { width: 22px; height: 22px; display: inline-block; - margin: 0px 5px 0px 5px; + margin: 0px 7px 0px 7px; } .deligate { @@ -394,4 +394,13 @@ ion-card { margin: 0; white-space: nowrap; font-size: 10px; +} + +ion-item { + margin: 10px; + border-bottom: 1.5px solid #ececec; +} + +ion-item:last-child { + border: none; } \ No newline at end of file diff --git a/Mohem/src/app/notification/worklist-main/worklist-main.component.ts b/Mohem/src/app/notification/worklist-main/worklist-main.component.ts index b0632dfd..8717acf1 100644 --- a/Mohem/src/app/notification/worklist-main/worklist-main.component.ts +++ b/Mohem/src/app/notification/worklist-main/worklist-main.component.ts @@ -1291,7 +1291,7 @@ export class WorklistMainComponent implements OnInit { showLoading(notificationList) { if (notificationList.length < 0) { return true; - } else if (notificationList === []) { + } else if (notificationList.length == 0) { return false; } else { return true; } } diff --git a/Mohem/src/app/profile/home/home.component.scss b/Mohem/src/app/profile/home/home.component.scss index c123d317..d49d5f04 100644 --- a/Mohem/src/app/profile/home/home.component.scss +++ b/Mohem/src/app/profile/home/home.component.scss @@ -130,7 +130,7 @@ ion-thumbnail.menu-thumb { } .service-ar { - font-size: 20px; + font-size: 18px; color: white; // letter-spacing: 1px; font-weight: bold; @@ -1316,19 +1316,20 @@ $actionBtnSize: 36px; letter-spacing: -0.84px; color: #2B353E; opacity: 1; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); + font-weight: bold; line-height: 21px; font-size: 21px; } .email { text-align: center; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); + margin: 10px; font-size: 13px; line-height: 6px; letter-spacing: -0.52px; color: #A2A2A2; opacity: 1; + font-family: 'Inter' !important; } @@ -1337,8 +1338,8 @@ $actionBtnSize: 36px; letter-spacing: -0.52px; color: #A2A2A2; opacity: 1; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - font-size: 13px; + + font-size: 16px; line-height: 0px; margin-bottom: 7px; } @@ -1349,17 +1350,19 @@ $actionBtnSize: 36px; letter-spacing: -0.64px; color: #2B353E; opacity: 1; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - font-size: 16px; + font-family: 'Inter' !important; + font-size: 14px; line-height: 19px; + top: 5px; + position: relative; } .btnTitle { text-align: center; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 10px; + line-height: 12px; font-size: 11px; color: #4D4D4D; + margin-top: 5px; } .Profileheader-label-text-form { @@ -1423,7 +1426,7 @@ $actionBtnSize: 36px; .header-label-text-form-ar { text-align: right; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); + font-weight: bold; line-height: 30px; font-size: 20px; letter-spacing: -0.8px; @@ -1447,12 +1450,14 @@ $actionBtnSize: 36px; .result-label-text-form-ar { text-align: right; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 20px; font-size: 16px; letter-spacing: -0.64px; color: #2B353E; opacity: 1; + font-family: 'Inter' !important; + margin-top: 3px; + font-weight: bold; } .create-edit {