fix changes in trajectory module

Author: Awakich

projects/skills/src/app/profile/shared/trajectory-block/trajectory-block.component.html

@@ -6,9 +6,7 @@
     src="/assets/images/profile/trajectory.svg"
     class="trajectory__image"
   />
-  <app-button (click)="navigateToTrajectory()" customTypographyClass="text-body-12"
-    >Запустить</app-button
-  >
+  <app-button (click)="navigateToTrajectory()">Начать</app-button>
 </div>
 
 <app-modal [open]="isErrorTrajectoryModalOpen" (openChange)="onOpenErorTrajectoryModalChange()">

projects/skills/src/app/skills/detail/detail.component.scss

@@ -57,6 +57,7 @@
   }
 
   &__level {
+    display: none;
     padding: 24px 0;
     margin-top: 45px;
     text-align: center;

projects/skills/src/app/skills/shared/skill-card/skill-card.component.scss

@@ -36,6 +36,7 @@
 
   &__level {
     color: var(--accent);
+    display: none;
   }
 
   &__bottom {

projects/skills/src/app/task/task/task.component.html

@@ -16,7 +16,7 @@ <h1 class="badge__title">{{ skillStepsResponse()?.skillName }}</h1>
     <div class="progress__line"></div>
     <div class="progress__line-done" [ngStyle]="{ width: progressDoneWidth() + 'px' }"></div>
     <div class="progress__first progress__border progress__border--done">
-      {{ skillStepsResponse()?.currentLevel }} задание
+      Задание {{ skillStepsResponse()?.currentLevel }}
     </div>
     @for (id of taskIds(); track $index) {
     <div

projects/skills/src/app/trajectories/track-career/detail/info/info.component.html

@@ -12,7 +12,12 @@
         <p class="timeline__start timeline__date text-body-14">
           {{ userTrajectory()?.startDate | date: "dd.MM.yyyy" }}
         </p>
-        <app-month-block [months]="mockMonts" [hasNext]="false"></app-month-block>
+        <!-- <app-month-block [months]="mockMonts" [hasNext]="false"></app-month-block> -->
+        <div class="timeline__images">
+          @for (skillImage of trajectory.skills; track $index) {
+          <img [src]="skillImage.fileLink" alt="skill" class="trajectory__image" />
+          }
+        </div>
         <p class="timeline__end timeline__date text-body-14">
           {{ userTrajectory()?.endDate | date: "dd.MM.yyyy" }}
         </p>
@@ -161,17 +166,19 @@ <h4 class="text-heading-4">Персональные навыки</h4>
       </div>
     </div>
 
-    <h4 class="text-heading-4">Навыки текущего месяца</h4>
-    <div [ngClass]="{ '': completeAllMainSkills(), skills__now: !completeAllMainSkills() }">
-      @if (userTrajectory()?.availableSkills) { @for(skill of availableSkills(); track $index) {
-      <app-skill-card [skill]="skill" (click)="onSkillClick(skill.id)"></app-skill-card>
-      } } @if (completeAllMainSkills()) {
-      <img
-        alt="complete all"
-        src="assets/images/trajectories/completeAll.png"
-        class="skills__complete"
-      />
-      }
+    <div class="skills__now-container">
+      <h4 class="text-heading-4">Навыки текущего месяца</h4>
+      <div [ngClass]="{ '': completeAllMainSkills(), skills__now: !completeAllMainSkills() }">
+        @if (userTrajectory()?.availableSkills) { @for(skill of availableSkills(); track $index) {
+        <app-skill-card [skill]="skill" (click)="onSkillClick(skill.id)"></app-skill-card>
+        } } @if (completeAllMainSkills()) {
+        <img
+          alt="complete all"
+          src="assets/images/trajectories/completeAll.png"
+          class="skills__complete"
+        />
+        }
+      </div>
     </div>
 
     <div class="skills__future-container">
@@ -184,11 +191,13 @@ <h4 class="text-heading-4">Грядущие навыки</h4>
       </div>
     </div>
 
-    <h4 class="text-heading-4">Пройденные навыки</h4>
-    <div class="skills__past">
-      @if (userTrajectory()?.completedSkills) { @for (skill of completedSkills(); track $index) {
-      <app-skill-card [skill]="skill" (click)="onSkillClick(skill.id)"></app-skill-card>
-      } }
+    <div class="skills__past-container">
+      <h4 class="text-heading-4">Пройденные навыки</h4>
+      <div class="skills__past">
+        @if (userTrajectory()?.completedSkills) { @for (skill of completedSkills(); track $index) {
+        <app-skill-card [skill]="skill" (click)="onSkillClick(skill.id)"></app-skill-card>
+        } }
+      </div>
     </div>
   </div>
 </div>

projects/skills/src/app/trajectories/track-career/detail/info/info.component.scss

@@ -83,6 +83,9 @@
 }
 
 .trajectory__infoItem {
+  @include responsive.apply-desktop {
+    margin-left: 50px;
+  }
   .trajectory {
     display: flex;
     flex-direction: column;
@@ -116,6 +119,13 @@
       }
     }
 
+    &__image {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
     &__title {
       @include typography.heading-4;
 
@@ -153,7 +163,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      padding: 0 25px;
+      padding: 10px;
       background-color: var(--white);
       border: 1px solid var(--grey-button);
       border-radius: 15px;
@@ -228,32 +238,41 @@
     }
   }
 
-  .timeline__date {
-    color: var(--dark-grey);
-
-    @include responsive.apply-desktop {
-      align-self: center !important;
-    }
-  }
+  .timeline {
+    &__images {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        gap: 20px;
+      }
 
-  .timeline__start {
-    align-self: baseline;
-    margin-top: 10px;
-    color: var(--dark-grey);
+      &__date {
+        color: var(--dark-grey);
 
-    @include responsive.apply-desktop {
-      margin: 0;
-    }
-  }
+        @include responsive.apply-desktop {
+          align-self: center !important;
+        }
+      }
+      
+      &__start {
+        align-self: baseline;
+        margin-top: 10px;
+        color: var(--dark-grey);
+
+        @include responsive.apply-desktop {
+          margin: 0;
+        }
+      }
 
-  .timeline__end {
-    align-self: end;
-    margin-bottom: 10px;
-    color: var(--dark-grey);
+      &__end {
+        align-self: end;
+        margin-bottom: 10px;
+        color: var(--dark-grey);
 
-    @include responsive.apply-desktop {
-      margin: 0;
-    }
+        @include responsive.apply-desktop {
+          margin: 0;
+        }
+      }
   }
 
   .info__additional {
@@ -288,10 +307,22 @@
     margin-top: 10px;
 
     &__future-container,
-    &__personal-container {
+    &__personal-container,
+    &__past-container {
       display: none;
     }
 
+    &__now-container {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      h4 {
+        display: none;
+      }
+    }
+
     &__now,
     &__past,
     &__personal,

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

@@ -78,13 +78,13 @@ <h4 class="text-heading-4" [style.color]="trajectory.textColor">
             >Перейти</app-button
           >
           } @else {
-          <app-button
+          <!-- <app-button
             (click)="moreModalOpen.set(true)"
             customTypographyClass="text-body-12"
             class="button__more"
             [backgroundColor]="trajectory.buttonColor"
             >Подробнее</app-button
-          >
+          > -->
           <app-button
             (click)="onOpenConfirmClick()"
             customTypographyClass="text-body-12"

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

@@ -155,7 +155,7 @@
   }
 
   &__date {
-    display: block !important;
+    display: none !important;
     margin-top: 48px;
     margin-bottom: 36px;