MOE design changes

MOE_DEV_NEW_DESIGN
Sultan Khan 3 years ago
parent dc6f77ecd7
commit 70269751fb

@ -27,7 +27,7 @@
<ion-list class="list-en" >
<ion-item (click)="openMenu()" lines="none">
<ion-item (click)="profile()" lines="none">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 24px !important;" src="../assets/imgs/profile_icon.png" item-left>
</ion-thumbnail>
@ -149,7 +149,7 @@
<br>
<ion-list class="list-ar" >
<ion-item (click)="openMenu()" lines="none">
<ion-item (click)="profile()" lines="none">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 24px !important;" src="../assets/imgs/profile_icon.png" item-left>
</ion-thumbnail>

@ -1,7 +1,7 @@
<ion-content padding>
<ion-grid class="customGrid">
<ion-row *ngIf="!user">
<div class="content">
<div class="content" dir="ltr">
<div class="first-circle"></div>
<div class="middle-circle"></div>
<div class="last-circle"></div>

@ -143,11 +143,11 @@ img.centerDiv {
color: var(--light);
text-transform: capitalize;
min-height: 57px;
border-radius: 12px !important;
--border-radius: 12px !important;
--min-height: 1.6cm !important;
width: 315px;
box-shadow: 0px 1px 6px #0000000F;
font-size: 18px;
font-size: 16px;
}
.button-digital-id {

@ -7,7 +7,7 @@
</div>
</div>
</ion-col>
<ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;">
<ion-col [size]="9" style="margin-top: 14px;">
<div>
<span [ngClass]=" direction == 'en'? 'employee-name' : 'employee-name-ar'" (click)="getDetails()">
<h2 class="name">{{name}}</h2>

@ -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;
border-radius: 12px;
padding-bottom: 8px;
margin-bottom: 7px;
margin-bottom: 12px;
box-shadow: 0px 1px 5px #0000000F;
}
// .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;
max-height: 60px;
border-radius: 50%;
margin: 10px 5px 5px 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-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 25px;
letter-spacing: -0.64px;
color: #004D71;
opacity: 1;
}
.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: 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;
}
}
.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: var(--fontFamilySemiBoldEN, inherit) !important;
line-height: 25px;
letter-spacing: -0.64px;
color: #004D71;
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: var(--fontFamilySemiBoldEN, inherit) !important;
line-height: 12px;
letter-spacing: -0.56px;
color: #5C6F79;
opacity: 1;
font-size: 14px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -5px;
}
}
.image-container{
.image-container {
width: 20%;
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 5px;
position: relative;
left: 0px;
top: 10px;
}
.swipe-information{
.image-container img {
height: 25px;
width: 25px;
}
.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;
}
}

@ -13,7 +13,7 @@
<span>{{ts.trPK('myTeam','search-by')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<ion-row class="custom-radio" >
<!-- <ion-col [size]="3" class="search-dropdown" no-padding> -->
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" class="radio-list" style="display: flex;">

@ -35,26 +35,33 @@ ion-content {
--ion-background-color: whitesmoke;
}
.request-heading {
padding-left: 15px;
margin-top: 10px;
span {
text-align: left;
font-weight: bold;
line-height: 18px;
font-size: 14px;
font-size: 18px;
letter-spacing: -0.48px;
color: #004D71;
opacity: 1;
margin: 10px;
padding: 10px;
}
}
ion-app[dir="rtl"] {
span {
font-family: var(--fontFamilyIOSAR) !important;
}
}
.search-label {
border: 1px solid #E8E8E8;
border: 1px solid #c9c9c9;
margin-left: 15px;
margin-right: 15px;
border-radius: 35px;
@ -233,12 +240,9 @@ ion-content {
.text-label {
// --color: black !important;
// font-size: 13px;
// margin-left: 15px;
// margin-right: 18px;
text-align: left;
// font: normal normal 600 12px/18px Poppins;
line-height: 18px;
font-size: 12px;
@ -254,10 +258,9 @@ ion-content {
width: 100%;
}
// .selected .radio-icon {
// border-color: #0064D9;
// color: red;
// }
.custom-radio {
margin: 0px 10px 0px 10px;
}
.radio-icon {
@ -273,39 +276,18 @@ ion-content {
}
.text {
// font-size: 16px;
// font-weight: bolder;
// font-family: 'WorkSans-Bold';
// margin-top: 27px;
text-align: left;
padding: 0px 10px 0px 10px;
line-height: 11px;
font-size: 20px;
font-size: 18px;
letter-spacing: -0.8px;
color: #2B353E;
color: #004D71;
opacity: 1;
margin-top: 30px;
margin-bottom: 28px;
font-weight: bold;
}
// .number{
// width: 21px;
// height: 21px;
// padding-right: -10px;
// border-radius: 100%;
// background-color: #004D71;
// z-index: 9;
// margin-top: 26px;
// }
// .numberEmp{
// color: white;
// font-size: 12px;
// font-weight: bolder;
// margin-left: 3px;
// padding-top: 2px;
// }
.number {
width: 22px;
height: 20px;
@ -328,7 +310,7 @@ ion-content {
.numberEmp {
color: white;
font-size: 12px;
font-size: 11px;
font-weight: bolder;
/* padding-top: 5px; */
/* padding-right: 20px; */
@ -336,30 +318,28 @@ ion-content {
width: 23px;
height: 23px;
border-radius: 100%;
background-color: #004D71;
background-color: #44A7A1;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
padding-top: 5px;
}
.numberEmp-ar {
color: white;
font-size: 12px;
font-size: 11px;
font-weight: bolder;
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-right: 13px;
width: 23px;
height: 23px;
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #004D71;
background-color: #44A7A1;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
padding: 5px;
}
.div {

@ -14,7 +14,7 @@
<ion-grid>
<ion-row>
<ion-col size='6'>
<ion-label position='floating' style="margin-left: 15px;" class="colBold">{{ts.trPK('general','from')}} </ion-label>
<ion-label position='floating' class="colBold">{{ts.trPK('general','from')}} </ion-label>
<ion-item class='dynamicField' lines='none'>
<ion-datetime style="padding: 0px" [(ngModel)]="startDate" min="1900" max="2100" displayFormat="MMM/DD/YYYY" placeholder="MM/DD/YYYY" required
@ -24,7 +24,7 @@
</ion-item>
</ion-col>
<ion-col size='6'>
<ion-label position='floating' style="margin-left: 15px;" class="colBold">{{ts.trPK('general','to')}} </ion-label>
<ion-label position='floating' class="colBold">{{ts.trPK('general','to')}} </ion-label>
<ion-item class='dynamicField' lines='none'>
<ion-datetime style="padding: 0px" [(ngModel)]="endDate" min="1900" max="2100" displayFormat="MMM/DD/YYYY" placeholder="MM/DD/YYYY" required
cancelText="{{ts.trPK('general','cancel')}}"
@ -62,11 +62,11 @@
<ion-col [size]="9">
<div>
<span>
<h2 style="margin-top: 0px !important; font-size: 20px;" class="name">{{user.EMPLOYEE_NAME}}</h2>
<span class="title"><ion-label>{{ts.trPK('general','from')}}: </ion-label><b style="font-size: 12px;">{{getDate(user.DATE_START)}} &nbsp; &nbsp;</b></span>
<span class="title"><ion-label>{{ts.trPK('general','to')}}: </ion-label><b style="font-size: 12px;">{{getDate(user.DATE_END)}}</b></span>
<h2 class="name">{{user.EMPLOYEE_NAME}}</h2>
<span class="title"><ion-label>{{ts.trPK('general','from')}}: </ion-label><b>{{getDate(user.DATE_START)}} &nbsp; &nbsp;</b></span>
<span class="title"><ion-label>{{ts.trPK('general','to')}}: </ion-label><b>{{getDate(user.DATE_END)}}</b></span>
<br>
<span class="title"><ion-label>{{ts.trPK('myTeam','no-of-days')}}: </ion-label><b style="font-size: 12px;">{{diffDays(user)}}</b></span>
<span class="title"><ion-label>{{ts.trPK('myTeam','no-of-days')}}: </ion-label><b>{{diffDays(user)}}</b></span>
</span>
</div>
</ion-col>

@ -11,58 +11,27 @@
}
.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;
background: white;
/* margin-top: 2px; */
font-family: WorkSans-Regular;
font-family: var(fontFamilySemiBoldEN, inherit) !important;
border: 1px solid #ccc;
border-radius: 15px;
padding-bottom: 8px;
padding-top: 9px;
margin-bottom: 7px;
h2.name {
font-family: var(fontFamilySemiBoldEN, inherit) !important;
margin: 0;
font-size: 18px;
}
p {
color: #004D71;
}
}
// .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;
img {
// width: 100%;
// max-height: 100%;
width: 74%;
max-height: 74%;
margin-top: 7px;
@ -75,16 +44,6 @@
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;
@ -92,25 +51,16 @@
margin-left: -10px;
margin-top: -5px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(fontFamilySemiBoldEN, inherit) !important;
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
}
.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);
font-family: var(fontFamilySemiBoldEN, inherit) !important;
line-height: 12px;
letter-spacing: -0.56px;
color: #575757;
@ -131,16 +81,6 @@
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;
@ -148,7 +88,7 @@
margin-left: -10px;
margin-top: -5px;
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(fontFamilySemiBoldEN, inherit) !important;
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
@ -156,17 +96,7 @@
}
.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);
font-family: var(fontFamilySemiBoldEN, inherit) !important;
line-height: 12px;
letter-spacing: -0.56px;
color: #575757;
@ -201,4 +131,8 @@
font-size: 12px;
margin-right: 15px;
}
}
.colBold {
margin: 10px
}

@ -121,7 +121,7 @@ ion-thumbnail.menu-thumb {
color: white;
// letter-spacing: 1px;
// font-weight: bold;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
}
.services {
@ -1313,20 +1313,21 @@ $actionBtnSize: 36px;
.name {
text-align: center;
letter-spacing: -0.84px;
color: #2B353E;
color: #004D71;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 21px;
font-size: 21px;
font-weight: bold;
}
.email {
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
font-size: 13px;
line-height: 6px;
letter-spacing: -0.52px;
color: #A2A2A2;
color: #004D71;
opacity: 1;
}
@ -1334,28 +1335,29 @@ $actionBtnSize: 36px;
.subTitle {
text-align: center;
letter-spacing: -0.52px;
color: #A2A2A2;
color: #004D71;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
font-family: var(--fontFamilySemiBoldEN, inherit);
font-size: 16px;
line-height: 0px;
margin-bottom: 7px;
font-weight: bold;
}
.boldText {
text-align: center;
letter-spacing: -0.64px;
color: #2B353E;
color: #5C6F79 !important;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 16px;
font-family: var(--fontFamilySemiBoldEN, inherit);
font-size: 12px;
line-height: 19px;
}
.btnTitle {
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 10px;
font-size: 11px;
color: #4D4D4D;
@ -1363,23 +1365,24 @@ $actionBtnSize: 36px;
.Profileheader-label-text-form {
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
color: #004D71;
opacity: 1;
margin-top: 12px;
margin-bottom: 2px;
font-weight: bold;
}
.header-label-text-form {
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
color: #004D71;
opacity: 1;
margin-top: -3px;
margin-bottom: 2px;
@ -1389,32 +1392,33 @@ $actionBtnSize: 36px;
.type-label-text-form {
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 20px;
font-size: 13px;
font-size: 14px;
letter-spacing: -0.52px;
color: #A2A2A2;
color: #5C6F79;
opacity: 1;
}
.result-label-text-form {
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit) !important;
line-height: 20px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
color: #004D71;
opacity: 1;
font-weight: 600;
}
.Profileheader-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
color: #004D71;
opacity: 1;
margin-top: 12px;
margin-bottom: 2px;
@ -1422,11 +1426,11 @@ $actionBtnSize: 36px;
.header-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
color: #2B353E;
color: #004D71;
opacity: 1;
margin-top: -3px;
margin-bottom: 2px;
@ -1436,7 +1440,7 @@ $actionBtnSize: 36px;
.type-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 20px;
font-size: 13px;
letter-spacing: -0.52px;
@ -1446,7 +1450,7 @@ $actionBtnSize: 36px;
.result-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-family: var(--fontFamilySemiBoldEN, inherit);
line-height: 20px;
font-size: 16px;
letter-spacing: -0.64px;

@ -1474,9 +1474,6 @@ div.no-dataDiv {
}
// .slideFullWidth .swiper-container .swiper-wrapper .swiper-slide:first-child {
// margin-left: 15px;
// }
.slideFullWidth .swiper-container .swiper-wrapper .swiper-slide {
padding: 0px 10px 10px 0px;
@ -1878,6 +1875,22 @@ ion-segment-button {
margin-left: 5px;
}
ion-app[dir="ltr"] {
.slideFullWidth .swiper-container .swiper-wrapper .swiper-slide:first-child {
margin-left: 15px;
}
app-my-team {
.request-heading span {
margin: 0 !important;
padding: 0 !important;
}
}
}
ion-app[dir="rtl"] {
.slideFullWidth {

@ -109,7 +109,7 @@
--fontFamilySemiBoldEN: 'Inter';
--fontFamilySemiBoldAR: 'Kufi';
--fontFamilyIOSAR: 'Kufi';
--fontFamilyIOSARSEMIBOLD: 'Semibold';
--fontFamilyIOSARSEMIBOLD: 'Kufi-Semibold';
--fontFamilyAndroidAR: 'Kufi';
--primary: #004D71;
--secondary: #19a163;

Loading…
Cancel
Save