bug fixes

SRCA_DEV
Sultan Khan 4 years ago
parent 720abf8efc
commit 9aae74223f

@ -4,10 +4,13 @@
<ion-content class="sidebar-menu"> <ion-content class="sidebar-menu">
<div class="header-div"> <div class="header-div">
<div> <div>
<ion-button class="closeIcon" (click)="closeMenu()">
<img style= "height: 18px !important;" src="../assets/imgs/close_menu_icon.png "></ion-button>
</div>
<img class="closeIcon" (click)="closeMenu()" style= "height: 18px !important;" src="../assets/imgs/close_menu_icon.png ">
</div>
<div >
<img class="mohemmLogo" src="../assets/imgs/menu_mohemm_logo.png" >
</div>
<hr>
</div> </div>
<div class="centerDiv homeBox"> <div class="centerDiv homeBox">
@ -32,14 +35,14 @@
{{ts.trPK('userProfile','title')}} {{ts.trPK('userProfile','title')}}
</ion-label> </ion-label>
</ion-item> </ion-item>
<!-- <ion-item (click)="performanceEvaluation()"> <ion-item (click)="performanceEvaluation()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 24px !important;" src="../assets/icon/bar-chart.svg" item-left> <img style= "height: 24px !important;" src="../assets/icon/bar-chart.svg" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}} {{ts.trPK('userProfile','performance-evaluation')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()"> <ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left> <img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left>
@ -49,17 +52,16 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<!-- <ion-item (click)="openMyRequestPage()"> <ion-item (click)="openMyRequestPage()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 20px !important;" src="../assets/imgs/hr-request.png" item-left> <img style= "height: 20px !important;" src="../assets/imgs/hr-request.png" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','HR-Request')}} {{ts.trPK('userProfile','HR-Request')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<div *ngFor="let menu of menuList"> <div *ngFor="let menu of menuList">
<ion-item (click)="oepnMyRequest(menu)" *ngIf="menu.REQUEST_GROUP_NAME =='MBL_RG_01'">
<ion-item (click)="oepnMyRequest(menu)" *ngIf="menu.MENU_TYPE =='E'">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 20px !important;" src="../assets/imgs/my-request.png" item-left> <img style= "height: 20px !important;" src="../assets/imgs/my-request.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -69,17 +71,17 @@
</ion-item> </ion-item>
</div> </div>
<!-- <ion-item (click)="oepnTransaction()"> <ion-item (click)="oepnTransaction()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 20px !important;" src="../assets/imgs/pending-transaction.png" item-left> <img style= "height: 20px !important;" src="../assets/imgs/pending-transaction.png" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('general','pending-transaction')}} {{ts.trPK('general','pending-transaction')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item (click)="openChangePassword()"> --> <!-- <ion-item (click)="openChangePassword()"> -->
<!-- <ion-item (click)="openChangePassword()"> <ion-item (click)="openChangePassword()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -87,9 +89,9 @@
{{ts.trPK('login','changepassword')}} {{ts.trPK('login','changepassword')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge> <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item (click)="openDigitalId()"> <ion-item (click)="openDigitalId()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -97,9 +99,9 @@
{{ts.trPK('general','digital-id')}} {{ts.trPK('general','digital-id')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge> <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()"> <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -107,7 +109,7 @@
{{ts.trPK('general','business-card')}} {{ts.trPK('general','business-card')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge> <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label> </ion-label>
</ion-item> --> </ion-item>
</ion-list> </ion-list>
@ -126,10 +128,9 @@
<ion-content class="sidebar-menu"> <ion-content class="sidebar-menu">
<div class="header-div"> <div class="header-div">
<div> <div>
<ion-button class="closeIcon" (click)="closeMenu()"> <img class="closeIcon" (click)="closeMenu()" style= "height: 18px !important; margin-right: 15px;" src="../assets/imgs/close_menu_icon.png ">
<img style= "height: 18px !important;" src="../assets/imgs/close_menu_icon.png "></ion-button>
</div> </div>
<div style="border-bottom: rgb(190, 186, 186) solid 1px;" > <div>
<img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" > <img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" >
</div> </div>
<hr> <hr>
@ -156,14 +157,14 @@
{{ts.trPK('userProfile','title')}} {{ts.trPK('userProfile','title')}}
</ion-label> </ion-label>
</ion-item> </ion-item>
<!-- <ion-item (click)="performanceEvaluation()"> <ion-item (click)="performanceEvaluation()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 24px !important;" src="../assets/icon/bar-chart.svg" item-left> <img style= "height: 24px !important;" src="../assets/icon/bar-chart.svg" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}} {{ts.trPK('userProfile','performance-evaluation')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()"> <ion-item [hidden]="TeamFlag!='true'" (click)="openMyTeamPage()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left> <img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left>
@ -172,17 +173,16 @@
{{ts.trPK('myTeam','myTeam-header')}} {{ts.trPK('myTeam','myTeam-header')}}
</ion-label> </ion-label>
</ion-item> </ion-item>
<!-- <ion-item (click)="openMyRequestPage()"> <ion-item (click)="openMyRequestPage()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left> <img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','HR-Request')}} {{ts.trPK('userProfile','HR-Request')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<div *ngFor="let menu of menuList"> <div *ngFor="let menu of menuList">
<ion-item (click)="oepnMyRequest(menu)" *ngIf="menu.REQUEST_GROUP_NAME =='MBL_RG_01'">
<ion-item (click)="oepnMyRequest(menu)" *ngIf="menu.MENU_TYPE =='E'">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 20px !important;" src="../assets/imgs/my-request.png" item-left> <img style= "height: 20px !important;" src="../assets/imgs/my-request.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -192,15 +192,15 @@
</ion-item> </ion-item>
</div> </div>
<!-- <ion-item (click)="oepnTransaction()"> <ion-item (click)="oepnTransaction()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 20px !important;" src="../assets/imgs/pending-transaction.png" item-left> <img style= "height: 20px !important;" src="../assets/imgs/pending-transaction.png" item-left>
</ion-thumbnail> </ion-thumbnail>
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('general','pending-transaction')}} {{ts.trPK('general','pending-transaction')}}
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item (click)="openChangePassword()"> <ion-item (click)="openChangePassword()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/lock_icon.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -208,15 +208,15 @@
{{ts.trPK('login','changepassword')}} {{ts.trPK('login','changepassword')}}
<ion-badge [ngClass]=" direction === 'rtl' ? 'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge> <ion-badge [ngClass]=" direction === 'rtl' ? 'end-badge' : 'start-badge'" slot="end" color="danger" class="main-badge">{{notBadge}}</ion-badge>
</ion-label> --> </ion-label>
<!-- <button class="menu-item" ion-item menuClose ion-item (click)="goToWorkListPage()" > <!-- <button class="menu-item" ion-item menuClose ion-item (click)="goToWorkListPage()" >
</button> --> </button> -->
<!-- </ion-item> --> </ion-item>
<!-- <ion-item (click)="openDigitalId()"> <ion-item (click)="openDigitalId()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -224,9 +224,9 @@
{{ts.trPK('general','digital-id')}} {{ts.trPK('general','digital-id')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge> <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()"> <ion-item *ngIf='userInfo?.show_business' (click)="openBusinessCard()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left> <img style= "height: 25px !important;" src="../assets/imgs/business-card-design.png" item-left>
</ion-thumbnail> </ion-thumbnail>
@ -234,7 +234,7 @@
{{ts.trPK('general','business-card')}} {{ts.trPK('general','business-card')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge> <ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label> </ion-label>
</ion-item> --> </ion-item>
<!-- <ion-item (click)="profile()"> <!-- <ion-item (click)="profile()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">

@ -34,7 +34,8 @@ header
margin-top: 0px !important; margin-top: 0px !important;
background: transparent; background: transparent;
--background: white !important; --background: white !important;
position: relative;
top: 10px;
} }

@ -27,8 +27,8 @@ export class ConnectorService {
public static retryTimes = 0; public static retryTimes = 0;
public static timeOut = 180 * 1000; public static timeOut = 180 * 1000;
public static host = 'https://uat.hmgwebservices.com/'; // public static host = 'https://uat.hmgwebservices.com/';
// public static host = 'https://hmgwebservices.com/'; public static host = 'https://hmgwebservices.com/';
// public static host = 'http://riyt-mohemm1:1010/' //MOE // public static host = 'http://riyt-mohemm1:1010/' //MOE
constructor(public httpClient: HttpClient, constructor(public httpClient: HttpClient,
public cs: CommonService, public cs: CommonService,

@ -34,7 +34,7 @@
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
color: black; color: black;
text-align: left; text-align: -webkit-auto;
display: block; display: block;
} }
} }
@ -48,7 +48,7 @@ ion-app[dir="rtl"] .titleBox {
width: 85%; width: 85%;
margin-top: 5px; margin-top: 5px;
font-weight: bold; font-weight: bold;
text-align: left; text-align: -webkit-auto;
display: block; display: block;
font-size: 14px !important; font-size: 14px !important;
} }

@ -1,26 +1,28 @@
.bar-stable { .bar-stable {
background-color: var(--cusgray) !important; background-color: var(--cusgray) !important;
} }
.tabs{
.tabs {
background-color: var(--cusgray) !important; background-color: var(--cusgray) !important;
} }
.icon-size-lg {
.icon-size-lg {
font-size: 40px; font-size: 40px;
} }
/*Timeline*/ /*Timeline*/
.pos-absolute-right { .pos-absolute-right {
position: absolute; position: absolute;
right: 8px; right: 8px;
} }
.timelineMain { .timelineMain {
position: relative; position: relative;
margin: 15px 0 0 0; margin: 15px 0 0 0;
} }
.timelineMain:before { .timelineMain:before {
content: ''; content: '';
position: absolute; position: absolute;
@ -32,9 +34,9 @@
z-index: 1; z-index: 1;
/* margin-left: -10px; */ /* margin-left: -10px; */
/* z-index: 1; */ /* z-index: 1; */
} }
.timelineMain .timelineMain-thumb { .timelineMain .timelineMain-thumb {
border-radius: 500px; border-radius: 500px;
width: 50px; width: 50px;
@ -49,285 +51,317 @@
width: 50px; width: 50px;
float: right; float: right;
top: 0px; top: 0px;
} }
.timelineMain .timelineMain-thumb.timelineMain-icon { .timelineMain .timelineMain-thumb.timelineMain-icon {
height: 50px; height: 50px;
// text-align: center; // text-align: center;
// color: white; // color: white;
// border: 5px solid #CBD0D3; // border: 5px solid #CBD0D3;
transform: scale(0.3); transform: scale(0.3);
} }
.timelineMain .timelineMain-item { .timelineMain .timelineMain-item {
width: 50px; width: 50px;
} }
.timelineMain .timelineMain-stats {
position: relative;
font-size: 12px;
color: var(--darkgray);
}
.timelineMain .timelineMain-stats { .divider-title {
position: relative; background: #e4e4e4;
font-size: 12px; padding: 5px 15px;
color: var(--darkgray); }
}
.color-red {
color: var(--danger) !important;
}
.divider-title { .bg-color-dot {
background: #e4e4e4; // background-color: #ff3b30 !important;
padding: 5px 15px; background: var(--primary);
} background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%, var(--secondary) 59%, var(--customnavy) 100%);
.color-red { }
color: var(--danger) !important;
}
.bg-color-dot { .notification-list {
// background-color: #ff3b30 !important; background: none;
background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
ion-item {
// margin-top: 5px;
// margin-bottom: 5px;
} background-color: transparent;
.notification-list{ .item-date {
background: none; width: 100%;
ion-item{ font-size: 16px;
// margin-top: 5px; font-weight: bold;
// margin-bottom: 5px;
background-color: transparent; text-align: start;
.item-date{ padding: 0;
width: 100%; margin: 0;
font-size: 16px;
font-weight: bold;
text-align: start; position: absolute;
padding: 0; left: 0;
margin: 0; top: 12%;
}
position: absolute; ion-label,
left: 0; [item-end] {
top: 12%;
}
ion-label , [item-end]{
white-space: normal; white-space: normal;
font-size: 14px; font-size: 14px;
padding-top: 15%; padding-top: 15%;
// :root[dir="ltr"]{ // :root[dir="ltr"]{
// margin-left: 10px; // margin-left: 10px;
// } // }
// :root[dir="rtl"]{ // :root[dir="rtl"]{
// margin-right: 10px; // margin-right: 10px;
// } // }
} }
}
} }
}
.input-wrapper { .input-wrapper {
--flex:none; --flex: none;
} }
ion-input ,ion-datetime{
border-bottom: #dedede 1px solid; ion-input,
ion-datetime {
border-bottom: #dedede 1px solid;
} }
.left { .left {
--background: #f0efef; --background: #f0efef;
.timelineMain:before{
left: 21px; .timelineMain:before {
} left: 21px;
.notification-list ion-item{ }
padding-left: 3px;
margin-left: -12%; .notification-list ion-item {
} padding-left: 3px;
.timelineMain-thumb{ margin-left: -12%;
left: 9%; }
top: 30%;
} .timelineMain-thumb {
left: 9%;
top: 30%;
}
} }
.right { .right {
--background: #f0efef; --background: #f0efef;
.timelineMain:before{
right: 62px; .timelineMain:before {
right: 62px;
} }
.notification-list ion-item{
.notification-list ion-item {
padding-right: 3px; padding-right: 3px;
} }
.timelineMain-thumb{
.timelineMain-thumb {
right: 37px; right: 37px;
} }
} }
.menuList{ .menuList {
margin-left: -40px; margin-left: -40px;
height: 160%; height: 160%;
padding-top: 370%; padding-top: 370%;
} }
.colorBG{
--background: #f0efef; .colorBG {
--background: #f0efef;
} }
.menuListCol{ .menuListCol {
padding-left: 50px; padding-left: 50px;
margin-left: -33px; margin-left: -33px;
} }
.menuListItem{
padding-top: 9%; .menuListItem {
margin: -20%; padding-top: 9%;
padding-left: 13%; margin: -20%;
padding-left: 13%;
} }
.menuListBtn{
width: 100%; .menuListBtn {
background: white; width: 100%;
--background: white; background: white;
--background: white;
} }
.activeTabMenu{
--background: #ff726f; .activeTabMenu {
--background: #ff726f;
} }
.notifincationList{ .notifincationList {
margin-left: 5%; margin-left: 5%;
margin-top: 6%; margin-top: 6%;
} }
.itemListNotification{
padding-bottom: 18px; .itemListNotification {
padding-bottom: 18px;
} }
.footerSearchBtn{ .footerSearchBtn {
padding: 0px !important; padding: 0px !important;
background: #f0efef !important; background: #f0efef !important;
} }
.viewAndSearch{ .viewAndSearch {
margin-bottom: 13px; margin-bottom: 13px;
} }
.toSearchBtn{ .toSearchBtn {
margin-top: 4%; margin-top: 4%;
} }
.emptyItem{ .emptyItem {
white-space: normal; white-space: normal;
padding-left: 10%; padding-left: 10%;
} }
///////////////////////////////////////////NEW DESIGN///////////////////////////////////// ///////////////////////////////////////////NEW DESIGN/////////////////////////////////////
.profile-image-container{ .profile-image-container {
position: relative; position: relative;
z-index: 999; z-index: 999;
img {
width: 32px; img {
float: right; width: 32px;
border-radius: 20px; float: right;
height: 32px; border-radius: 20px;
margin-right: 10px; height: 32px;
} margin-right: 10px;
}
} }
ion-title{
color: white; ion-title {
position: absolute; color: white;
top: 0; position: absolute;
text-align: center; top: 0;
left: 15%; text-align: center;
right: 15%; left: 15%;
font-size: 0.42cm; right: 15%;
font-weight: bold; font-size: 0.42cm;
height: 100%; font-weight: bold;
height: 100%;
} }
.contentBg:before { .contentBg:before {
position: absolute; position: absolute;
content: ""; content: "";
background: #269DB8; background: #269DB8;
height: 140px; height: 140px;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
ion-content { ion-content {
--ion-background-color: whitesmoke; --ion-background-color: whitesmoke;
} }
.request-heading { .request-heading {
span { span {
text-align: center; text-align: center;
display: block; display: block;
padding-top: 8px; padding-top: 8px;
font-family: workSans-Regular; font-family: workSans-Regular;
} }
} }
.result-graph { .result-graph {
position: relative; position: relative;
background: white; background: white;
margin-right: 20px; margin-right: 20px;
margin-left: 20px; margin-left: 20px;
margin-top: 20px; margin-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
} }
.result-text-container { .result-text-container {
padding: 0; padding: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
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; display: block;
margin: 0 auto; text-align: center;
font-size: 12px; transform: translate(-50%, -50%);
font-family: workSans-Regular;
} h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
} }
.today-graph { .today-graph {
width: 100%; width: 100%;
max-height: 4cm; max-height: 4cm;
} }
.swiper-container { .swiper-container {
margin: 0 !important; margin: 0 !important;
width: 100% !important; width: 100% !important;
} }
.filters-row { .filters-row {
margin-top: 10px; margin-top: 10px;
margin-left: 20px; margin-left: 20px;
} }
.work-list-container { .work-list-container {
position: relative; position: relative;
padding-left: 60px; padding-left: 60px;
clear: both; clear: both;
min-height: 200px; min-height: 200px;
margin-bottom: 80px; margin-bottom: 80px;
padding-top: 15px; padding-top: 15px;
} }
.work-list-container:before{
content: ""; .work-list-container:before {
position: absolute; content: "";
height: 100%; position: absolute;
width: 4px; height: 100%;
left: 30px; width: 4px;
top: 15px; left: 30px;
background-color: #dddddd; top: 15px;
background-color: #dddddd;
} }
.work-list-container-ar { .work-list-container-ar {
position: relative; position: relative;
padding-left: 60px; padding-left: 60px;
@ -335,8 +369,9 @@ background-color: #dddddd;
min-height: 200px; min-height: 200px;
margin-bottom: 80px; margin-bottom: 80px;
padding-top: 15px; padding-top: 15px;
} }
.work-list-container-ar:before{
.work-list-container-ar:before {
content: ""; content: "";
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -345,79 +380,89 @@ background-color: #dddddd;
top: 15px; top: 15px;
right: 6px; right: 6px;
background-color: #dddddd; background-color: #dddddd;
}
.search-container{
margin-top: 15px;
display: block;
padding: 0 20px;
position: relative;
z-index: 99;
ion-col{
background: white;
border-radius: 12px;
// padding-right: 30px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 20px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 14px;
vertical-align: middle;
margin: 5px;
}
} }
.search-container {
margin-top: 15px;
display: block;
padding: 0 20px;
position: relative;
z-index: 99;
ion-col {
background: white;
border-radius: 12px;
// padding-right: 30px;
flex: none;
ion-icon {
margin-right: 3px;
font-size: 20px;
margin-left: 3px;
vertical-align: middle;
}
span {
font-size: 14px;
vertical-align: middle;
margin: 5px;
}
}
} }
.date-span { .date-span {
position: relative; position: relative;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
.date-span:before{
content: ""; .date-span:before {
position: absolute; content: "";
left: -35px; position: absolute;
border-radius: 50%; left: -35px;
width: 15px; border-radius: 50%;
height: 15px; width: 15px;
background-color: #269db8; height: 15px;
top: 1px; background-color: #269db8;
} top: 1px;
}
.date-span-ar{
.date-span-ar {
position: relative; position: relative;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
/* margin-top: 10px; */ /* margin-top: 10px; */
margin-right: 30px; margin-right: 30px;
} }
.date-span-ar:before{
content: "";
position: absolute;
right: -29px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
}
.date-span-ar:before {
content: "";
position: absolute;
right: -29px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
}
.date-data{
background-color: white; .date-data {
padding: 1px; background-color: white;
border-radius: 20px; padding: 1px;
font-family: WorkSans-Regular; border-radius: 20px;
padding-left: 15px; font-family: WorkSans-Regular;
margin-right: 20px; padding-left: 15px;
margin-bottom: 15px; margin-right: 20px;
p{ margin-bottom: 15px;
font-size: 14px; padding-right: 15px;
}
p {
font-size: 14px;
}
} }
.no-data-available { .no-data-available {
background: white; background: white;
font-family: WorkSans-Regular; font-family: WorkSans-Regular;
@ -426,42 +471,46 @@ p{
left: 85px; left: 85px;
bottom: 20%; bottom: 20%;
} }
.disable-filter { .disable-filter {
pointer-events: none; pointer-events: none;
opacity: .3; opacity: .3;
} }
.total-result { .total-result {
margin-top: 55px; margin-top: 55px;
padding-left: 20px; padding-left: 20px;
color: #888; color: #888;
font-size: 15px; font-size: 15px;
} }
.text-span{
font-size: 12px; .text-span {
color: #888; font-size: 12px;
background-color: white; color: #888;
width: auto; background-color: white;
height: 40px; width: auto;
border: 1px solid; height: 40px;
border-radius: 30px; border: 1px solid;
padding: 10px 30px; border-radius: 30px;
} padding: 10px 30px;
}
.text-span-active{
font-size: 12px; .text-span-active {
color:white; font-size: 12px;
background-color:#269DB8; color: white;
width: auto; background-color: #269DB8;
height: 40px; width: auto;
border: 1px solid; height: 40px;
border-radius: 30px; border: 1px solid;
padding: 10px 30px; border-radius: 30px;
} padding: 10px 30px;
.slideCss{ }
width: auto !important;
} .slideCss {
width: auto !important;
.spinner-custom-class{ }
.spinner-custom-class {
position: absolute; position: absolute;
right: 160px; right: 160px;
top: 100px; top: 100px;

@ -107,7 +107,7 @@
[value]="gaugeValue" [value]="gaugeValue"
[label]="gaugeLabel"> [label]="gaugeLabel">
</ngx-gauge> --> </ngx-gauge> -->
<div [ngClass]="direction == 'en'? 'result-graph':'result-graph-ar'"> <div class="result-graph">
<!-- <div class="request-heading"> <!-- <div class="request-heading">
@ -115,13 +115,13 @@
</div> --> </div> -->
<div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'"> <div class="result-text-container">
<h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2> <h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
<!-- <span>TOTAL <br> OPEN REQUEST</span> --> <!-- <span>TOTAL <br> OPEN REQUEST</span> -->
<span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span> <span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span>
</div> </div>
<p-chart #chart [ngClass]="direction == 'en'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart> <p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div> </div>
<div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'"> <div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'">

@ -1,21 +1,23 @@
.rowAccordin{ .rowAccordin {
border: none; border: none;
} }
.gridAccordin{
margin: 10px; .gridAccordin {
background: #ffffff; margin: 10px;
border-radius: 5px; background: #ffffff;
border-radius: 5px;
} }
.colPayslip{ .colPayslip {
border-right: 1px solid #cac8c8; border-right: 1px solid #cac8c8;
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
margin-left: 8px; margin-left: 8px;
font-size: 12px !important; font-size: 12px !important;
} }
.colPayslip-ar{
.colPayslip-ar {
border-left: 1px solid #cac8c8; border-left: 1px solid #cac8c8;
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
padding-top: 8px; padding-top: 8px;
@ -24,57 +26,61 @@
font-size: 12px !important; font-size: 12px !important;
} }
.colPayslips{ .colPayslips {
border-bottom-left-radius: -10px !important; border-bottom-left-radius: -10px !important;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
margin-left: 18px; margin-left: 18px;
font-size: 12px !important; font-size: 12px !important;
} }
.label{ .label {
font-size: 15px !important; font-size: 15px !important;
text-align: center; text-align: center;
margin-bottom: 1px; margin-bottom: 1px;
margin-left: 8px; margin-left: 8px;
} }
.label-bold{
.label-bold {
font-size: 13px !important; font-size: 13px !important;
// font-weight: bold !important; // font-weight: bold !important;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-left: 8px; margin-left: 8px;
} }
.earingTotH{
text-align: right; .earingTotH {
font-weight: bold; text-align: right;
font-size:20px !important; font-weight: bold;
padding-right: 15px; font-size: 20px !important;
padding-right: 15px;
} }
.earingTotG{ .earingTotG {
text-align: left; text-align: left;
padding-left: 15px; padding-left: 15px;
font-weight: bold; font-weight: bold;
font-size: 20px !important; font-size: 20px !important;
color: var(--green); color: var(--green);
} }
.earingTotR{ .earingTotR {
text-align: left; text-align: left;
padding-left: 15px; padding-left: 15px;
font-weight: bold; font-weight: bold;
font-size: 20px !important; font-size: 20px !important;
color: var(--red); color: var(--red);
} }
.header-toolbar-new{
.header-toolbar-new {
--background: #269DB8; --background: #269DB8;
} }
.colorBG{
--background: #f0efef; .colorBG {
} --background: #f0efef;
}
.header-div { .header-div {
background-color: #269DB8; background-color: #269DB8;
@ -83,251 +89,248 @@
position: relative; position: relative;
display: block; display: block;
margin-bottom: -28px; margin-bottom: -28px;
} }
.Title{
text-align: center;
color: white;
margin-top: -33px;
font-size: 17px;
}
.Imgdiv{ .Title {
padding-top: -38px; text-align: center;
margin-top: -32px; color: white;
} margin-top: -33px;
.Imgsrc{ font-size: 17px;
width: 23px; }
height: 24px;
/* display: -webkit-inline-box; */ .Imgdiv {
/* display: inline-flex; */ padding-top: -38px;
overflow: hidden; margin-top: -32px;
background: transparent; }
border-radius: 70% !important;
/* position: relative; */
top: 7px;
margin-left: 344px !important;
margin-top: -46px;
}
.p{ .Imgsrc {
width: 23px;
height: 24px;
/* display: -webkit-inline-box; */
/* display: inline-flex; */
overflow: hidden;
background: transparent;
border-radius: 70% !important;
/* position: relative; */
top: 7px;
margin-left: 344px !important;
margin-top: -46px;
}
.p {
font-weight: bold; font-weight: bold;
margin-top: -7px; margin-top: -7px;
font-size: 14px; font-size: 14px;
} }
.slidBtn{ .slidBtn {
margin-top: 8px; margin-top: 8px;
margin-left: 10px; margin-left: 10px;
background: transparent; background: transparent;
} }
.activeArrow{
height: 26px; .activeArrow {
width: 26px; height: 26px;
color: white; width: 26px;
background: transparent !important; color: white;
--background: transparent !important; background: transparent !important;
--background: transparent !important;
}
.activeArrow-ar{ }
height: 26px;
width: 26px; .activeArrow-ar {
color: white; height: 26px;
background: transparent !important; width: 26px;
--background: transparent !important; color: white;
-webkit-transform: scaleX(-1); background: transparent !important;
-moz-transform: scaleX(-1); --background: transparent !important;
-o-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); -moz-transform: scaleX(-1);
margin-right: 38px; -o-transform: scaleX(-1);
margin-left: -45px; transform: scaleX(-1);
} margin-right: 38px;
.slidbtn{ margin-left: -45px;
}
.slidbtn {
background: transparent; background: transparent;
margin-bottom: -59px; margin-bottom: -59px;
margin-top: 8px; margin-top: 8px;
margin-left: 65px; margin-left: 65px;
} }
.disabledArrow{
height: 26px;
width: 26px;
color: #908d8d;
background: transparent !important;
--background: transparent !important;
}
.disabledArrow-ar{
height: 26px;
width: 26px;
color: #908d8d;
background: transparent !important;
--background: transparent !important;
margin-right: 3px;
// margin-left: -124px;
margin-left: -105px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.today-graph{
display: block !important;
height: 162px;
width: 335px;
/* padding-left: 51px; */
margin-left: 3px !important;
}
.today-graph-ar{ .disabledArrow {
display: block !important; height: 26px;
height: 162px; width: 26px;
width: 335px; color: #908d8d;
margin-right: 45px; background: transparent !important;
margin-left: -25px !important; --background: transparent !important;
} }
.result-graph{ .disabledArrow-ar {
font-size: 14px; height: 26px;
margin-left: -48px; width: 26px;
margin-right: 3px; color: #908d8d;
} background: transparent !important;
--background: transparent !important;
margin-right: 3px;
// margin-left: -124px;
margin-left: -105px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.result-graph-ar{ .today-graph {
font-size: 14px; display: block !important;
margin-right: -48px; height: 162px;
margin-left: 3px; width: 335px;
} /* padding-left: 51px; */
.headerGrid{ // margin-left: 3px !important;
background-color: white !important; }
border: 1px solid #cac8c8 !important;
border-radius: 20px !important; .today-graph-ar {
padding-top: 13px; display: block !important;
padding-bottom: 14px; height: 162px;
// margin-left: 26px; width: 335px;
// margin-right: 28px; margin-right: 45px;
margin-left: 19px; margin-left: -25px !important;
margin-right: 19px; }
margin-top: -2px;
margin-bottom: 10px; .result-graph {
padding-right: 21px; font-size: 14px;
position: relative;
} }
.result-text-container-ar {
padding: 0;
margin: 0;
position: absolute;
// left: 54%;
left: 45%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 { .result-graph-ar {
font-size: 14px;
position: relative;
}
.headerGrid {
background-color: white !important;
border: 1px solid #cac8c8 !important;
border-radius: 20px !important;
padding-top: 13px;
padding-bottom: 14px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
padding-right: 25px;
font-size: 23px; }
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
} .result-text-container {
padding: 0;
margin: 0px -5px 0px -5px;
position: absolute;
top: 30%;
display: block;
text-align: center;
width: 100%;
span { h2 {
font-size: 23px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
width: 125px;
display: block;
margin: 0 auto;
font-size: 14px;
font-family: workSans-Regular;
}
} }
span {
.result-text-container { width: 125px;
padding: 0;
margin: 0;
position: absolute;
left: 40%;
top: 50%;
display: block; display: block;
text-align: center; margin: 0 auto;
transform: translate(-50%, -50%); font-size: 14px;
font-family: workSans-Regular;
}
}
h2 {
font-size: 25px; .result-text-container {
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px; h2 {
font-size: 25px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
} }
span { span {
width: 125px; width: 125px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
font-size: 15px; font-size: 15px;
font-family: workSans-Regular; font-family: workSans-Regular;
}
} }
.green-label{
font-size: 10px;
margin-top: -13px;
} }
.green-amount{ .green-label {
font-size: 10px;
margin-top: -13px;
}
.green-amount {
font-size: 13px; font-size: 13px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: -3px; margin-top: -3px;
} }
.blue-label{ .blue-label {
font-size: 10px; font-size: 10px;
margin-top: -13px; margin-top: -13px;
} }
.blue-amount{ .blue-amount {
font-size: 13px; font-size: 13px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: -4px; margin-top: -4px;
} }
.grids{ .grids {
border-radius: 20px !important; border-radius: 20px !important;
background: white; background: white;
padding-left: 1px; padding-left: 1px;
padding-right: 1px; padding-right: 1px;
margin: 13px; margin: 13px;
padding-top: 0px; padding-top: 0px;
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 13px; padding-left: 13px;
padding-right: 13px; padding-right: 13px;
border: 1px solid #cac8c8; border: 1px solid #cac8c8;
} }
.header{ .header {
margin-top: -119px; margin-top: -119px;
} }
.bgcolor {
.bgcolor {
color: white;
border-top-right-radius: 19px; color: white;
border-top-left-radius: 15px; border-top-right-radius: 19px;
padding-top: 1; border-top-left-radius: 15px;
padding-bottom: 0; padding-top: 1;
margin-top: 0; padding-bottom: 0;
margin-bottom: 0; margin-top: 0;
/* border-radius: 12px !important; */ margin-bottom: 0;
background: #269DB8; /* border-radius: 12px !important; */
border-bottom: 1px solid #a7a4a4; background: #269DB8;
border-top: 1px solid #cac8c8; border-bottom: 1px solid #a7a4a4;
margin-left: -13px; border-top: 1px solid #cac8c8;
margin-right: -13px; margin-left: -13px;
} margin-right: -13px;
}
.rowtable{ .rowtable {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-top: 0; margin-top: 0;
@ -337,7 +340,8 @@
margin-right: -13px; margin-right: -13px;
} }
.rowtables{
.rowtables {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-top: 0; margin-top: 0;
@ -346,60 +350,67 @@
margin-right: -13px; margin-right: -13px;
} }
.col{
.col {
font-size: 15px; font-size: 15px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
} }
.hrTitle{
margin-left: 11px !important; .hrTitle {
margin-left: 20px !important;
font-size: 15px !important; font-size: 15px !important;
margin-right: 11px !important; margin-right: 20px !important;
} }
.date{
.date {
font-size: 15px !important; font-size: 15px !important;
margin-left: 58px; margin-left: 58px;
margin-bottom: 12px; margin-bottom: 12px;
padding-right: 5px; padding-right: 5px;
} }
.div-green{
.div-green {
// left: 77%; // left: 77%;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 83%; left: 83%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #269DB8;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
.div-green-ar{
.div-green-ar {
// position: relative; // position: relative;
// left: 77%; // left: 77%;
// bottom: 117px; // bottom: 117px;
// color: black; // color: black;
// background-color: #269DB8; // background-color: #269DB8;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 4%; left: 4%;
bottom: 117px; bottom: 117px;
color: black; color: black;
background-color: #269DB8; background-color: #269DB8;
width: 15%; width: 15%;
height: 6px; height: 6px;
} }
.div-blue{
.div-blue {
// left: 77%; // left: 77%;
// width: 20%; height: 6px; // width: 20%; height: 6px;
position: relative; position: relative;
left: 83%; left: 83%;
bottom: 67px; bottom: 67px;
color: black; color: black;
background-color: #269DB8; background-color: #269DB8;
width: 16%; width: 16%;
height: 6px; height: 6px;
} }
.div-blue-ar{
.div-blue-ar {
//position: relative; //position: relative;
// left: 77%; // left: 77%;
// bottom: 67px; // bottom: 67px;

Loading…
Cancel
Save