From c4d199c62bc32b06cffc736ba220b43c5138aa32 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Tue, 30 Aug 2022 17:02:44 +0300 Subject: [PATCH] profile page updated --- .../src/app/profile/home/home.component.html | 27 +- .../src/app/profile/home/home.component.scss | 392 +++++++++++------- 2 files changed, 266 insertions(+), 153 deletions(-) diff --git a/Mohem/src/app/profile/home/home.component.html b/Mohem/src/app/profile/home/home.component.html index 4ddfb979..6401003d 100644 --- a/Mohem/src/app/profile/home/home.component.html +++ b/Mohem/src/app/profile/home/home.component.html @@ -170,18 +170,19 @@ - +

{{ts.trPK('general','basic-details')}}

- - - + + - + +
@@ -213,16 +214,17 @@ - +

{{ts.trPK('userProfile','phone-no')}}

- - - + + + + @@ -249,16 +251,17 @@ - +

{{ts.trPK('general','main-address')}}

- + - + + diff --git a/Mohem/src/app/profile/home/home.component.scss b/Mohem/src/app/profile/home/home.component.scss index 3973ad74..1ea38b01 100644 --- a/Mohem/src/app/profile/home/home.component.scss +++ b/Mohem/src/app/profile/home/home.component.scss @@ -17,9 +17,11 @@ .header-toolbar-new { --background: #024d71; } + .colorBG { --background: #f0efef; } + .header-div { text-transform: capitalize; background: #024d71; @@ -84,6 +86,7 @@ ion-thumbnail.menu-thumb { // margin-left: 30px; // margin-right: 30px; } + .gridService-ar { // margin-top: 87px; // border-radius: 10px; @@ -101,6 +104,7 @@ ion-thumbnail.menu-thumb { // padding-top: 19px; // padding-bottom: 26px; } + .columns-ar { // margin: 10px; // background: #0B4775; @@ -119,10 +123,12 @@ ion-thumbnail.menu-thumb { // font-weight: bold; font-family: var(--fontFamilyPoppins-SemiBold, inherit); } + .services { font-size: 12px; color: white; } + .service-ar { font-size: 20px; color: white; @@ -130,6 +136,7 @@ ion-thumbnail.menu-thumb { font-weight: bold; margin-right: 10px; } + .services-ar { font-size: 20px; color: white; @@ -144,19 +151,23 @@ ion-thumbnail.menu-thumb { border: #bebbbb !important; padding: 2px; } + .p { color: black !important; font-size: medium; text-align: center; border-bottom: rgb(190, 187, 187) solid 1px; } + .itemline { border-bottom: rgb(190, 187, 187) solid 1px; } + .itemlins { border-bottom: rgb(190, 187, 187) solid 1px; margin-bottom: 209px; } + .empName { margin: 0; padding: 0; @@ -166,6 +177,7 @@ ion-thumbnail.menu-thumb { font-size: 16px; margin-top: 38px; } + .empJob { margin: 0; padding: 0; @@ -174,10 +186,12 @@ ion-thumbnail.menu-thumb { font-size: 16px; margin-top: 4px; } + .arrow { width: 20px; height: 22px !important; } + .arrow-ar { float: left; font-size: 25px; @@ -198,6 +212,7 @@ ion-thumbnail.menu-thumb { width: 85%; margin: -12px 0px 0px 25px; } + .service-row-ar { width: 104%; margin: -12px 0px 0px 0px; @@ -206,6 +221,7 @@ ion-thumbnail.menu-thumb { ion-content { --ion-background-color: whitesmoke; } + ion-title { color: white; position: absolute; @@ -218,6 +234,7 @@ ion-title { height: 100%; font-family: WorkSans-Regular; } + .contentBg { padding: 0px 20px; } @@ -236,6 +253,7 @@ ion-title { .user-info { text-align: center; margin-bottom: 15px; + .user-image-container { position: relative; width: 100%; @@ -245,6 +263,7 @@ ion-title { margin: 0 auto; align-items: center; } + // position: relative; // width: 80px; // height: 80px; @@ -278,6 +297,7 @@ ion-title { margin-top: -125px; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { .user-image { // position: relative; @@ -307,6 +327,7 @@ ion-title { margin-top: -125px; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { .user-image-ar { // position: relative; @@ -322,7 +343,9 @@ ion-title { border-radius: 80px; margin-bottom: 321px; margin-right: 52px; - }} + } +} + h1 { margin: 0; padding: 0; @@ -330,6 +353,7 @@ h1 { font-size: 18px; margin-bottom: 4px; } + span { font-size: 11px; display: block; @@ -337,11 +361,14 @@ span { } $actionBtnSize: 36px; + .user-actions { text-align: center; + .action-button { font-size: 11px; font-weight: bold; + // white-space: nowrap; // color: #888; .action-button-icon { @@ -353,6 +380,7 @@ $actionBtnSize: 36px; background-color: #024d71; line-height: $actionBtnSize; margin-bottom: 3px; + img { margin: 0 auto; vertical-align: middle; @@ -360,6 +388,7 @@ $actionBtnSize: 36px; } } } + .employee-information-indetail { background: white; margin-top: 15px; @@ -367,10 +396,12 @@ $actionBtnSize: 36px; margin-bottom: 15px; border-radius: 20px; border: 1px solid #ccc; + ion-col { padding: 15px; // border-bottom: 1px solid #ccc; } + h2 { font-size: 13px; // font-family: WorkSans-Bold; @@ -378,6 +409,7 @@ $actionBtnSize: 36px; font-weight: bold; color: rgb(128, 124, 124); } + p { font-size: 13px; margin: 0; @@ -408,6 +440,7 @@ $actionBtnSize: 36px; background-color: #024d71; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { .active-Segment { width: 11%; @@ -438,6 +471,7 @@ $actionBtnSize: 36px; background: #414040 !important; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { .normal-Segment { width: 11%; @@ -465,6 +499,7 @@ $actionBtnSize: 36px; height: 18px; } } + @media screen and (min-width: 768px) and (max-width: 1024px) { .imgSize { position: absolute; @@ -480,6 +515,7 @@ $actionBtnSize: 36px; padding: 15px; border-bottom: 1px solid #ccc; } + .img { width: 100px; height: 100px; @@ -491,6 +527,7 @@ $actionBtnSize: 36px; background: transparent; margin-left: 119%; } + .img-ar { width: 100px; height: 100px; @@ -502,6 +539,7 @@ $actionBtnSize: 36px; background: transparent; margin-right: 119%; } + ///////////////////////// Team Members css //////////////////////@extend .filters-row { @@ -510,10 +548,12 @@ $actionBtnSize: 36px; .search-dropdown { background: #024d71; + ion-select { .select-text { margin-left: -10px; } + .select-icon { .select-icon-inner { opacity: 1; @@ -526,6 +566,7 @@ $actionBtnSize: 36px; .input-container { background: white; + ion-input { border-bottom-color: transparent; } @@ -533,17 +574,20 @@ $actionBtnSize: 36px; .search-container { margin-top: 15px; + ion-col { background: white; border-radius: 12px; padding-right: 10px; flex: none; + ion-icon { margin-right: 3px; font-size: 14px; margin-left: 3px; vertical-align: middle; } + span { font-size: 12px; vertical-align: middle; @@ -567,11 +611,13 @@ $actionBtnSize: 36px; margin-top: -1px; margin-left: 43px; } + .activeArrow { height: 20px; width: 20px; color: #024d71; } + .disabledArrow { height: 20px; width: 20px; @@ -584,6 +630,7 @@ $actionBtnSize: 36px; color: #024d71; margin-right: 275px; } + .disabledArrow-ar { height: 20px; width: 20px; @@ -608,6 +655,7 @@ $actionBtnSize: 36px; width: 90%; left: 5%; } + .result-graph-ar { position: relative; background: white; @@ -658,6 +706,7 @@ $actionBtnSize: 36px; right: 5%; } } + .result-graph-attendence { position: relative; background: white; @@ -678,6 +727,7 @@ $actionBtnSize: 36px; margin-bottom: 10px; margin-left: 10px; } + .request-heading-ar { text-align: right; display: block; @@ -695,12 +745,14 @@ $actionBtnSize: 36px; display: block; text-align: center; transform: translate(-50%, -50%); + h2 { font-size: 38px; font-family: WorkSans-Bold; margin: 0 auto; line-height: 36px; } + span { width: 125px; display: block; @@ -709,6 +761,7 @@ $actionBtnSize: 36px; font-family: workSans-Regular; } } + .today-graph { // width: 100%; max-height: 4cm; @@ -753,6 +806,7 @@ $actionBtnSize: 36px; line-height: 11px !important; display: block; } + h2 { font-size: 25px; font-weight: bold; @@ -790,6 +844,7 @@ $actionBtnSize: 36px; margin: 0; font-size: 14px; } + span { font-size: 9px; } @@ -801,6 +856,7 @@ $actionBtnSize: 36px; margin: 0; font-size: 14px; } + span { font-size: 11px; margin-bottom: 3px; @@ -836,6 +892,7 @@ $actionBtnSize: 36px; background-color: #292f42; margin-top: 30px; } + .span-one { // display: block; // font-size: 12px; @@ -847,6 +904,7 @@ $actionBtnSize: 36px; margin-top: -2px; font-weight: bold; } + .span-two { // display: block; // font-size: 22px; @@ -870,6 +928,7 @@ $actionBtnSize: 36px; margin-top: 28px; font-weight: bold; } + .spa-two { // display: block; // font-size: 22px; @@ -881,11 +940,13 @@ $actionBtnSize: 36px; font-weight: bold; font-family: WorkSans-Bold; } + .graph-container { margin-left: -50px; position: relative; margin-right: 50px; } + .label-container { position: absolute; // width: 20%; @@ -894,12 +955,14 @@ $actionBtnSize: 36px; margin-top: -27px; left: 20px; } + .attendance-summary .attendance-information { span { height: 32px; display: block; line-height: 14px; } + h2 { // text-align: right; // font-family: WorkSans-Bold; @@ -915,6 +978,7 @@ $actionBtnSize: 36px; border-radius: 20px; border: 1px solid #ccc; padding-bottom: 25px; + span { text-align: left; display: block; @@ -923,11 +987,13 @@ $actionBtnSize: 36px; margin-left: 10px; } } + .calendar-container-ar { background: white; margin-bottom: 100px; margin-top: 20px; border-radius: 20px; + span { text-align: right; display: block; @@ -958,6 +1024,7 @@ $actionBtnSize: 36px; font-family: WorkSans-Bold; font-size: 16px; } + .stats { color: #289db8; font-size: 9px; @@ -1013,66 +1080,78 @@ $actionBtnSize: 36px; text-align: center; width: 20px; } -@media screen and (min-width: 1px) and (max-width:766px){ -.grid-card { - right: 5px; - position: relative; - display: block; - z-index: 5; - width: 103%; -}} -@media screen and (min-width: 1px) and (max-width:766px){ -.grid-card-ar { - left: 5px; - position: relative; - display: block; - z-index: 5; - width: 103%; -}} -@media screen and (min-width: 768px) and (max-width:1050px){ -.grid-card { - right: 5px; - position: relative; - display: block; - z-index: 5; - width: 101%; -}} -@media screen and (min-width: 768px) and (max-width:1050px){ -.grid-card-ar { - left: 5px; - position: relative; - display: block; - z-index: 5; - width: 101%; -}} -@media screen and (min-width: 1px) and (max-width:766px){ -.changeImgBtn { - position: absolute; - background: #f0ecec; - min-height: 25px; - width: 24px !important; - height: 20px; - border-radius: 50%; - bottom: 55px; - right: 36%; - top: -15%; - z-index: 99; -}} -@media screen and (min-width: 768px) and (max-width:1050px){ -.changeImgBtn { - position: absolute; - background: #f0ecec; - min-height: 25px; - width: 24px !important; - height: 20px; - border-radius: 50%; - bottom: 55px; - right: 41%; - top: -10%; - z-index: 99; -}} -@media screen and (min-width: 1060px) and (max-width:1090px){ +@media screen and (min-width: 1px) and (max-width:766px) { + .grid-card { + right: 5px; + position: relative; + display: block; + z-index: 5; + width: 103%; + } +} + +@media screen and (min-width: 1px) and (max-width:766px) { + .grid-card-ar { + left: 5px; + position: relative; + display: block; + z-index: 5; + width: 103%; + } +} + +@media screen and (min-width: 768px) and (max-width:1050px) { + .grid-card { + right: 5px; + position: relative; + display: block; + z-index: 5; + width: 101%; + } +} + +@media screen and (min-width: 768px) and (max-width:1050px) { + .grid-card-ar { + left: 5px; + position: relative; + display: block; + z-index: 5; + width: 101%; + } +} + +@media screen and (min-width: 1px) and (max-width:766px) { + .changeImgBtn { + position: absolute; + background: #f0ecec; + min-height: 25px; + width: 24px !important; + height: 20px; + border-radius: 50%; + bottom: 55px; + right: 36%; + top: -15%; + z-index: 99; + } +} + +@media screen and (min-width: 768px) and (max-width:1050px) { + .changeImgBtn { + position: absolute; + background: #f0ecec; + min-height: 25px; + width: 24px !important; + height: 20px; + border-radius: 50%; + bottom: 55px; + right: 41%; + top: -10%; + z-index: 99; + } +} + +@media screen and (min-width: 1060px) and (max-width:1090px) { .changeImgBtn { position: absolute; background: #f0ecec; @@ -1084,9 +1163,10 @@ $actionBtnSize: 36px; right: 41%; top: -10%; z-index: 99; - }} + } +} -@media screen and (min-width: 1px) and (max-width:766px){ +@media screen and (min-width: 1px) and (max-width:766px) { .changeImgBtn-ar { position: absolute; background: #f0ecec; @@ -1098,8 +1178,10 @@ $actionBtnSize: 36px; left: 36%; top: -15%; z-index: 99; - }} - @media screen and (min-width: 768px) and (max-width:1050px){ + } +} + +@media screen and (min-width: 768px) and (max-width:1050px) { .changeImgBtn-ar { position: absolute; background: #f0ecec; @@ -1111,20 +1193,23 @@ $actionBtnSize: 36px; left: 41%; top: -10%; z-index: 99; - }} - @media screen and (min-width: 1060px) and (max-width:1090px){ - .changeImgBtn-ar { - position: absolute; - background: #f0ecec; - min-height: 25px; - width: 24px !important; - height: 20px; - border-radius: 50%; - bottom: 55px; - left: 46%; - top: -10%; - z-index: 99; - }} + } +} + +@media screen and (min-width: 1060px) and (max-width:1090px) { + .changeImgBtn-ar { + position: absolute; + background: #f0ecec; + min-height: 25px; + width: 24px !important; + height: 20px; + border-radius: 50%; + bottom: 55px; + left: 46%; + top: -10%; + z-index: 99; + } +} .menubutton { background: #f0ecec; @@ -1165,18 +1250,18 @@ $actionBtnSize: 36px; border: none; } -.card-size-info-en{ +.card-size-info-en { // width: 88%; // left: 2%; // width: 89%; // left: 10px; - width: 90%; - left: 5%; - padding-left: 0px; - margin-left: 0px; + width: 90%; + left: 5%; + padding-left: 0px; + margin-left: 0px; } -.card-size-info-ar{ +.card-size-info-ar { width: 90%; right: 3%; padding-right: 0px; @@ -1203,12 +1288,18 @@ $actionBtnSize: 36px; // color: #2B353E; // opacity: 1; // } -.update{ - --background: #20A169; background: white; width: 100%; +.update { + --background: #20A169; + background: white; + width: 100%; } -.add{ - --background: #00bcd4; background: white; width: 100%; + +.add { + --background: #00bcd4; + background: white; + width: 100%; } + .add-icon-styling { background-color: #191814; width: 35px; @@ -1216,10 +1307,11 @@ $actionBtnSize: 36px; color: white; border-radius: 50%; position: absolute; - right: 30px; + left: 20px; + right: 20px; } -.name{ +.name { text-align: center; letter-spacing: -0.84px; color: #2B353E; @@ -1228,7 +1320,8 @@ $actionBtnSize: 36px; line-height: 21px; font-size: 21px; } -.email{ + +.email { text-align: center; font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-size: 13px; @@ -1239,19 +1332,19 @@ $actionBtnSize: 36px; } -.subTitle{ +.subTitle { text-align: center; letter-spacing: -0.52px; color: #A2A2A2; opacity: 1; font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-size: 13px; - line-height: 0px; + line-height: 0px; margin-bottom: 7px; } -.boldText{ +.boldText { text-align: center; letter-spacing: -0.64px; color: #2B353E; @@ -1261,15 +1354,15 @@ $actionBtnSize: 36px; line-height: 19px; } -.btnTitle{ +.btnTitle { text-align: center; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 10px; - font-size: 11px; + font-size: 11px; color: #4D4D4D; } -.Profileheader-label-text-form{ +.Profileheader-label-text-form { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 30px; @@ -1281,8 +1374,8 @@ $actionBtnSize: 36px; margin-bottom: 2px; } -.header-label-text-form{ - text-align: left; +.header-label-text-form { + text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 30px; font-size: 20px; @@ -1291,10 +1384,11 @@ $actionBtnSize: 36px; opacity: 1; margin-top: -3px; margin-bottom: 2px; - margin-left: -11px;} + margin-left: -11px; +} -.type-label-text-form{ +.type-label-text-form { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 20px; @@ -1304,7 +1398,7 @@ $actionBtnSize: 36px; opacity: 1; } -.result-label-text-form{ +.result-label-text-form { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 20px; @@ -1315,7 +1409,7 @@ $actionBtnSize: 36px; } -.Profileheader-label-text-form-ar{ +.Profileheader-label-text-form-ar { text-align: right; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 30px; @@ -1327,8 +1421,8 @@ $actionBtnSize: 36px; margin-bottom: 2px; } -.header-label-text-form-ar{ - text-align: right; +.header-label-text-form-ar { + text-align: right; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 30px; font-size: 20px; @@ -1337,10 +1431,11 @@ $actionBtnSize: 36px; opacity: 1; margin-top: -3px; margin-bottom: 2px; - margin-left: -11px;} + margin-left: -11px; +} -.type-label-text-form-ar{ +.type-label-text-form-ar { text-align: right; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 20px; @@ -1350,7 +1445,7 @@ $actionBtnSize: 36px; opacity: 1; } -.result-label-text-form-ar{ +.result-label-text-form-ar { text-align: right; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 20px; @@ -1359,56 +1454,71 @@ $actionBtnSize: 36px; color: #2B353E; opacity: 1; } -.create-edit{ + +.create-edit { font-size: 20px; } -.profile-green{ - background: #20A16A; - margin-right: 5px; - width: 80px; - height: 8px; + +.profile-green { + background: #20A16A; + margin-right: 5px; + width: 80px; + height: 8px; border-radius: 5px; } -.profile-gray{ - background: #D9D9D9; - margin-right: 5px; - width: 80px; - height: 8px; +.profile-gray { + background: #D9D9D9; + margin-right: 5px; + width: 80px; + height: 8px; border-radius: 5px; } -.family-member-button{ - width: 115px; - height: 45px; - background-color: #F5F5F5; - display: flex; - align-items: center; - padding: 16px; + +.family-member-button { + width: 115px; + height: 45px; + background-color: #F5F5F5; + display: flex; + align-items: center; + padding: 16px; border-radius: 20px; box-shadow: 0px 0px 5px #00000029; } -.profile-note-en{ - margin-left: 20px; - margin-top: 5px; + +.profile-note-en { + margin-left: 20px; + margin-top: 5px; font-size: 13px; } -.profile-note-ar{ - margin-right: 20px; - margin-top: 5px; + +.profile-note-ar { + margin-right: 20px; + margin-top: 5px; font-size: 13px; } -.profile-compilation-en{ - margin-left: 20px; - margin-top: 5px; +.profile-compilation-en { + margin-left: 20px; + margin-top: 5px; font-size: 13px; } -.profile-compilation-ar{ - margin-left: 20px; - margin-top: 5px; + +.profile-compilation-ar { + margin-left: 20px; + margin-top: 5px; font-size: 13px; } -.disabledButton{ - opacity:.5; -pointer-events: none; + +.disabledButton { + opacity: .5; + pointer-events: none; } + +.icon-img { + width: 20px; + height: 20px; + position: relative; + left: 20px; + right: 20px; +} \ No newline at end of file