design changes

MOE_MAIN
Sultan Khan 3 years ago
parent a7d2202897
commit 3e99b36313

@ -3,10 +3,10 @@
<ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'">
<ion-content class="sidebar-menu">
<div class="header-div">
<div>
<!-- <div>
<img class="closeIcon" (click)="closeMenu()" style= "height: 18px !important;" src="../assets/imgs/close_menu_icon.png ">
</div>
</div> -->
<div >
<img class="mohemmLogo" src="../assets/imgs/menu_mohemm_logo.png" >
</div>
@ -128,9 +128,9 @@
<ion-menu [swipeGesture]="false" side='end' *ngIf="direction ==='rtl'">
<ion-content class="sidebar-menu">
<div class="header-div">
<div>
<!-- <div>
<img class="closeIcon" (click)="closeMenu()" style= "height: 18px !important; margin-right: 15px;" src="../assets/imgs/close_menu_icon.png ">
</div>
</div> -->
<div>
<img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" >
</div>

@ -10,21 +10,19 @@ header
}
.mohemmLogo {
max-width: 46% !important;
border: 0 !important;
margin-left: 70px !important;
margin-right: 70px !important;
margin-top: -24px !important;
margin-bottom: 11px;
margin-bottom: 5px;
}
.mohemmLogo-ar {
max-width: 46% !important;
border: 0 !important;
margin-right: 70px !important;
margin-top: -24px !important;
margin-bottom: 11px;
margin-bottom: 5px;
}
.closeIcon {
@ -38,6 +36,10 @@ header
top: 10px;
}
hr {
border-width: 1px;
}
.menubutton {
white-space: normal;
@ -77,21 +79,19 @@ header
.logout {
background-color: #024d71;
background-color: #0ca2de;
border: none;
color: white;
// padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-left: 120px !important;
margin-right: 95px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
border-radius: 30px;
// width: 40px;
height: 26px;
padding: 6px 24px;
height: 30px;
padding: 0px 18px;
}
@ -289,22 +289,26 @@ button.menu-item.item.item-block.item-ios {
}
.TxtPlace {
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
font-size: 20px;
color: #000;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 90%;
margin: auto;
}
.TxtPlaces {
margin-top: 2px;
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
font-size: 14px;
color: darkgray;
color: #000;
font-family: 'Inter' !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 90%;
margin: auto;
}
.menuFooter {
@ -323,24 +327,12 @@ button.menu-item.item.item-block.item-ios {
margin: auto;
}
// .menuFooter .CompanyImg {
// width: 100%;
// height: 100%;
// }
.menuFooter .CompanyImg {
width: 65%;
height: 60%;
margin-bottom: -21px;
}
// .logoImg{
// width: 120px;
// position: relative;
// }
.logoImgWithMyTeam {
width: 225px;
@ -394,8 +386,8 @@ ion-thumbnail.menu-thumb {
// }
.profileImg {
width: 140px;
height: 140px;
width: 100px;
height: 100px;
display: -webkit-inline-box;
display: inline-flex;
overflow: hidden;

@ -56,7 +56,7 @@ ion-input {
outline: none;
width: 20%;
transition: all .2s ease-in-out;
border-radius: 3px;
border-radius: 15px;
display: inline-block;
&:focus {

@ -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;
padding-bottom: 8px;
margin-bottom: 7px;
padding-bottom: 5px;
margin-bottom: 15px;
box-shadow: 0px 1px 5px #cdcdcd;
}
// .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;
height: 60px;
border-radius: 30px;
margin: 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-weight: bold;
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
font-family: 'Inter' !important;
}
.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: 'Inter' !important;
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: 'Inter' !important;
line-height: 25px;
letter-spacing: -0.64px;
color: #2B353E;
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: 'Inter' !important;
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;
}
}
.image-container{
.image-container {
width: 20%;
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 5px;
position: relative;
top: 12px;
}
.swipe-information{
.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;
}
}

@ -43,7 +43,7 @@
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name" [(ngModel)]="searchNameOrUserName" ></ion-input>
<ion-input *ngIf="showUserNameInput" placeholder ="Search by Username" [(ngModel)]="searchUserName" ></ion-input>
</div>
<div *ngIf="isSearch" (click)="clearSearch()" class="search-container">
<div *ngIf="isSearch" (click)="clearSearch()" [class]="direction =='en' ? 'search-container' : 'search-container-ar'">
<ion-col style="float: right;" >
<ion-icon name="close" ></ion-icon>
</ion-col>
@ -51,85 +51,13 @@
</ion-col>
</ion-row>
</div>
<!-- <div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div> -->
</div>
<div class="div">
<div class="text" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' ">{{EmployeeTotal}}</div>
</div>
<!-- <div>
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div [ngClass]="direction == 'en' ? 'number':'number-ar' ">
<p class="numberEmp">{{EmployeeTotal}}</p></div></ion-col>
</ion-row>
</div> -->
<!-- <div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','team-stats')}}</span>
</div>
<div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div> -->
<!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index">
<app-card-filter
[value]="filter.value"
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-filter>
</ion-slide>
</ion-slides>
</ion-row> -->
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
<ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
<ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
<ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
</ion-select>
</ion-col>
<ion-col [size]="7" class="input-container" no-padding>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div> -->
<!-- <div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearch()">
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>
</div> -->
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information
[name]="subordinate.EMPLOYEE_NAME"

@ -41,16 +41,10 @@ ion-content {
padding-right: 20px;
span {
// display: block;
// padding-top: 8px;
// padding-left: 15px;
// font-weight: bold;
// font-size: 12px;
// margin-top: 9px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 18px;
font-weight: bold;
letter-spacing: -0.48px;
color: #2B353E;
opacity: 1;
@ -58,13 +52,7 @@ ion-content {
}
.search-label {
// border: 1px solid #ccc;
// margin-left: 15px;
// margin-right: 15px;
// border-radius: 22px;
// margin-top: 24px;
// font-size: 11px;
// color: rgb(143, 141, 141);
border: 1px solid #ccc;
margin-left: 15px;
margin-right: 15px;
@ -74,6 +62,7 @@ ion-content {
color: #8f8d8d;
margin-right: 15px !important;
padding: 10px;
font-family: 'Inter' !important;
}
.result-graph {
@ -199,9 +188,7 @@ ion-content {
}
.search-container {
// margin-top: 15px;
// margin-top: -35px;
// margin-left: 262px;
width: 30px;
height: 30px;
position: absolute;
@ -210,9 +197,6 @@ ion-content {
z-index: 999999;
ion-col {
// background: white;
// border-radius: 12px;
// padding-right: 10px;
flex: none;
ion-icon {
@ -229,12 +213,32 @@ ion-content {
}
}
// .myClass .toggle-icon {
// background-color: purple; // this changes the background, ie the grey stripe.
// .toggle-inner {
// background-color: yellow; // this changes the backgroundcolor of the toggle dot.
// }
// }
.search-container-ar {
width: 30px;
height: 30px;
position: absolute;
top: 45px;
left: 38px;
z-index: 999999;
ion-col {
flex: none;
ion-icon {
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span {
font-size: 12px;
vertical-align: middle;
}
}
}
@media only screen and (max-width: 375px) {
.text-label {
@ -250,34 +254,21 @@ 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;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 18px;
font-size: 14px;
font-size: 12px;
letter-spacing: -0.48px;
color: #575757 !important;
opacity: 1;
margin-left: 15px;
margin-right: 18px;
margin-left: 5px;
margin-right: 5px;
font-weight: bold;
}
.radio-list {
background: white;
// margin-left: 18px;
/* margin-right: 10px; */
// margin-top: 12px;
}
// .selected .radio-icon {
// border-color: #0064D9;
// color: red;
// }
.radio-icon {
.custom-radio .radio-icon {
@ -292,12 +283,8 @@ ion-content {
}
.text {
// font-size: 16px;
// font-weight: bolder;
// font-family: 'WorkSans-Bold';
// margin-top: 27px;
text-align: left;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 11px;
font-size: 20px;
letter-spacing: -0.8px;
@ -305,26 +292,11 @@ ion-content {
opacity: 1;
margin-top: 30px;
margin-bottom: 28px;
font-weight: bold;
}
// .number{
// width: 21px;
// height: 21px;
// padding-right: -10px;
// border-radius: 100%;
// background-color: #024d71;
// 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;
@ -352,33 +324,30 @@ ion-content {
/* padding-top: 5px; */
/* padding-right: 20px; */
margin-left: 13px;
width: 23px;
height: 23px;
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #024d71;
background-color: #0ca2de;
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: #024d71;
background-color: #0ca2de;
z-index: 9;
margin-top: 25px;
/* padding-left: 4px; */
text-align: center;
padding-top: 3px;
padding-top: 5px;
}
.div {

@ -32,8 +32,7 @@
height: 99%;
background: #e4e4e4;
z-index: 1;
/* margin-left: -10px; */
/* z-index: 1; */
}
.timelineMain .timelineMain-thumb {
@ -42,12 +41,6 @@
width: 50px;
z-index: 2;
position: absolute;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
width: 50px;
float: right;
top: 0px;
@ -55,9 +48,6 @@
.timelineMain .timelineMain-thumb.timelineMain-icon {
height: 50px;
// text-align: center;
// color: white;
// border: 5px solid #CBD0D3;
transform: scale(0.3);
}
@ -409,6 +399,8 @@ ion-content {
// padding-right: 30px;
flex: none;
box-shadow: 0px 0px 3px #cdcdcd;
ion-icon {
margin-right: 3px;
font-size: 20px;
@ -437,7 +429,7 @@ ion-content {
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #024d71;
background-color: #0ca2de;
top: 1px;
}
@ -471,6 +463,7 @@ ion-content {
margin-right: 20px;
margin-bottom: 15px;
padding-right: 15px;
box-shadow: 0px 0px 3px #cdcdcd;
p {
font-size: 14px;

@ -634,7 +634,7 @@
<div *ngIf="actionHistoryRes && actionHistoryRes.length > 0 ">
<ion-list class="notification-list ">
<div class="timeline">
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<ion-item lines="none" *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div
@ -682,7 +682,7 @@
<ion-col size="4">
<img class="req_info" src="assets/imgs/req info.svg"
(click)="openRequestInfoDel(actionHistory, 'REQUEST_INFO')" />
<img class="req_info deligate" src="assets/imgs/delegate.svg"
<img class="req_info" src="assets/imgs/delegate.svg"
(click)="openRequestInfoDel(actionHistory, 'DELEGATE')" />
</ion-col>

@ -113,7 +113,7 @@ button.actionBtn.button.button {
width: 22px;
height: 22px;
display: inline-block;
margin: 0px 5px 0px 5px;
margin: 0px 7px 0px 7px;
}
.deligate {
@ -394,4 +394,13 @@ ion-card {
margin: 0;
white-space: nowrap;
font-size: 10px;
}
ion-item {
margin: 10px;
border-bottom: 1.5px solid #ececec;
}
ion-item:last-child {
border: none;
}

@ -1291,7 +1291,7 @@ export class WorklistMainComponent implements OnInit {
showLoading(notificationList) {
if (notificationList.length < 0) {
return true;
} else if (notificationList === []) {
} else if (notificationList.length == 0) {
return false;
} else { return true; }
}

@ -130,7 +130,7 @@ ion-thumbnail.menu-thumb {
}
.service-ar {
font-size: 20px;
font-size: 18px;
color: white;
// letter-spacing: 1px;
font-weight: bold;
@ -1316,19 +1316,20 @@ $actionBtnSize: 36px;
letter-spacing: -0.84px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-weight: bold;
line-height: 21px;
font-size: 21px;
}
.email {
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
margin: 10px;
font-size: 13px;
line-height: 6px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
font-family: 'Inter' !important;
}
@ -1337,8 +1338,8 @@ $actionBtnSize: 36px;
letter-spacing: -0.52px;
color: #A2A2A2;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 13px;
font-size: 16px;
line-height: 0px;
margin-bottom: 7px;
}
@ -1349,17 +1350,19 @@ $actionBtnSize: 36px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-size: 16px;
font-family: 'Inter' !important;
font-size: 14px;
line-height: 19px;
top: 5px;
position: relative;
}
.btnTitle {
text-align: center;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 10px;
line-height: 12px;
font-size: 11px;
color: #4D4D4D;
margin-top: 5px;
}
.Profileheader-label-text-form {
@ -1423,7 +1426,7 @@ $actionBtnSize: 36px;
.header-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
font-weight: bold;
line-height: 30px;
font-size: 20px;
letter-spacing: -0.8px;
@ -1447,12 +1450,14 @@ $actionBtnSize: 36px;
.result-label-text-form-ar {
text-align: right;
font-family: var(--fontFamilyPoppins-SemiBold, inherit);
line-height: 20px;
font-size: 16px;
letter-spacing: -0.64px;
color: #2B353E;
opacity: 1;
font-family: 'Inter' !important;
margin-top: 3px;
font-weight: bold;
}
.create-edit {

Loading…
Cancel
Save