Skip to content

Commit 47be427

Browse files
AwakichAwakich
committed
fix merge error of mobile rewrite
1 parent 5d1ad71 commit 47be427

15 files changed

Lines changed: 568 additions & 285 deletions

‎projects/social_platform/src/app/ui/pages/courses/detail/course-detail.component.html‎

Lines changed: 82 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,94 @@
88
</div>
99
} @else if (course()) {
1010
<div class="info detail__section detail__info">
11-
<img class="info__cover" [src]="course()!.headerCoverUrl" alt="cover" />
12-
13-
<div class="info__avatar">
14-
<app-avatar
15-
[url]="course()!.avatarUrl"
16-
[size]="106"
17-
(click)="redirectDetailInfo(course()!.id)"
18-
></app-avatar>
19-
@if (!isTaskDetail()) {
20-
<h1 class="info__title text-body-12">{{ course()!.title }}</h1>
21-
}
11+
@if (showCover) {
12+
<div class="info__cover">
13+
<img class="info__cover" [src]="course()!.headerCoverUrl" alt="cover" />
14+
15+
<div class="info__avatar">
16+
<app-avatar
17+
[url]="course()!.avatarUrl"
18+
[size]="106"
19+
(click)="redirectDetailInfo(course()!.id)"
20+
></app-avatar>
21+
22+
@if (!isTaskDetail() && !isMobile) {
23+
<h1 class="info__title text-body-12">
24+
{{ course()!.title }}
25+
</h1>
26+
}
27+
</div>
2228
</div>
23-
</div>
29+
}
30+
31+
<div class="info__body">
32+
<div class="info__actions" [class.info__actions--task]="showBackOnly">
33+
@if (showBackOnly) {
34+
<app-button size="small" appearance="outline" (click)="redirectDetailInfo(course()!.id)">
35+
назад
36+
</app-button>
2437

25-
<div class="info__body">
26-
<div class="info__actions">
27-
<app-button
28-
(click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
29-
[disabled]="false"
30-
size="big"
31-
customTypographyClass="text-body-12"
32-
appearance="outline"
33-
>{{ isTaskDetail() ? "назад к модулю" : "назад" }}</app-button
34-
>
35-
36-
<app-button
37-
[disabled]="isDisabled()"
38-
[class.info__actions--disabled]="isDisabled()"
39-
size="big"
40-
customTypographyClass="text-body-12"
41-
appearance="outline"
42-
(click)="redirectToProgram()"
43-
>вернуться в программу</app-button
44-
>
38+
<!-- <div class="task__meta">
39+
@if (lessonInfo()) {
40+
<p class="text-body-14">модуль {{ lessonInfo()!.moduleOrder }}</p>
41+
<p class="task__lesson text-body-12">урок {{ lessonOrder() }}</p>
42+
}
43+
</div> -->
44+
45+
<app-button
46+
size="small"
47+
appearance="outline"
48+
(click)="course()!.description ? (isAboutModalOpen = true) : null"
49+
>
50+
о курсе
51+
</app-button>
52+
} @else { @if (showAnalyticsButton) {
53+
<app-button [disabled]="true" size="small" appearance="outline">аналитика</app-button>
54+
} @if (showAboutButton) {
55+
<app-button
56+
size="small"
57+
appearance="outline"
58+
class="info__actions--end"
59+
[disabled]="!course()!.description"
60+
(click)="course()!.description ? (isAboutModalOpen = true) : null"
61+
>
62+
о курсе
63+
</app-button>
64+
}
65+
66+
<app-button
67+
class="info__actions--full"
68+
size="big"
69+
appearance="outline"
70+
(click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
71+
>
72+
назад
73+
</app-button>
74+
75+
@if (showProgramButton) {
76+
<app-button
77+
[disabled]="isDisabled()"
78+
size="big"
79+
class="info__actions--full"
80+
customTypographyClass="text-body-12"
81+
appearance="outline"
82+
(click)="redirectToProgram()"
83+
>вернуться в программу</app-button
84+
>
85+
} }
86+
</div>
4587
</div>
4688
</div>
4789

4890
<router-outlet></router-outlet>
91+
92+
<app-modal
93+
[open]="isAboutModalOpen"
94+
(openChange)="isAboutModalOpen = !isAboutModalOpen"
95+
bodyClass="modal__body--no-flex"
96+
>
97+
<app-course-about [description]="course()!.description"></app-course-about>
98+
</app-modal>
4999
}
50100
</div>
51101
</div>

‎projects/social_platform/src/app/ui/pages/courses/detail/course-detail.component.ts‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
/** @format */
22

33
import { CommonModule } from "@angular/common";
4-
import { Component, inject, OnDestroy, OnInit } from "@angular/core";
4+
import { Component, HostListener, inject, OnDestroy, OnInit } from "@angular/core";
55
import { RouterOutlet } from "@angular/router";
66
import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
77
import { ButtonComponent } from "@ui/primitives";
88
import { LoaderComponent } from "@ui/primitives/loader/loader.component";
99
import { CourseDetailInfoService } from "@api/courses/facades/course-detail-info.service";
1010
import { CourseDetailUIInfoService } from "@api/courses/facades/ui/course-detail-ui-info.service";
1111
import { CourseAboutComponent } from "@ui/widgets/course-about/course-about.component";
12+
import { LessonUIInfoService } from "@api/courses/facades/ui/lesson-ui-info.service";
13+
import { ModalComponent } from "@ui/primitives/modal/modal.component";
14+
import { LessonInfoService } from "@api/courses/facades/lesson-info.service";
1215

1316
@Component({
1417
selector: "app-course-detail",
@@ -20,6 +23,7 @@ import { CourseAboutComponent } from "@ui/widgets/course-about/course-about.comp
2023
ButtonComponent,
2124
LoaderComponent,
2225
CourseAboutComponent,
26+
ModalComponent,
2327
],
2428
templateUrl: "./course-detail.component.html",
2529
styleUrl: "./course-detail.component.scss",
@@ -35,6 +39,15 @@ export class CourseDetailComponent implements OnInit, OnDestroy {
3539
protected readonly isDisabled = this.courseDetailUIInfoService.isDisabled;
3640
protected readonly isTaskDetail = this.courseDetailUIInfoService.isTaskDetail;
3741

42+
isAboutModalOpen = false;
43+
44+
protected appWidth = window.innerWidth;
45+
46+
@HostListener("window:resize")
47+
onResize() {
48+
this.appWidth = window.innerWidth;
49+
}
50+
3851
ngOnInit(): void {
3952
this.courseDetailInfoService.init();
4053
}
@@ -50,4 +63,28 @@ export class CourseDetailComponent implements OnInit, OnDestroy {
5063
redirectToProgram(): void {
5164
this.courseDetailInfoService.redirectToProgram();
5265
}
66+
67+
get isMobile(): boolean {
68+
return this.appWidth < 1000;
69+
}
70+
71+
get showCover(): boolean {
72+
return !this.isTaskDetail() || !this.isMobile;
73+
}
74+
75+
get showAboutButton(): boolean {
76+
return this.isMobile && !this.isTaskDetail();
77+
}
78+
79+
get showBackOnly(): boolean {
80+
return this.isTaskDetail() && this.isMobile;
81+
}
82+
83+
get showAnalyticsButton(): boolean {
84+
return this.isMobile && !this.isTaskDetail();
85+
}
86+
87+
get showProgramButton(): boolean {
88+
return !this.showBackOnly;
89+
}
5390
}

‎projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,23 @@
99
<p class="text-body-12">урок пройден</p>
1010
</div>
1111

12-
<app-button customTypographyClass="text-body-12" size="medium" (click)="routeToCourses()"
12+
@if (appWidth > 1000) {
13+
<app-button
14+
class="complete__button"
15+
customTypographyClass="text-body-12"
16+
size="medium"
17+
(click)="routeToCourses()"
1318
>отлично</app-button
1419
>
20+
}
1521
</div>
1622
</div>
23+
@if (appWidth < 1000) {
24+
<app-button
25+
class="complete__button"
26+
customTypographyClass="text-body-12"
27+
[size]="appWidth > 1000 ? 'medium' : 'big'"
28+
(click)="routeToCourses()"
29+
>отлично</app-button
30+
>
31+
}

‎projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
background-color: var(--light-white);
88
border: 0.5px solid var(--medium-grey-for-outline);
99
border-radius: var(--rounded-lg);
10+
position: relative;
1011

1112
@include responsive.apply-desktop {
1213
min-height: 358px;
@@ -25,4 +26,14 @@
2526
margin-top: 20px;
2627
margin-bottom: 20px;
2728
}
29+
30+
&__button {
31+
position: absolute;
32+
top: 84%;
33+
width: 90%;
34+
35+
@include responsive.apply-desktop {
36+
position: static;
37+
}
38+
}
2839
}

‎projects/social_platform/src/app/ui/pages/courses/lesson/complete/complete.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/** @format */
22

3-
import { Component, inject, OnInit, signal } from "@angular/core";
3+
import { Component, HostListener, inject, OnInit, signal } from "@angular/core";
44
import { CommonModule } from "@angular/common";
55
import { ButtonComponent } from "@ui/primitives";
66
import { ActivatedRoute, Router } from "@angular/router";
@@ -28,6 +28,13 @@ export class TaskCompleteComponent implements OnInit {
2828
router = inject(Router); // Сервис для навигации
2929
courseId = signal<number | null>(null);
3030

31+
protected appWidth = window.innerWidth;
32+
33+
@HostListener("window:resize")
34+
onResize() {
35+
this.appWidth = window.innerWidth;
36+
}
37+
3138
ngOnInit(): void {
3239
const courseId = Number(this.route.parent?.parent?.parent?.snapshot.paramMap.get("courseId"));
3340
this.courseId.set(isNaN(courseId) ? null : courseId);

‎projects/social_platform/src/app/ui/pages/courses/lesson/lesson.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@
9292
<app-button
9393
[loader]="loader()"
9494
[disabled]="isSubmitDisabled() || isViewingCompleted()"
95-
[style.opacity]="isSubmitDisabled() || isViewingCompleted() ? 0.5 : 1"
9695
size="big"
9796
customTypographyClass="text-body-12"
9897
class="action__button"

0 commit comments

Comments
 (0)