Changed approach to positioning div {

ita-social-projects · Sep 24, 2023 · 4c3fb90 · 4c3fb90
1 parent 0e1ee57
commit 4c3fb90
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/src/app/main/component/user/components/profile/profile.component.html b/src/app/main/component/user/components/profile/profile.component.html
@@ -1,7 +1,7 @@
 <div class="profile-wrapper" *ngIf="userInfo">
   <div class="left-column">
     <app-profile-header class="app-profile-header" [userInfo]="userInfo" [progress]="progress"></app-profile-header>
-    <app-users-achievements class="app-users-achievements"></app-users-achievements>
+    <app-users-achievements class="app-users-achievements" [currLang]="currLang"></app-users-achievements>
     <app-users-friends class="app-users-friends"></app-users-friends>
     <app-eco-places class="app-eco-places" *ngIf="userInfo.showEcoPlace"></app-eco-places>
     <app-shopping-list class="app-shopping-list" *ngIf="userInfo.showShoppingList"></app-shopping-list>

diff --git a/src/app/main/component/user/components/profile/profile.component.ts b/src/app/main/component/user/components/profile/profile.component.ts
@@ -14,6 +14,7 @@ import { take } from 'rxjs/operators';
   styleUrls: ['./profile.component.scss']
 })
 export class ProfileComponent implements OnInit, OnDestroy {
+  public currLang: string;
   private langChangeSub: Subscription;
   public userInfo: EditProfileModel;
   public isDesktopWidth: boolean;
@@ -34,6 +35,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
     this.subscribeToLangChange();
     this.bindLang(this.localStorageService.getCurrentLanguage());
     this.checkUserActivities();
+    console.log(this.translate);
   }
 
   @HostListener('window:resize') public checkDisplayWidth() {
@@ -59,7 +61,10 @@ export class ProfileComponent implements OnInit, OnDestroy {
   }
 
   private subscribeToLangChange(): void {
-    this.langChangeSub = this.localStorageService.languageSubject.subscribe((lang) => this.bindLang(lang));
+    this.langChangeSub = this.localStorageService.languageSubject.subscribe((lang) => {
+      this.bindLang(lang);
+      this.currLang = lang;
+    });
   }
 
   private checkUserActivities(): void {

diff --git a/...in/component/user/components/profile/users-achievements/users-achievements.component.html b/...in/component/user/components/profile/users-achievements/users-achievements.component.html
@@ -5,10 +5,11 @@
         <p class="my-achievements">
           {{ 'profile.my-achievements' | translate }}
         </p>
+        <a *ngIf="this.currLang === 'en'" href="">{{ 'profile.see-all' | translate }}</a>
       </div>
       <div>
         <div class="acheived-quantity">15 {{ 'profile.achieved' | translate }}</div>
-        <a href="">{{ 'profile.see-all' | translate }}</a>
+        <a *ngIf="this.currLang === 'ua'" href="" class="see-all-ukr">{{ 'profile.see-all' | translate }}</a>
       </div>
     </div>
     <div class="body">

diff --git a/...in/component/user/components/profile/users-achievements/users-achievements.component.scss b/...in/component/user/components/profile/users-achievements/users-achievements.component.scss
@@ -40,6 +40,11 @@ p {
         color: var(--tertiary-light-grey);
         line-height: 16px;
         position: relative;
+      }
+    }
+
+    div {
+      .see-all-ukr {
         bottom: 20px;
       }
     }
@@ -72,10 +77,10 @@ p {
       width: 184px;
 
       .header {
-        a:nth-child(2) {
-          text-align: right;
-          bottom: 1px;
-          width: 80px;
+        div {
+          .see-all-ukr {
+            bottom: 0px;
+          }
         }
       }
 

diff --git a/...main/component/user/components/profile/users-achievements/users-achievements.component.ts b/...main/component/user/components/profile/users-achievements/users-achievements.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { PROFILE_IMAGES } from 'src/app/main/image-pathes/profile-images';
 
 @Component({
@@ -8,4 +8,5 @@ import { PROFILE_IMAGES } from 'src/app/main/image-pathes/profile-images';
 })
 export class UsersAchievementsComponent {
   public achievementsImages = PROFILE_IMAGES.achs;
+  @Input() currLang: string;
 }