bug fixes

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

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

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

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

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

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

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

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

Loading…
Cancel
Save