fix profile, members, skills, login, share logic

Author: Awakich

projects/skills/src/app/profile/shared/month-block/month-block.component.scss

@@ -4,13 +4,17 @@
 .month {
   position: relative;
   width: 100%;
-  height: 100px;
+  height: 130px;
   padding: 50px 50px 50px 18px;
   overflow: hidden;
   white-space: nowrap;
   background-color: var(--white);
   border-radius: 15px;
 
+  @include responsive.apply-desktop {
+    height: 100px;
+  }
+
   &__item {
     opacity: 0.3;
 
@@ -21,12 +25,17 @@
 
   &__next {
     position: absolute;
-    top: 40%;
-    right: 15px;
+    top: 65%;
+    right: 40%;
     color: var(--grey-for-text);
     text-decoration: underline;
 
     @include typography.bold-body-14;
+
+    @include responsive.apply-desktop {
+      top: 40%;
+      right: 15px;
+    }
   }
 
   &__block {
@@ -41,14 +50,19 @@
   z-index: 10;
   display: inline-block;
   width: 100%;
-  max-width: 180px;
-  height: 60px;
+  max-width: 70px;
+  height: 30px;
   margin: 0;
   margin-right: 0.8%;
   line-height: 45px;
   text-align: center;
   transition: all 0.8s;
 
+  @include responsive.apply-desktop {
+    max-width: 180px;
+    height: 60px;
+  }
+
   &::before,
   &::after {
     position: absolute;
@@ -88,11 +102,15 @@
   &__name {
     position: absolute;
     top: -18%;
-    left: 55%;
+    left: 42%;
     display: flex;
     gap: 5px;
     color: var(--white);
+    @include typography.body-12;
 
-    @include typography.bold-body-14;
+    @include responsive.apply-desktop {
+    left: 55%;
+      @include typography.bold-body-14;
+    }
   }
 }

projects/skills/src/app/profile/shared/progress-block/progress-block.component.scss

@@ -22,7 +22,7 @@
   }
 
   &__info {
-    margin-top: 200px;
+    margin-top: 100px;
 
     @include responsive.apply-desktop {
       margin-top: 0;
@@ -42,6 +42,7 @@
     width: 24px;
     height: 24px;
     cursor: pointer;
+    z-index: 10;
 
     &:hover {
       opacity: 1;
@@ -66,10 +67,12 @@
     border: 1px solid var(--dark-grey);
     border-radius: 15px 15px 0;
     opacity: 0;
+    display: none;
     transition: opacity 0.3s ease-in-out;
 
     &--visible {
       opacity: 1;
+      display: block;
     }
   }
 }

projects/skills/src/app/profile/shared/skills-block/skills-block.component.scss

@@ -33,6 +33,7 @@
     width: 24px;
     height: 24px;
     cursor: pointer;
+    z-index: 10;
 
     &:hover {
       opacity: 1;
@@ -48,19 +49,26 @@
   &__tooltip {
     position: absolute;
     bottom: 98%;
-    left: 96%;
+    left: 42%;
     z-index: 100;
     width: 200px;
     padding: 12px;
     color: var(--dark-grey);
     background-color: var(--white);
     border: 1px solid var(--dark-grey);
-    border-radius: 15px 15px 15px 0;
+    border-radius: 15px 15px 0px 15px;
     opacity: 0;
+    display: none;
     transition: opacity 0.3s ease-in-out;
 
     &--visible {
       opacity: 1;
+      display: block;
+    }
+
+    @include responsive.apply-desktop {
+      left: 96%;
+      border-radius: 15px 15px 15px 0;
     }
   }
 

projects/skills/src/app/trajectories/track-bussiness/track-bussiness.component.ts

@@ -2,7 +2,7 @@
 
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
-import { RouterModule } from "@angular/router";
+import { RouterLink, RouterModule } from "@angular/router";
 import { BarComponent } from "@ui/components";
 
 @Component({

projects/skills/src/app/trajectories/track-career/shared/trajectory/trajectory.component.scss

@@ -135,6 +135,8 @@
   &__image {
     width: 85px;
     height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
 
     @include responsive.apply-desktop {
       width: 150px;

projects/social_platform/src/app/auth/login/login.component.html

@@ -30,10 +30,34 @@ <h1 class="auth__title">Вход</h1>
       <app-input
         [error]="password | controlError"
         id="password"
-        type="password"
+        [type]="showPassword ? 'text' : 'password'"
         formControlName="password"
         placeholder="Введите пароль"
-      ></app-input>
+      >
+        @if(showPassword) {
+        <i
+          appIcon
+          icon="eye"
+          appSquare="24"
+          appWidth="24"
+          appHeight="24"
+          appViewBox="0 0 24 24"
+          class="icon"
+          (click)="toggleShowPassword()"
+        ></i>
+        } @else {
+        <i
+          appIcon
+          icon="eye-off"
+          appSquare="24"
+          appWidth="24"
+          appHeight="24"
+          appViewBox="0 0 24 24"
+          class="icon"
+          (click)="toggleShowPassword()"
+        ></i>
+        }
+      </app-input>
       @if (password | controlError: "required") {
       <div class="text-body-14 error">
         {{ errorMessage.VALIDATION_REQUIRED }}

projects/social_platform/src/app/auth/login/login.component.scss

@@ -28,3 +28,8 @@
     }
   }
 }
+
+.icon {
+  cursor: pointer;
+  color: var(--dark-grey);
+}

projects/social_platform/src/app/auth/login/login.component.ts

@@ -46,10 +46,16 @@ export class LoginComponent implements OnInit {
 
   errorMessage = ErrorMessage;
 
+  showPassword = false;
+
   ngOnInit(): void {
     this.tokenService.clearTokens();
   }
 
+  toggleShowPassword() {
+    this.showPassword = !this.showPassword;
+  }
+
   onSubmit() {
     const redirectType = this.route.snapshot.queryParams["redirect"];
 

projects/social_platform/src/app/office/feed/feed.component.html

@@ -21,6 +21,7 @@
       class="page__item"
       [attr.data-id]="item.content.id"
       [feedItem]="item.content"
+      [contentId]="item.content.contentObject.id"
       [resourceLink]="['/office/profile', item.content.contentObject.id]"
       (like)="onLike($event)"
     ></app-news-card>
@@ -30,6 +31,7 @@
       class="page__item"
       [attr.data-id]="item.content.id"
       [feedItem]="item.content"
+      [contentId]="item.content.contentObject.id"
       [resourceLink]="['/office/projects', item.content.contentObject.id]"
       (like)="onLike($event)"
     ></app-news-card>

projects/social_platform/src/app/office/profile/detail/main/main.component.ts

@@ -2,6 +2,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -51,6 +52,7 @@ import { Skill } from "@office/models/skill";
     PluralizePipe,
     AvatarComponent,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileMainComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(