add mobile version of lesson pages

Author: Awakich

projects/social_platform/src/app/office/courses/courses.service.ts

@@ -1,6 +1,6 @@
 /** @format */
 
-import { Injectable } from "@angular/core";
+import { Injectable, signal } from "@angular/core";
 import { ApiService } from "@corelib";
 import {
   CourseCard,
@@ -23,6 +23,9 @@ import { Observable } from "rxjs";
 export class CoursesService {
   private readonly COURSE_URL = "/courses";
 
+  readonly currentLesson = signal<CourseLesson | null>(null);
+  readonly courseStructure = signal<CourseStructure | null>(null);
+
   constructor(private readonly apiService: ApiService) {}
 
   /**

projects/social_platform/src/app/office/courses/detail/course-detail.component.html

@@ -2,40 +2,57 @@
 
 <div class="detail">
   <div class="detail__body">
-    @if(course()) {
+    @if (course()) {
     <div class="info detail__section detail__info">
+      @if (showCover) {
       <div class="info__cover">
         <img class="info__cover" [src]="course()!.headerCoverUrl" alt="cover" />
+
         <div class="info__avatar">
           <app-avatar
             [url]="course()!.avatarUrl"
             [size]="106"
             (click)="redirectDetailInfo(course()!.id)"
           ></app-avatar>
-          @if (!isTaskDetail()) { @if (appWidth > 920) {
-          <h1 class="info__title text-body-12">{{ course()!.title }}</h1>
-          } }
+
+          @if (!isTaskDetail() && !isMobile) {
+          <h1 class="info__title text-body-12">
+            {{ course()!.title }}
+          </h1>
+          }
         </div>
       </div>
+      }
 
       <div class="info__body">
-        <div class="info__actions">
-          @if (appWidth < 920) {
+        <div class="info__actions" [class.info__actions--task]="showBackOnly">
+          @if (showBackOnly) {
+          <app-button size="small" appearance="outline" (click)="redirectDetailInfo(course()!.id)">
+            назад
+          </app-button>
+
+          <div class="task__meta">
+            @if (currentLesson()) {
+            <p class="text-body-14">модуль {{ currentLesson()!.moduleOrder }}</p>
+            <p class="task__lesson text-body-12">урок {{ lessonOrder }}</p>
+            }
+          </div>
+
           <app-button
-            [disabled]="true"
             size="small"
-            customTypographyClass="text-body-12"
             appearance="outline"
+            (click)="course()!.description ? (isAboutModalOpen = true) : null"
           >
-            аналитика
+            о курсе
           </app-button>
-
+          } @else { @if (showAnalyticsButton) {
+          <app-button [disabled]="true" size="small" appearance="outline">аналитика</app-button>
+          } @if (showAboutButton) {
           <app-button
-            [disabled]="!course()!.description"
             size="small"
-            class="info__actions--end"
-            customTypographyClass="text-body-12"
             appearance="outline"
+            class="info__actions--end"
+            [disabled]="!course()!.description"
             (click)="course()!.description ? (isAboutModalOpen = true) : null"
           >
             о курсе
@@ -44,22 +61,24 @@ <h1 class="info__title text-body-12">{{ course()!.title }}</h1>
 
           <app-button
             class="info__actions--full"
-            (click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
-            [size]="appWidth > 920 ? 'big' : 'big'"
-            customTypographyClass="text-body-12"
+            size="big"
             appearance="outline"
-            >{{ isTaskDetail() ? "назад к модулю" : "назад" }}</app-button
+            (click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
           >
+            назад
+          </app-button>
 
+          @if (showProgramButton) {
           <app-button
             class="info__actions--full"
             [disabled]="isDisabled()"
-            [size]="appWidth > 920 ? 'big' : 'big'"
-            customTypographyClass="text-body-12"
+            size="big"
             appearance="outline"
             (click)="redirectToProgram()"
-            >вернуться в программу</app-button
           >
+            вернуться в программу
+          </app-button>
+          } }
         </div>
       </div>
     </div>

projects/social_platform/src/app/office/courses/detail/course-detail.component.scss

@@ -7,13 +7,15 @@ $detail-bar-mb: 12px;
 .detail {
   display: flex;
   flex-direction: column;
-  height: 100%;
   max-height: 100%;
   padding-top: 20px;
+  padding-bottom: 20px;
   margin: 0 20px;
 
   @include responsive.apply-desktop {
     margin: 0;
+    height: 100%;
+    padding-bottom: 0px;
   }
 
   &__body {
@@ -36,6 +38,7 @@ $detail-bar-mb: 12px;
     position: relative;
     height: 136px;
     border-radius: 15px;
+    margin-bottom: 24px;
 
     @include responsive.apply-desktop {
       border-radius: 15px 15px 0 0;
@@ -62,7 +65,7 @@ $detail-bar-mb: 12px;
     position: absolute;
     bottom: -10px;
     left: 50%;
-    z-index: 100;
+    z-index: 10;
     display: block;
     display: flex;
     flex-direction: column;
@@ -114,11 +117,17 @@ $detail-bar-mb: 12px;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     align-items: center;
-    padding: 24px 10px 0;
 
     @include responsive.apply-desktop {
       gap: 180px;
-      padding: 24px 0 30px;
+      padding: 0px 0px 30px;
+    }
+    
+    &--task {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
     }
 
     &--end {
@@ -138,3 +147,15 @@ $detail-bar-mb: 12px;
     }
   }
 }
+
+.task {
+  &__lesson {
+    color: var(--dark-grey);
+  }
+  
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}

projects/social_platform/src/app/office/courses/detail/course-detail.component.ts

@@ -8,9 +8,10 @@ import { AvatarComponent } from "@ui/components/avatar/avatar.component";
 import { ButtonComponent } from "@ui/components";
 import { IconComponent } from "@uilib";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { CourseDetail, CourseStructure } from "@office/models/courses.model";
+import { CourseDetail, CourseLesson, CourseStructure } from "@office/models/courses.model";
 import { ModalComponent } from "@ui/components/modal/modal.component";
 import { CourseAboutComponent } from "@office/courses/shared/course-about/course-about.component";
+import { CoursesService } from "@office/courses/courses.service";
 
 /**
  * Компонент детального просмотра траектории
@@ -36,6 +37,7 @@ export class CourseDetailComponent implements OnInit {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly coursesService = inject(CoursesService);
 
   appWidth = window.innerWidth;
 
@@ -50,6 +52,44 @@ export class CourseDetailComponent implements OnInit {
 
   protected readonly courseModules = signal<CourseStructure["modules"]>([]);
   protected readonly course = signal<CourseDetail | undefined>(undefined);
+  protected readonly courseStructure = signal<CourseStructure | undefined>(undefined);
+  protected readonly currentLesson = this.coursesService.currentLesson;
+
+  get lessonOrder(): number | null {
+    const lesson = this.currentLesson();
+    const structure = this.courseStructure();
+    if (!lesson || !structure) return null;
+
+    for (const mod of structure.modules) {
+      const found = mod.lessons.find(l => l.id === lesson.id);
+      if (found) return found.order;
+    }
+    return null;
+  }
+
+  get isMobile(): boolean {
+    return this.appWidth < 920;
+  }
+
+  get showCover(): boolean {
+    return !this.isTaskDetail() || !this.isMobile;
+  }
+
+  get showAboutButton(): boolean {
+    return this.isMobile && !this.isTaskDetail();
+  }
+
+  get showBackOnly(): boolean {
+    return this.isTaskDetail() && this.isMobile;
+  }
+
+  get showAnalyticsButton(): boolean {
+    return this.isMobile && !this.isTaskDetail();
+  }
+
+  get showProgramButton(): boolean {
+    return !this.showBackOnly;
+  }
 
   /**
    * Инициализация компонента
@@ -63,8 +103,10 @@ export class CourseDetailComponent implements OnInit {
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe({
-        next: ([course, _]: [CourseDetail, CourseStructure]) => {
+        next: ([course, structure]: [CourseDetail, CourseStructure]) => {
           this.course.set(course);
+          this.courseStructure.set(structure);
+          this.coursesService.courseStructure.set(structure);
 
           if (!course.partnerProgramId) {
             this.isDisabled.set(true);

projects/social_platform/src/app/office/courses/lesson/complete/complete.component.scss

@@ -2,11 +2,15 @@
 @use "styles/typography";
 
 .complete {
-  min-height: 358px;
+  min-height: 543px;
   padding: 24px;
   background-color: var(--light-white);
   border: 0.5px solid var(--medium-grey-for-outline);
   border-radius: var(--rounded-lg);
+  
+  @include responsive.apply-desktop {
+    min-height: 358px;
+  }
 
   &__block {
     display: flex;

projects/social_platform/src/app/office/courses/lesson/lesson.component.html

@@ -2,10 +2,13 @@
 
 @if (lessonInfo()) {
 <div class="task">
-  <div class="task__wrapper">
+  <div class="task__wrapper" [class.task__wrapper--mobile]="appWidth < 920">
+    @if (appWidth >= 920) {
     <div class="task__tasks">
       <p class="task__name text-bold-body-14">модуль {{ lessonInfo()?.moduleOrder }}</p>
+      <p class="task__lesson text-body-12">урок {{ lessonOrder() }}</p>
     </div>
+    }
 
     <div class="task__progress">
       @for (task of tasks(); track task.id) {
@@ -15,7 +18,7 @@
         [ngClass]="{
           'progress__task--done': isDone(task),
           'progress__task--current': isCurrent(task.id),
-          'progress__task--clickable': isDone(task)
+          'progress__task--clickable': isClickable(task)
         }"
       >
         <p class="text-body-12">{{ task.order }}</p>

projects/social_platform/src/app/office/courses/lesson/lesson.component.scss

@@ -10,12 +10,21 @@
 
 .task {
   display: grid;
-  grid-template-columns: 68px 1fr;
+  grid-template-columns: 1fr;
   gap: 20px;
 
+  @include responsive.apply-desktop {
+    grid-template-columns: 68px 1fr;
+  }
+
   &__wrapper {
     display: flex;
     flex-direction: column;
+    order: -1;
+    
+    @include responsive.apply-desktop {
+      order: 0;
+    }
   }
 
   &__tasks {
@@ -26,15 +35,22 @@
   &__skill-name {
     color: var(--black);
   }
-
-  &__name {
-    color: var(--dark-grey);
+  
+  &__lesson {
+    color: var(--grey-for-text);
   }
 
   &__progress {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 0;
+
+    @include responsive.apply-desktop {
+      flex-direction: column;
+      overflow-x: visible;
+    }
   }
 
   &__main {
@@ -43,6 +59,10 @@
     justify-content: center;
   }
 
+  &__content {
+    width: 100%;
+  }
+
   &__complete {
     display: block;
   }
@@ -62,7 +82,9 @@
 .progress {
   &__task {
     height: 23px;
+    min-width: 42px;
     padding: 4px 0;
+    flex-shrink: 0;
     text-align: center;
     background-color: var(--light-white);
     border-radius: var(--rounded-xl);
@@ -82,3 +104,15 @@
     }
   }
 }
+
+.action {
+  &__button {
+    position: fixed;
+    bottom: 1%;
+    left: 7%;
+    
+    @include responsive.apply-desktop {
+      position: static;
+    }
+  }
+}