Merge pull request #2696 from ita-social-projects/pop-up-with-a-list-…

…of-all-habits-in-progress-appears-in-ukrainian-in-en-localization-and-vise-versa Bugfix/#6260#6261#6386#6182/Pop up with a list of all habits in progress appears in ukrainian in en localization and vise versa. "Мої досягнення", "Переглянуто" and "Позначити все" do not fit.
ita-social-projects · Sep 25, 2023 · 06d8841 · 06d8841
2 parents f8622af + 9e3c1b1
commit 06d8841
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 25 deletions.
diff --git a/src/app/main/component/shared/components/calendar-base/calendar-base.component.ts b/src/app/main/component/shared/components/calendar-base/calendar-base.component.ts
@@ -94,14 +94,16 @@ export class CalendarBaseComponent implements OnDestroy {
 
   public subscribeToLangChange(): void {
     this.langChangeSub = this.translate.onDefaultLangChange.subscribe((res) => {
-      const translations = res.translations.profile.calendar;
-      this.daysName = translations.days;
-      this.months = translations.months;
-      this.monthsShort = translations.monthsShort;
-      this.monthAndYearName = `${this.months[this.currentMonth]} ${this.currentYear}`;
-      this.markCurrentDayOfWeek();
-      this.buildMonthCalendar(this.monthsShort);
-      this.getUserHabits(true, this.calendarDay);
+      setTimeout(() => {
+        const translations = res.translations.profile.calendar;
+        this.daysName = translations.days;
+        this.months = translations.months;
+        this.monthsShort = translations.monthsShort;
+        this.monthAndYearName = `${this.months[this.currentMonth]} ${this.currentYear}`;
+        this.markCurrentDayOfWeek();
+        this.buildMonthCalendar(this.monthsShort);
+        this.getUserHabits(true, this.calendarDay);
+      }, 0);
     });
   }
 

diff --git a/src/app/main/component/shared/components/events-list-item/events-list-item.component.ts b/src/app/main/component/shared/components/events-list-item/events-list-item.component.ts
@@ -78,7 +78,7 @@ export class EventsListItemComponent implements OnChanges, OnInit, OnDestroy {
     popupTitle: 'homepage.events.delete-title',
     popupConfirm: 'homepage.events.delete-yes',
     popupCancel: 'homepage.events.delete-no',
-    style: 'red'
+    style: 'green'
   };
   public canUserJoinCloseEvent: boolean;
 

diff --git a/src/app/main/component/user/components/profile/eco-places/eco-places.component.scss b/src/app/main/component/user/components/profile/eco-places/eco-places.component.scss
@@ -3,7 +3,7 @@ $bp-smallest: 320px;
 $bp-phone: 576px;
 $bp-tablet: 768px;
 $bp-desktop: 1024px;
-$bp-largest: 1440px;
+$bp-largest: 1199px;
 $grey: var(--tertiary-light-grey);
 
 .eco-places-content {

diff --git a/...t/user/components/profile/profile-widget/profile-progress/profile-progress.component.scss b/...t/user/components/profile/profile-widget/profile-progress/profile-progress.component.scss
@@ -82,7 +82,7 @@ p {
   }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 1200px) {
   .stat {
     width: 213px;
     column-gap: 16px;

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;
@@ -59,7 +60,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/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.scss b/src/app/main/component/user/components/profile/shopping-list/shopping-list.component.scss
@@ -2,7 +2,7 @@ $bp-smallest: 320px;
 $bp-phone: 576px;
 $bp-tablet: 768px;
 $bp-desktop: 1080px;
-$bp-largest: 1440px;
+$bp-largest: 1199px;
 
 .outer {
   background-color: var(--primary-white);

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
@@ -2,12 +2,15 @@
   <div class="achievements">
     <div class="header">
       <div>
-        <p>
+        <p class="my-achievements">
           {{ 'profile.my-achievements' | translate }}
         </p>
-        <a href="">{{ 'profile.see-all' | translate }}</a>
+        <a *ngIf="this.currLang === 'en'" href="">{{ 'profile.see-all' | translate }}</a>
+      </div>
+      <div>
+        <div class="acheived-quantity">15 {{ 'profile.achieved' | translate }}</div>
+        <a *ngIf="this.currLang === 'ua'" href="" class="see-all-ukr">{{ 'profile.see-all' | translate }}</a>
       </div>
-      <div class="acheived-quantity">15 {{ 'profile.achieved' | translate }}</div>
     </div>
     <div class="body">
       <img [src]="image" alt="achievement" *ngFor="let image of achievementsImages" />

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
@@ -33,13 +33,18 @@ p {
           color: var(--primary-dark-grey);
         }
 
-        a:nth-child(2) {
-          font-weight: 400;
-          font-size: 12px;
-          color: var(--tertiary-light-grey);
-          line-height: 16px;
+        .see-all-ukr {
+          bottom: 20px;
         }
       }
+
+      a:nth-child(2) {
+        font-weight: 400;
+        font-size: 12px;
+        color: var(--tertiary-light-grey);
+        line-height: 16px;
+        position: relative;
+      }
     }
 
     .acheived-quantity {
@@ -62,13 +67,21 @@ p {
   }
 }
 
-@media (min-width: 768px) and (max-width: 1439px) {
+@media (min-width: 768px) and (max-width: 1199px) {
   .outer {
     height: 132px;
 
     .achievements {
       width: 184px;
 
+      .header {
+        div {
+          .see-all-ukr {
+            bottom: -1px;
+          }
+        }
+      }
+
       .body img {
         height: 48px;
       }

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;
 }
diff --git a/src/app/main/component/user/components/profile/users-friends/users-friends.component.scss b/src/app/main/component/user/components/profile/users-friends/users-friends.component.scss
@@ -128,7 +128,7 @@ p {
   }
 }
 
-@media (min-width: 768px) and (max-width: 1439px) {
+@media (min-width: 768px) and (max-width: 1199px) {
   .outer {
     .friends {
       width: 184px;
@@ -145,5 +145,35 @@ p {
         height: 48px;
       }
     }
+
+    div {
+      p:nth-child(2) {
+        position: relative;
+        bottom: 1px;
+        right: 5px;
+      }
+    }
+  }
+}
+
+@media (min-width: 1199px) and (max-width: 1439px) {
+  .outer {
+    .friends {
+      .friends-images {
+        div {
+          position: relative;
+          top: 6px;
+          left: 5px;
+          scale: 116%;
+
+          p:nth-child(2) {
+            position: relative;
+            bottom: 1px;
+            right: 5px;
+            scale: 87%;
+          }
+        }
+      }
+    }
   }
 }