fixed css ios issues

enad-Q1
haroon amjad 5 years ago
parent 6eca298b99
commit f326278951

@ -28,7 +28,7 @@ export class GenericHeaderComponent implements OnInit {
} }
openProfilePage() { openProfilePage() {
this.common.openEditProfile(); this.common.openProfile('sideMenu');
} }
closeModal() { closeModal() {

@ -5,6 +5,11 @@
<div class="header-background-style-card"> <div class="header-background-style-card">
</div> </div>
<div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;"> <div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'" (click)="updateImageProfile()">
<!-- <button ion-button icon-only menuToggle class="menubutton" (click)="updateImageProfile()"> -->
<img style="margin: 0px 5px;" class="changeIcon" src="../assets/imgs/edit_icon.png">
<!-- </button> -->
</div>
<div class="user-info"> <div class="user-info">
<div class="user-image-container"> <div class="user-image-container">
<div [ngClass]=" direction == 'ltr' ? 'user-image' : 'user-image-ar'" > <div [ngClass]=" direction == 'ltr' ? 'user-image' : 'user-image-ar'" >
@ -12,13 +17,7 @@
[src]="personalInfo.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" [src]="personalInfo.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
alt="Team Member Image" /> alt="Team Member Image" />
</div> </div>
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton" (click)="updateImageProfile()">
<img class="changeIcon" src="../assets/imgs/edit_icon.png">
</button>
</div>
</div> </div>
<div style="margin-top: 25px;"> <div style="margin-top: 25px;">
<h1 class="name">{{personalInfo.EMPLOYEE_NAME}}</h1> <h1 class="name">{{personalInfo.EMPLOYEE_NAME}}</h1>
<span class="email">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</span> <span class="email">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</span>

@ -1049,33 +1049,82 @@ $actionBtnSize: 36px;
@media screen and (min-width: 1px) and (max-width:766px){ @media screen and (min-width: 1px) and (max-width:766px){
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
left: 60%; background: #f0ecec;
bottom: 230%; min-height: 25px;
display: flex; width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
right: 36%;
top: -15%;
z-index: 99;
}} }}
@media screen and (min-width: 768px) and (max-width:1050px){ @media screen and (min-width: 768px) and (max-width:1050px){
.changeImgBtn { .changeImgBtn {
position: absolute; position: absolute;
left: 55%; background: #f0ecec;
display: flex; min-height: 25px;
margin-bottom: 44%; width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
right: 41%;
top: -10%;
z-index: 99;
}} }}
@media screen and (min-width: 1060px) and (max-width:1090px){
.changeImgBtn {
position: absolute;
background: #f0ecec;
min-height: 25px;
width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
right: 41%;
top: -10%;
z-index: 99;
}}
@media screen and (min-width: 1px) and (max-width:766px){ @media screen and (min-width: 1px) and (max-width:766px){
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
left: 60%; background: #f0ecec;
bottom: 150%; min-height: 25px;
display: flex; width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
left: 36%;
top: -15%;
z-index: 99;
}} }}
@media screen and (min-width: 768px) and (max-width:1050px){ @media screen and (min-width: 768px) and (max-width:1050px){
.changeImgBtn-ar { .changeImgBtn-ar {
position: absolute; position: absolute;
left: 55%; background: #f0ecec;
// margin-bottom: 15%; min-height: 25px;
display: flex; width: 24px !important;
margin-bottom: 44%; height: 20px;
border-radius: 50%;
bottom: 55px;
left: 41%;
top: -10%;
z-index: 99;
}} }}
@media screen and (min-width: 1060px) and (max-width:1090px){
.changeImgBtn-ar {
position: absolute;
background: #f0ecec;
min-height: 25px;
width: 24px !important;
height: 20px;
border-radius: 50%;
bottom: 55px;
left: 46%;
top: -10%;
z-index: 99;
}}
.menubutton { .menubutton {
background: #f0ecec; background: #f0ecec;

Loading…
Cancel
Save