diff --git a/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.ts b/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.ts index 29d515c9..75dc2703 100644 --- a/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.ts +++ b/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.ts @@ -28,7 +28,7 @@ export class GenericHeaderComponent implements OnInit { } openProfilePage() { - this.common.openEditProfile(); + this.common.openProfile('sideMenu'); } closeModal() { diff --git a/Mohem/src/app/profile/home/home.component.html b/Mohem/src/app/profile/home/home.component.html index 962a1fdb..4114138f 100644 --- a/Mohem/src/app/profile/home/home.component.html +++ b/Mohem/src/app/profile/home/home.component.html @@ -5,6 +5,11 @@
+
+ + + +
@@ -12,13 +17,7 @@ [src]="personalInfo.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image" />
-
- -
-

{{personalInfo.EMPLOYEE_NAME}}

diff --git a/Mohem/src/app/profile/home/home.component.scss b/Mohem/src/app/profile/home/home.component.scss index d3842dfa..8ea8bfd1 100644 --- a/Mohem/src/app/profile/home/home.component.scss +++ b/Mohem/src/app/profile/home/home.component.scss @@ -1049,33 +1049,82 @@ $actionBtnSize: 36px; @media screen and (min-width: 1px) and (max-width:766px){ .changeImgBtn { position: absolute; - left: 60%; - bottom: 230%; - display: flex; + background: #f0ecec; + min-height: 25px; + 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){ .changeImgBtn { position: absolute; - left: 55%; - display: flex; - margin-bottom: 44%; + 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: 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){ .changeImgBtn-ar { position: absolute; - left: 60%; - bottom: 150%; - display: flex; + background: #f0ecec; + min-height: 25px; + 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){ .changeImgBtn-ar { position: absolute; - left: 55%; - // margin-bottom: 15%; - display: flex; - margin-bottom: 44%; + background: #f0ecec; + min-height: 25px; + width: 24px !important; + 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 { background: #f0ecec;