From a78efed0d1ae809738fc503d499f626de7801eb5 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Tue, 30 Aug 2022 15:17:54 +0300 Subject: [PATCH] fixed moe css issues --- Mohem/src/app/app.component.scss | 10 +- .../authentication/login/login.component.html | 2 +- .../services-button.component.scss | 8 +- Mohem/src/app/home/home.page.scss | 18 +- Mohem/src/app/home/home.page.ts | 4 +- .../my-team/details/details.component.scss | 865 ++++++++------ .../src/app/my-team/home/home.component.scss | 168 +-- .../subordinate-leave.component.html | 4 +- .../worklist-advanced-search.component.scss | 27 +- .../worklist-main.component.scss | 540 +++++---- Mohem/src/theme/styles.scss | 5 +- Mohem/src/theme/worklist.scss | 1050 +++++++++-------- 12 files changed, 1449 insertions(+), 1252 deletions(-) diff --git a/Mohem/src/app/app.component.scss b/Mohem/src/app/app.component.scss index d676be0c..a24939c4 100644 --- a/Mohem/src/app/app.component.scss +++ b/Mohem/src/app/app.component.scss @@ -313,6 +313,7 @@ button.menu-item.item.item-block.item-ios { text-align: center; margin: auto; width: 100%; + position: absolute; } @@ -330,8 +331,8 @@ button.menu-item.item.item-block.item-ios { .menuFooter .CompanyImg { - width: 80%; - height: 80%; + width: 65%; + height: 60%; margin-bottom: -21px; } @@ -341,8 +342,9 @@ button.menu-item.item.item-block.item-ios { // } .logoImgWithMyTeam { - margin-bottom: 70px; - width: 250px; + + width: 225px; + margin: auto; } .logoImg { diff --git a/Mohem/src/app/authentication/login/login.component.html b/Mohem/src/app/authentication/login/login.component.html index bbac6512..3ed9f510 100644 --- a/Mohem/src/app/authentication/login/login.component.html +++ b/Mohem/src/app/authentication/login/login.component.html @@ -1,7 +1,7 @@ -
+
diff --git a/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss b/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss index f059da35..c8fa77c8 100644 --- a/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss +++ b/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss @@ -15,7 +15,8 @@ width: 100%; position: static; } -.iconBox img{ + +.iconBox img { margin: 0px auto 10px !important; display: block; width: 35px; @@ -27,9 +28,10 @@ } .pClass { - font-size: 9px; + font-size: 11px; text-align: center; margin-top: 10px; color: black; - font-weight: bold; + font-weight: 600; + } \ No newline at end of file diff --git a/Mohem/src/app/home/home.page.scss b/Mohem/src/app/home/home.page.scss index d3ea7515..7d09a6da 100644 --- a/Mohem/src/app/home/home.page.scss +++ b/Mohem/src/app/home/home.page.scss @@ -44,7 +44,7 @@ ion-title { ion-label { display: block; color: black !important; - font-size: 14px; + font-size: 16px; font-weight: bold; } @@ -72,7 +72,7 @@ ion-label { padding-bottom: 130px; } -.attendance-module{ +.attendance-module { border-radius: 20px; background-color: #387c84; padding: 10px; @@ -80,24 +80,28 @@ ion-label { width: 100%; margin-top: 25px; margin-bottom: 0px; - h3{ + + h3 { font-size: 18px; font-weight: bold; margin: 0; } - span{ + + span { font-size: 13px; display: block; } - img{ + + img { display: block; margin: 10px auto; width: 80%; } - ion-button{ + + ion-button { border-radius: 10px; padding: 10px; - background: rgba(0,0,0,.3); + background: rgba(0, 0, 0, .3); --background: transparent; --box-shadow: none !important; height: auto; diff --git a/Mohem/src/app/home/home.page.ts b/Mohem/src/app/home/home.page.ts index 65a33560..c09f9ad1 100644 --- a/Mohem/src/app/home/home.page.ts +++ b/Mohem/src/app/home/home.page.ts @@ -192,7 +192,7 @@ export class HomePage implements OnInit { public slideSettingsTwo() { const width = this.platform.width(); this.slideOptsOne = { - slidesPerView: width > 320 ? 3.5 : 3, + slidesPerView: width > 320 ? 3.2 : 3, spaceBetween: 10 }; this.slideOptsTwo = { @@ -786,7 +786,7 @@ export class HomePage implements OnInit { // if (subMenu.REQUEST_TYPE === 'EIT' && subMenu.FUNCTION_NAME === 'XXX_HR_EIT_LOA_CREATE_SS') { if (subMenu.REQUEST_TYPE === 'EIT') { // this.common.openAbsencePage(); - this.common.openEitListPage(); + this.common.openEitListPage(); } else if (subMenu.REQUEST_TYPE === 'EIT') { this.common.openEitListPage(); } else if (subMenu.REQUEST_TYPE === 'PAYSLIP') { diff --git a/Mohem/src/app/my-team/details/details.component.scss b/Mohem/src/app/my-team/details/details.component.scss index 7fa92f41..ea646d5a 100644 --- a/Mohem/src/app/my-team/details/details.component.scss +++ b/Mohem/src/app/my-team/details/details.component.scss @@ -1,7 +1,8 @@ ion-content { --ion-background-color: whitesmoke; } -ion-title{ + +ion-title { color: white; position: absolute; top: 0; @@ -13,25 +14,27 @@ ion-title{ height: 100%; font-family: WorkSans-Regular; } -.contentBg{ + +.contentBg { padding: 0px 20px; } .contentBg:before { position: absolute; - content: ""; - background: #024d71; - height: 140px; - width: 100%; - left: 0; - top: 0px; - z-index: 1; -} - - .user-info{ - text-align: center; - margin-bottom: 15px; - .user-image-container{ + content: ""; + background: #024d71; + height: 140px; + width: 100%; + left: 0; + top: 0px; + z-index: 1; +} + +.user-info { + text-align: center; + margin-bottom: 15px; + + .user-image-container { position: relative; width: 100%; height: 24px; @@ -40,101 +43,113 @@ ion-title{ margin: 0 auto; align-items: center; } - // position: relative; - // width: 80px; - // height: 80px; - // 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; - // } - } - - @media screen and (min-width: 1px) and (max-width:767px){ - .user-image{ - position: relative; - display: block; - width: 30%; - height: 100%; - border-radius: 80px; - /* border: 1px solid #ccc; */ - margin-top: -125px; - }} - @media screen and (min-width: 768px) and (max-width:1024px){ - .user-image{ + // position: relative; + // width: 80px; + // height: 80px; + // 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; + // } +} + +@media screen and (min-width: 1px) and (max-width:767px) { + .user-image { + position: relative; + display: block; + width: 30%; + height: 100%; + border-radius: 80px; + /* border: 1px solid #ccc; */ + margin-top: -125px; + + } +} + +@media screen and (min-width: 768px) and (max-width:1024px) { + .user-image { position: relative; display: block; width: 30%; height: 100%; border-radius: 80px; margin-bottom: 371px; - }} - h1{ - margin: 0; - padding: 0; - font-family: WorkSans-Bold; - font-size: 18px; - margin-bottom: 4px; - } - span{ - font-size: 12px; - display: block; - // color: #888 - - } - - $actionBtnSize : 36px; - .user-actions{ - text-align: center; - margin-left: 1px; - .action-button{ - font-size: 11px; - font-weight: bold; - // white-space: nowrap; - // color: #888; - .action-button-icon{ - width: $actionBtnSize; - height: $actionBtnSize; - border-radius: $actionBtnSize; - margin: 0 auto; - display: block; - background-color: #024d71; - line-height: $actionBtnSize; - margin-bottom: 3px; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - display: flex; - img{ - margin: 0 auto; - vertical-align: middle; - } - .span{ + } +} + +h1 { + margin: 0; + padding: 0; + font-family: WorkSans-Bold; + font-size: 18px; + margin-bottom: 4px; +} + +span { + font-size: 12px; + display: block; + // color: #888 + +} + +$actionBtnSize : 36px; + +.user-actions { + text-align: center; + margin-left: 1px; + + .action-button { + font-size: 11px; + font-weight: bold; + + // white-space: nowrap; + // color: #888; + .action-button-icon { + width: $actionBtnSize; + height: $actionBtnSize; + border-radius: $actionBtnSize; + margin: 0 auto; + display: block; + background-color: #024d71; + line-height: $actionBtnSize; + margin-bottom: 3px; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + display: flex; + + img { + margin: 0 auto; + vertical-align: middle; + } + + .span { font-size: 10px; display: block; font-family: var(--fontFamilyPoppins-SemiBold, inherit); - } - } - } - } + } + } + } +} - .employee-information-indetail{ +.employee-information-indetail { background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 0px 5px #00000029; border-radius: 20px; opacity: 1; - } +} + // .employee-information-indetail{ // background: white; // margin-top: 15px; @@ -169,7 +184,7 @@ ion-title{ color: black; } -@media screen and (min-width: 1px) and (max-width:767px){ +@media screen and (min-width: 1px) and (max-width:767px) { .active-Segment { width: 11%; max-width: 11%; @@ -181,14 +196,16 @@ ion-title{ // margin-right: 22px; // margin-left: 22px; margin-left: 30px; + margin-right: 30px; background-color: #024d71; display: flex; - } } - @media screen and (min-width: 768px) and (max-width:1024px){ - .active-Segment{ +} + +@media screen and (min-width: 768px) and (max-width:1024px) { + .active-Segment { - background: #024d71 !important; + background: #024d71 !important; // padding-left: 17px; // display: flex; width: 11%; @@ -203,11 +220,12 @@ ion-title{ margin-left: 57px; // margin-left: 14px; display: flex; - - }} - @media screen and (min-width: 1px) and (max-width:767px){ - .normal-Segment { + } +} + +@media screen and (min-width: 1px) and (max-width:767px) { + .normal-Segment { width: 11%; max-width: 11%; min-width: 39px; @@ -220,11 +238,12 @@ ion-title{ margin-left: 30px; background: #414040 !important; display: flex; - - } + margin-right: 30px; } - @media screen and (min-width: 768px) and (max-width:1024px){ - .normal-Segment{ +} + +@media screen and (min-width: 768px) and (max-width:1024px) { + .normal-Segment { width: 11%; max-width: 11%; min-width: 39px; @@ -238,12 +257,13 @@ ion-title{ // margin-left: 14px; background: #414040 !important; display: flex; - }} + } +} + - - @media screen and (min-width: 1px) and (max-width:767px){ - .imgSize{ +@media screen and (min-width: 1px) and (max-width:767px) { + .imgSize { position: absolute; /* right: 15px; */ top: 0; @@ -252,22 +272,28 @@ ion-title{ margin: auto; height: 18px; display: flex; - }} - @media screen and (min-width: 768px) and (max-width:1024px){ - .imgSize{position: absolute; + } +} + +@media screen and (min-width: 768px) and (max-width:1024px) { + .imgSize { + position: absolute; top: 0; bottom: 0; - left: 2px; + left: 2px; margin: auto; height: 28px; - display: flex;}} + display: flex; + } +} - .colum-container{ +.colum-container { padding: 15px; border-bottom: 1px solid #ccc; - } - .img{ +} + +.img { width: 100px; height: 100px; display: inline-flex; @@ -277,21 +303,24 @@ ion-title{ /* top: 34px; */ background: transparent; margin-left: -3px; - } - ///////////////////////// Team Members css //////////////////////@extend +} + +///////////////////////// Team Members css //////////////////////@extend .filters-row { margin-top: 10px; } -.search-dropdown{ +.search-dropdown { background: #024d71; + ion-select { - .select-text{ + .select-text { margin-left: -10px; } - .select-icon{ - .select-icon-inner{ + + .select-icon { + .select-icon-inner { opacity: 1; color: white; margin-top: -1px; @@ -300,27 +329,31 @@ ion-title{ } } -.input-container{ +.input-container { background: white; - ion-input{ + + ion-input { border-bottom-color: transparent; } } -.search-container{ +.search-container { margin-top: 15px; - ion-col{ + + ion-col { background: white; border-radius: 12px; padding-right: 10px; flex: none; - ion-icon{ + + ion-icon { margin-right: 3px; font-size: 14px; margin-left: 3px; vertical-align: middle; } - span{ + + span { font-size: 12px; vertical-align: middle; } @@ -329,39 +362,42 @@ ion-title{ /////////////////////////////////////////////////////// Attendance /////////////////////// -.header{ +.header { // margin-top: 20px; margin-top: 1px; } -.slidPrev{ +.slidPrev { margin-left: 10px; background: transparent; } - -.slidNext{ + +.slidNext { background: transparent; margin-top: -1px; margin-left: 43px; } -.activeArrow{ + +.activeArrow { height: 20px; width: 20px; color: #024d71; } -.disabledArrow{ + +.disabledArrow { height: 20px; width: 20px; color: gray; } -.activeArrow-ar{ +.activeArrow-ar { height: 20px; - width: 20px; - color: #024d71; - margin-right: 275px; + width: 20px; + color: #024d71; + margin-right: 275px; } -.disabledArrow-ar{ + +.disabledArrow-ar { height: 20px; width: 20px; color: gray; @@ -369,22 +405,23 @@ ion-title{ margin-right: -251px; } -@media screen and (min-width: 1px) and (max-width:767px){ -.result-graph { - position: relative; - background: white; - // margin-top: 20px; - padding-bottom: 5px; - border-radius: 20px; - z-index: 1; - margin-bottom: 10px; - margin-top: 56px; - border-radius: 20px; - border: 1px solid #ccc; - padding-top: 12px; -}} +@media screen and (min-width: 1px) and (max-width:767px) { + .result-graph { + position: relative; + background: white; + // margin-top: 20px; + padding-bottom: 5px; + border-radius: 20px; + z-index: 1; + margin-bottom: 10px; + margin-top: 56px; + border-radius: 20px; + border: 1px solid #ccc; + padding-top: 12px; + } +} -@media screen and (min-width: 768px) and (max-width:1024px){ +@media screen and (min-width: 768px) and (max-width:1024px) { .result-graph { position: relative; background: white; @@ -397,7 +434,9 @@ ion-title{ border-radius: 20px; border: 1px solid #ccc; padding-top: 114px !important; - }} + } +} + .result-graph-attendence { position: relative; background: white; @@ -418,7 +457,8 @@ ion-title{ margin-bottom: 10px; margin-left: 10px; } -.request-heading-ar{ + +.request-heading-ar { text-align: right; display: block; padding-top: 8px; @@ -435,12 +475,14 @@ ion-title{ 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; @@ -448,57 +490,61 @@ ion-title{ font-size: 12px; font-family: workSans-Regular; } - } - @media screen and (min-width: 325px){ - .today-graph { - // width: 100%; - max-height: 4cm; - display: block; - height: 132px; - width: 264px; - margin-left: 154px; - }} - @media screen and (min-width: 1px) and (max-width:320px) { - .today-graph { - // width: 100%; - max-height: 4cm; - display: block; - height: 132px; - width: 264px; - margin-left: 84px; - }} +} - .today-graph-ar { +@media screen and (min-width: 325px) { + .today-graph { + // width: 100%; + max-height: 4cm; + display: block; + height: 132px; + width: 264px; + margin-left: 154px; + } +} + +@media screen and (min-width: 1px) and (max-width:320px) { + .today-graph { + // width: 100%; + max-height: 4cm; + display: block; + height: 132px; + width: 264px; + margin-left: 84px; + } +} + +.today-graph-ar { max-height: 4cm; display: block; height: 132px; width: 264px; margin-right: -74px; - } +} -.green-label{ +.green-label { font-size: 12px; margin-top: -13px; } - -.green-amount{ + +.green-amount { font-size: 17px; font-family: WorkSans-Bold; margin-top: -3px; } - -.blue-label{ + +.blue-label { font-size: 12px; margin-top: -13px; } - -.blue-amount{ + +.blue-amount { font-size: 17px; font-family: WorkSans-Bold; margin-top: -4px; } -.labelGrid{ +.labelGrid { background-color: white !important; border-radius: 20px !important; height: 88px !important; @@ -511,21 +557,22 @@ ion-title{ line-height: 11px !important; display: block; } + h2 { font-size: 25px; font-weight: bold; display: block; text-align: right; - margin:0; + margin: 0; position: absolute; bottom: 0; - left:0; + left: 0; width: 100%; padding: 10px; } } -.bodyGrid{ +.bodyGrid { margin-top: 7px !important; margin-left: 15px !important; margin-right: 15px !important; @@ -535,7 +582,7 @@ ion-title{ border: 1px solid #d6d4d4 !important; } -.attendance-information{ +.attendance-information { background: white; border-radius: 20px; padding: 9px; @@ -543,19 +590,20 @@ ion-title{ // border-right: 1px solid rgb(221, 221, 221); // @media screen and (min-width: 300px) and (max-width:359px) { - h2{ - padding: 0; - margin: 0; - font-size: 10px; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - } - span{ - font-size: 10px; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - } - + h2 { + padding: 0; + margin: 0; + font-size: 10px; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + } + + span { + font-size: 10px; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + } + // } - + // @media screen and (min-width: 360px) { // h2{ // padding: 0; @@ -568,41 +616,49 @@ ion-title{ // font-family: var(--fontFamilyPoppins-SemiBold, inherit); // margin-bottom: 3px; // } - + // } - } - @media screen and (min-width: 325px) { - .statsIcon{ - background: white; - margin-left: 12px; - margin-top: 6px; - }} - @media screen and (min-width: 1px) and (max-width:320px) { - .statsIcon{ - background: white; - margin-left: -15px; - margin-top: 6px; - }} - - @media screen and (min-width: 325px) { - .statsIcon-ar{ - background: white; -// margin-left: 12px; - margin-top: 6px; -}} +} + +@media screen and (min-width: 325px) { + .statsIcon { + background: white; + margin-left: 12px; + margin-top: 6px; + } +} + @media screen and (min-width: 1px) and (max-width:320px) { -.statsIcon-ar{ - background: white; - margin-right: -2px; - margin-top: 6px; -}} -.month-year-span{ + .statsIcon { + background: white; + margin-left: -15px; + margin-top: 6px; + } +} + +@media screen and (min-width: 325px) { + .statsIcon-ar { + background: white; + // margin-left: 12px; + margin-top: 6px; + } +} + +@media screen and (min-width: 1px) and (max-width:320px) { + .statsIcon-ar { + background: white; + margin-right: -2px; + margin-top: 6px; + } +} + +.month-year-span { font-size: 16px; // font-family: WorkSans-Bold; font-weight: bold; } -.green-label-container{ +.green-label-container { // border-top: 5px solid #024d71; // padding: 1px 0px; // margin: 15px 0px @@ -611,10 +667,10 @@ ion-title{ padding-right: -10px; border-radius: 100%; background-color: #024d71; - + } -.blue-label-container{ +.blue-label-container { // border-top: 5px solid #292F42; // padding: 1px 0px; // margin: 15px 0px @@ -625,7 +681,8 @@ ion-title{ background-color: #292F42; margin-top: 30px; } -.span-one{ + +.span-one { // display: block; // font-size: 12px; // color: black; @@ -635,9 +692,10 @@ ion-title{ margin-left: 6px; margin-top: -2px; font-weight: bold; - + } -.span-two{ + +.span-two { // display: block; // font-size: 22px; display: block; @@ -647,10 +705,10 @@ ion-title{ margin-top: -2px; font-weight: bold; font-family: WorkSans-Bold; - + } -.spa-one{ +.spa-one { // display: block; // font-size: 12px; // color: black; @@ -660,9 +718,10 @@ ion-title{ margin-left: 6px; margin-top: 28px; font-weight: bold; - + } -.spa-two{ + +.spa-two { // display: block; // font-size: 22px; display: block; @@ -672,91 +731,102 @@ ion-title{ margin-top: 28px; font-weight: bold; font-family: WorkSans-Bold; - + } -.graph-container{ + +.graph-container { margin-left: -50px; position: relative; margin-right: 50px; } -.graph-container-ar{ +.graph-container-ar { margin-right: -50px; position: relative; margin-left: 50px; } -.label-container{ + +.label-container { position: absolute; // width: 20%; // right: 30px; top: 50%; margin-top: -27px; left: 20px; - + } -@media screen and (min-width: 325px){ -.attendance-summary .attendance-information { - span{ - height: 32px; - display: block; - line-height: 14px; - } - h2{ - // text-align: right; - // font-family: WorkSans-Bold; - font-weight: bolder; - font-size: 13px; + +@media screen and (min-width: 325px) { + .attendance-summary .attendance-information { + span { + height: 32px; + display: block; + line-height: 14px; + } + + h2 { + // text-align: right; + // font-family: WorkSans-Bold; + font-weight: bolder; + font-size: 13px; + } + } - -}} +} + @media screen and (min-width: 1px) and (max-width:320px) { -.attendance-summary .attendance-information { - span{ - height: 32px; - display: block; - line-height: 7px; - font-size: 7px; - } - h2{ - // text-align: right; - // font-family: WorkSans-Bold; - font-weight: bolder; - font-size: 13px; + .attendance-summary .attendance-information { + span { + height: 32px; + display: block; + line-height: 7px; + font-size: 7px; + } + + h2 { + // text-align: right; + // font-family: WorkSans-Bold; + font-weight: bolder; + font-size: 13px; + } + } - -}} +} -.calendar-container{ +.calendar-container { background: white; margin-bottom: 100px; margin-top: 10px; border-radius: 20px; border: 1px solid #ccc; padding-bottom: 25px; - span{ + + span { text-align: left; display: block; padding-top: 8px; margin-bottom: 10px; margin-left: 10px; } - } - .calendar-container-ar{ +} + +.calendar-container-ar { background: white; margin-bottom: 100px; margin-top: 20px; border-radius: 20px; - span{ - text-align: right; - display: block; - padding-top: 8px; - margin-bottom: 6px; - margin-right: 12px; + + span { + text-align: right; + display: block; + padding-top: 8px; + margin-bottom: 6px; + margin-right: 12px; } - } +} + - -.Boldtext{ +.Boldtext { // font-size: 13px; // font-family: WorkSans-Bold; // color: black !important; @@ -770,40 +840,43 @@ ion-title{ line-height: 19px; } -.attendence{ - position: relative; +.attendence { + position: relative; background: white; border-radius: 20px; border: 1px solid #ccc; } -.attendence-text{ +.attendence-text { margin-bottom: 1px; margin-left: 10px; // font-family: WorkSans-Bold; font-size: 16px; font-family: var(--fontFamilyPoppins-SemiBold, inherit); } -.stats{ - color: #289DB8; font-size: 9px; - margin-right: 5px; - font-family: 'WorkSans-Bold'; + +.stats { + color: #289DB8; + font-size: 9px; + margin-right: 5px; + font-family: 'WorkSans-Bold'; } -.stats-ar{ - color: #289DB8; font-size: 9px; - margin-left: 5px; - font-family: 'WorkSans-Bold'; +.stats-ar { + color: #289DB8; + font-size: 9px; + margin-left: 5px; + font-family: 'WorkSans-Bold'; } -.text{ +.text { font-size: 16px; font-weight: bolder; font-family: 'WorkSans-Bold'; margin-top: 27px; } -.number{ +.number { width: 22px; height: 20px; border-radius: 100%; @@ -813,7 +886,7 @@ ion-title{ padding-left: 4px; } -.number-ar{ +.number-ar { width: 22px; height: 20px; border-radius: 100%; @@ -823,7 +896,7 @@ ion-title{ padding-right: 4px; } -.numberEmp{ +.numberEmp { color: white; font-size: 12px; font-weight: bolder; @@ -831,35 +904,39 @@ ion-title{ padding-top: 2px; } -.slider-container{ +.slider-container { padding-bottom: 20px; } .filters-row { margin-top: 10px; margin-left: 20px; - } +} - .disable-filter { - pointer-events: none; - opacity: .3; - } -.favIcon{ - height: 18px; margin-left: 23px; +.disable-filter { + pointer-events: none; + opacity: .3; } -.favIcon-ar{ - height: 18px; margin-right: 23px; +.favIcon { + height: 18px; + margin-left: 23px; } -.call{ +.favIcon-ar { + height: 18px; + margin-right: 23px; +} + +.call { margin-right: 16px; } - -.call-ar{ + +.call-ar { margin-left: 16px; } -.name{ + +.name { text-align: center; letter-spacing: -0.84px; color: #2B353E; @@ -868,7 +945,8 @@ ion-title{ line-height: 21px; font-size: 21px; } -.email{ + +.email { text-align: center; font-family: var(--fontFamilyPoppins-SemiBold, inherit); font-size: 13px; @@ -878,27 +956,30 @@ ion-title{ opacity: 1; padding-top: 3px; } -.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; } -.profile{ - text-align: left; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 20px; - font-size: 20px; - letter-spacing: -0.8px; - color: #2B353E; - opacity: 1; - margin-top: 20px; - margin-bottom: 2px; -} -.label1{ + +.profile { + text-align: left; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + line-height: 20px; + font-size: 20px; + letter-spacing: -0.8px; + color: #2B353E; + opacity: 1; + margin-top: 20px; + margin-bottom: 2px; +} + +.label1 { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 0px; @@ -908,7 +989,7 @@ ion-title{ opacity: 1; } -.label2{ +.label2 { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 5px; @@ -918,56 +999,66 @@ ion-title{ opacity: 1; } -.profile-ar{ +.profile-ar { text-align: right; - font-family: var(--fontFamilyPoppins-SemiBold, inherit); - line-height: 20px; - font-size: 20px; - letter-spacing: -0.8px; - color: #2B353E; - opacity: 1; - margin-top: 20px; - margin-bottom: 2px; -} -.label1-ar{ -text-align: right; -font-family: var(--fontFamilyPoppins-SemiBold, inherit); -line-height: 0px; -font-size: 13px; -letter-spacing: -0.52px; -color: #A2A2A2; -opacity: 1; -} - -.label2-ar{ -text-align: right; -font-family: var(--fontFamilyPoppins-SemiBold, inherit); -line-height: 5px; -font-size: 16px; -letter-spacing: -0.64px; -color: #2B353E; -opacity: 1; -} -@media screen and (min-width: 768px) and (max-width:1024px){ -.div{ - position: relative; - display: flex; - margin-left: 48px; - -}} -@media screen and (min-width: 1px) and (max-width:767px){ -.div{ - position: relative; - display: flex; - margin-left: -1px; -}} + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + line-height: 20px; + font-size: 20px; + letter-spacing: -0.8px; + color: #2B353E; + opacity: 1; + margin-top: 20px; + margin-bottom: 2px; + padding: 5px; + font-weight: bold; +} + +.label1-ar { + text-align: right; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + line-height: 0px; + font-size: 18px; + letter-spacing: -0.52px; + color: #A2A2A2; + opacity: 1; + padding: 1px 5px 1px 5px; +} + +.label2-ar { + text-align: right; + font-family: var(--fontFamilyPoppins-SemiBold, inherit); + line-height: 5px; + font-size: 18px; + letter-spacing: -0.64px; + color: #2B353E; + opacity: 1; + padding: 1px 5px 1px 5px; +} + +@media screen and (min-width: 768px) and (max-width:1024px) { + .div { + position: relative; + display: flex; + margin-left: 48px; -.MyTeamdiv{ + } +} + +@media screen and (min-width: 1px) and (max-width:767px) { + .div { + position: relative; + display: flex; + margin-left: -1px; + } +} + +.MyTeamdiv { position: relative; display: flex; margin-bottom: -12px; } -.numberEmp{ + +.numberEmp { color: white; font-size: 12px; font-weight: bolder; @@ -985,7 +1076,7 @@ opacity: 1; padding-top: 3px; } -.numberEmp-ar{ +.numberEmp-ar { color: white; font-size: 12px; font-weight: bolder; @@ -1003,7 +1094,7 @@ opacity: 1; padding-top: 3px; } -.MyTeamtext{ +.MyTeamtext { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 11px; @@ -1015,23 +1106,21 @@ opacity: 1; margin-bottom: 28px; } - .btnTitle{ +.btnTitle { text-align: center; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 10px; - font-size: 11px; + font-size: 16px; color: #4D4D4D; margin-top: -13px; - } -.btnDiv{ + font-weight: bold; +} + +.btnDiv { position: relative; display: flex; justify-content: space-between; margin-bottom: -15px; margin-top: -12px; -} - - - - \ No newline at end of file +} \ No newline at end of file diff --git a/Mohem/src/app/my-team/home/home.component.scss b/Mohem/src/app/my-team/home/home.component.scss index 8d9d7f3e..28895feb 100644 --- a/Mohem/src/app/my-team/home/home.component.scss +++ b/Mohem/src/app/my-team/home/home.component.scss @@ -1,4 +1,4 @@ -ion-title{ +ion-title { color: white; position: absolute; top: 0; @@ -11,31 +11,35 @@ ion-title{ } @media only screen and (max-width: 360px) { - .contentBg{ + .contentBg { padding: 0px 15px !important; } } -.contentBg{ +.contentBg { padding: 0px 20px; } .contentBg:before { position: absolute; - content: ""; - background: #024d71; - height: 140px; - width: 100%; - left: 0; - top: 0px; - z-index: 1; + content: ""; + background: #024d71; + height: 140px; + width: 100%; + left: 0; + top: 0px; + z-index: 1; } + ion-content { --ion-background-color: whitesmoke; } + .request-heading { - padding-left: 15px; + padding-left: 20px; margin-top: 10px; + padding-right: 20px; + span { // display: block; // padding-top: 8px; @@ -46,14 +50,14 @@ ion-content { text-align: left; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 18px; - font-size: 12px; + letter-spacing: -0.48px; color: #2B353E; opacity: 1; } } -.search-label{ +.search-label { // border: 1px solid #ccc; // margin-left: 15px; // margin-right: 15px; @@ -80,8 +84,9 @@ ion-content { border-radius: 20px; z-index: 1; border: 1px solid #ccc; - } - .result-text-container { +} + +.result-text-container { padding: 0; margin: 0; position: absolute; @@ -90,12 +95,14 @@ ion-content { 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; @@ -103,35 +110,42 @@ ion-content { font-size: 12px; font-family: workSans-Regular; } - } - .today-graph { +} + +.today-graph { width: 100%; max-height: 4cm; - } +} .swiper-container { margin: 0 !important; width: 100% !important; } + .filters-row { margin-top: 10px; } + .search-input { margin-top: 15px; background: white; border-radius: 15px; + ion-input { border-bottom-color: transparent; } } -.search-dropdown{ + +.search-dropdown { background: #024d71; + ion-select { - .select-text{ + .select-text { margin-left: -10px; } - .select-icon{ - .select-icon-inner{ + + .select-icon { + .select-icon-inner { opacity: 1; color: white; margin-top: -1px; @@ -139,36 +153,41 @@ ion-content { } } } -.input-container{ + +.input-container { background: white; - ion-input{ + + ion-input { border-bottom-color: transparent; } } -.user-image-container{ +.user-image-container { position: relative; width: 80px; height: 80px; 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; - } + + &: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{ + +.user-image { overflow: hidden; position: relative; display: block; @@ -179,7 +198,7 @@ ion-content { margin: 0px auto 6px; } -.search-container{ +.search-container { // margin-top: 15px; // margin-top: -35px; // margin-left: 262px; @@ -189,18 +208,21 @@ ion-content { top: 45px; right: 38px; z-index: 999999; - ion-col{ + + ion-col { // background: white; // border-radius: 12px; // padding-right: 10px; flex: none; - ion-icon{ + + ion-icon { margin-right: 3px; font-size: 14px; margin-left: 3px; vertical-align: middle; } - span{ + + span { font-size: 12px; vertical-align: middle; } @@ -215,19 +237,19 @@ ion-content { // } @media only screen and (max-width: 375px) { - .text-label{ + .text-label { margin-left: 6px !important; - } + } } @media only screen and (max-width: 320px) { - .text-label{ + .text-label { margin-left: 2px !important; - } + } } -.text-label{ +.text-label { // --color: black !important; // font-size: 13px; // margin-left: 15px; @@ -236,15 +258,15 @@ ion-content { // font: normal normal 600 12px/18px Poppins; font-family: var(--fontFamilyPoppins-SemiBold, inherit); line-height: 18px; - font-size: 12px; + font-size: 14px; letter-spacing: -0.48px; color: #575757 !important; opacity: 1; margin-left: 15px; margin-right: 18px; -} +} -.radio-list{ +.radio-list { background: white; // margin-left: 18px; /* margin-right: 10px; */ @@ -256,18 +278,20 @@ ion-content { // color: red; // } - .radio-icon{ - -.custom-radio .radio-icon { - margin: 0px; - border-radius: 50%; - border-width: var(--border-width); - border-style: var(--border-style); - border-color: #dcdcdc; - margin-top: 6px !important; - border-color: #d8d4d4 !important;} +.radio-icon { + + .custom-radio .radio-icon { + margin: 0px; + border-radius: 50%; + border-width: var(--border-width); + border-style: var(--border-style); + border-color: #dcdcdc; + margin-top: 6px !important; + border-color: #d8d4d4 !important; + } } -.text{ + +.text { // font-size: 16px; // font-weight: bolder; // font-family: 'WorkSans-Bold'; @@ -301,7 +325,7 @@ ion-content { // margin-left: 3px; // padding-top: 2px; // } -.number{ +.number { width: 22px; height: 20px; border-radius: 100%; @@ -310,7 +334,8 @@ ion-content { margin-top: 25px; padding-left: 4px; } -.number-ar{ + +.number-ar { width: 22px; height: 20px; border-radius: 100%; @@ -319,7 +344,8 @@ ion-content { margin-top: 25px; padding-right: 4px; } -.numberEmp{ + +.numberEmp { color: white; font-size: 12px; font-weight: bolder; @@ -336,7 +362,8 @@ ion-content { text-align: center; padding-top: 3px; } -.numberEmp-ar{ + +.numberEmp-ar { color: white; font-size: 12px; font-weight: bolder; @@ -353,9 +380,10 @@ ion-content { text-align: center; padding-top: 3px; } -.div{ + +.div { position: relative; display: flex; // justify-content: space-between; margin-bottom: -12px; -} +} \ No newline at end of file diff --git a/Mohem/src/app/my-team/subordinate-leave/subordinate-leave.component.html b/Mohem/src/app/my-team/subordinate-leave/subordinate-leave.component.html index 8adf1dde..7a6cd979 100644 --- a/Mohem/src/app/my-team/subordinate-leave/subordinate-leave.component.html +++ b/Mohem/src/app/my-team/subordinate-leave/subordinate-leave.component.html @@ -14,7 +14,7 @@ - {{ts.trPK('general','from')}} + {{ts.trPK('general','from')}} - {{ts.trPK('general','to')}} + {{ts.trPK('general','to')}}