Skip to content

Commit 30ce832

Browse files
AwakichAwakich
committed
add new detail pages for courses & program
1 parent 366dd45 commit 30ce832

25 files changed

Lines changed: 645 additions & 349 deletions

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

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,75 @@
44
<div class="detail__body">
55
@if(course()) {
66
<div class="info detail__section detail__info">
7-
<img class="info__cover" [src]="course()!.headerCoverUrl" alt="cover" />
8-
9-
<div class="info__avatar">
10-
<app-avatar
11-
[url]="course()!.avatarUrl"
12-
[size]="106"
13-
(click)="redirectDetailInfo(course()!.id)"
14-
></app-avatar>
15-
@if (!isTaskDetail()) {
16-
<h1 class="info__title text-body-12">{{ course()!.title }}</h1>
17-
}
7+
<div class="info__cover">
8+
<img class="info__cover" [src]="course()!.headerCoverUrl" alt="cover" />
9+
<div class="info__avatar">
10+
<app-avatar
11+
[url]="course()!.avatarUrl"
12+
[size]="106"
13+
(click)="redirectDetailInfo(course()!.id)"
14+
></app-avatar>
15+
@if (!isTaskDetail()) { @if (appWidth > 920) {
16+
<h1 class="info__title text-body-12">{{ course()!.title }}</h1>
17+
} }
18+
</div>
1819
</div>
19-
</div>
2020

21-
<div class="info__body">
22-
<div class="info__actions">
23-
<app-button
24-
(click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
25-
[disabled]="false"
26-
size="big"
27-
customTypographyClass="text-body-12"
28-
appearance="outline"
29-
>{{ isTaskDetail() ? "назад к модулю" : "назад" }}</app-button
30-
>
21+
<div class="info__body">
22+
<div class="info__actions">
23+
@if (appWidth < 920) {
24+
<app-button
25+
[disabled]="true"
26+
size="small"
27+
customTypographyClass="text-body-12"
28+
appearance="outline"
29+
>
30+
аналитика
31+
</app-button>
32+
33+
<app-button
34+
[disabled]="!course()!.description"
35+
size="small"
36+
class="info__actions--end"
37+
customTypographyClass="text-body-12"
38+
appearance="outline"
39+
(click)="course()!.description ? (isAboutModalOpen = true) : null"
40+
>
41+
о курсе
42+
</app-button>
43+
}
3144

32-
<app-button
33-
[disabled]="isDisabled()"
34-
[class.info__actions--disabled]="isDisabled()"
35-
size="big"
36-
customTypographyClass="text-body-12"
37-
appearance="outline"
38-
(click)="redirectToProgram()"
39-
>вернуться в программу</app-button
40-
>
45+
<app-button
46+
class="info__actions--full"
47+
(click)="redirectDetailInfo(isTaskDetail() ? course()!.id : undefined)"
48+
[size]="appWidth > 920 ? 'big' : 'big'"
49+
customTypographyClass="text-body-12"
50+
appearance="outline"
51+
>{{ isTaskDetail() ? "назад к модулю" : "назад" }}</app-button
52+
>
53+
54+
<app-button
55+
class="info__actions--full"
56+
[disabled]="isDisabled()"
57+
[size]="appWidth > 920 ? 'big' : 'big'"
58+
customTypographyClass="text-body-12"
59+
appearance="outline"
60+
(click)="redirectToProgram()"
61+
>вернуться в программу</app-button
62+
>
63+
</div>
4164
</div>
4265
</div>
4366

4467
<router-outlet></router-outlet>
68+
69+
<app-modal
70+
[open]="isAboutModalOpen"
71+
(openChange)="isAboutModalOpen = !isAboutModalOpen"
72+
bodyClass="modal__body--no-flex"
73+
>
74+
<app-course-about [description]="course()!.description"></app-course-about>
75+
</app-modal>
4576
}
4677
</div>
4778
</div>

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

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ $detail-bar-mb: 12px;
1010
height: 100%;
1111
max-height: 100%;
1212
padding-top: 20px;
13+
margin: 0px 20px;
14+
15+
@include responsive.apply-desktop {
16+
margin: 0;
17+
}
1318

1419
&__body {
1520
flex-grow: 1;
@@ -25,12 +30,16 @@ $detail-bar-mb: 12px;
2530
padding: 0;
2631
border: none;
2732
border-radius: $body-slide;
33+
margin-bottom: 20px;
2834

2935
&__cover {
3036
position: relative;
31-
width: 100%;
3237
height: 136px;
33-
border-radius: 15px 15px 0 0;
38+
border-radius: 15px;
39+
40+
@include responsive.apply-desktop {
41+
border-radius: 15px 15px 0 0;
42+
}
3443

3544
img {
3645
position: absolute;
@@ -60,6 +69,7 @@ $detail-bar-mb: 12px;
6069
align-items: center;
6170
cursor: pointer;
6271
border-radius: 50%;
72+
transform: translate(-50%, 30%);
6373

6474
&--program {
6575
bottom: 15px;
@@ -102,13 +112,29 @@ $detail-bar-mb: 12px;
102112
&__actions {
103113
display: grid;
104114
grid-template-columns: 1fr 1fr;
105-
gap: 180px;
115+
gap: 12px;
106116
align-items: center;
107-
padding: 24px 0 30px;
117+
padding: 24px 10px 0;
118+
119+
@include responsive.apply-desktop {
120+
gap: 180px;
121+
padding: 24px 0 30px;
122+
}
123+
124+
&--end {
125+
justify-self: end;
126+
}
127+
128+
&--full {
129+
grid-column: 1 / -1;
130+
131+
@include responsive.apply-desktop {
132+
grid-column: auto;
133+
}
134+
}
108135

109136
&--disabled {
110137
cursor: not-allowed;
111-
opacity: 0.5;
112138
}
113139
}
114140
}

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
/** @format */
22

33
import { CommonModule } from "@angular/common";
4-
import { Component, DestroyRef, inject, signal, OnInit } from "@angular/core";
4+
import { Component, DestroyRef, HostListener, inject, signal, OnInit } from "@angular/core";
55
import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from "@angular/router";
66
import { filter, map, tap } from "rxjs";
77
import { AvatarComponent } from "@ui/components/avatar/avatar.component";
88
import { ButtonComponent } from "@ui/components";
9+
import { IconComponent } from "@uilib";
910
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
1011
import { CourseDetail, CourseStructure } from "@office/models/courses.model";
12+
import { ModalComponent } from "@ui/components/modal/modal.component";
13+
import { CourseAboutComponent } from "@office/courses/shared/course-about/course-about.component";
1114

1215
/**
1316
* Компонент детального просмотра траектории
@@ -17,7 +20,15 @@ import { CourseDetail, CourseStructure } from "@office/models/courses.model";
1720
@Component({
1821
selector: "app-course-detail",
1922
standalone: true,
20-
imports: [CommonModule, RouterOutlet, AvatarComponent, ButtonComponent],
23+
imports: [
24+
CommonModule,
25+
RouterOutlet,
26+
AvatarComponent,
27+
ButtonComponent,
28+
IconComponent,
29+
ModalComponent,
30+
CourseAboutComponent,
31+
],
2132
templateUrl: "./course-detail.component.html",
2233
styleUrl: "./course-detail.component.scss",
2334
})
@@ -26,8 +37,16 @@ export class CourseDetailComponent implements OnInit {
2637
private readonly router = inject(Router);
2738
private readonly destroyRef = inject(DestroyRef);
2839

40+
appWidth = window.innerWidth;
41+
42+
@HostListener("window:resize")
43+
onResize() {
44+
this.appWidth = window.innerWidth;
45+
}
46+
2947
protected readonly isTaskDetail = signal<boolean>(false);
3048
protected readonly isDisabled = signal<boolean>(false);
49+
isAboutModalOpen = false;
3150

3251
protected readonly courseModules = signal<CourseStructure["modules"]>([]);
3352
protected readonly course = signal<CourseDetail | undefined>(undefined);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/** @format */
22

33
import type { Routes } from "@angular/router";
4-
import { TrajectoryInfoComponent } from "./info/info.component";
54
import { CourseDetailComponent } from "./course-detail.component";
65
import { CoursesDetailResolver } from "./course-detail.resolver";
6+
import { CourseInfoComponent } from "./info/info.component";
77

88
export const COURSE_DETAIL_ROUTES: Routes = [
99
{
@@ -16,7 +16,7 @@ export const COURSE_DETAIL_ROUTES: Routes = [
1616
children: [
1717
{
1818
path: "",
19-
component: TrajectoryInfoComponent,
19+
component: CourseInfoComponent,
2020
},
2121
{
2222
path: "lesson",

‎projects/social_platform/src/app/office/courses/detail/info/info.component.html‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<main class="trajectory">
55
<section class="course__main">
66
<div class="course__details">
7+
@if (appWidth > 920) {
78
<div class="course__left">
89
<aside class="course__aside">
910
<app-soon-card
@@ -12,6 +13,7 @@
1213
></app-soon-card>
1314
</aside>
1415
</div>
16+
}
1517

1618
<section class="course__content">
1719
<div
@@ -32,27 +34,11 @@
3234
</div>
3335
</section>
3436

37+
@if (appWidth > 920) {
3538
<div class="course__right">
36-
<div class="about course__about">
37-
<div class="about__head">
38-
<h3 class="text-body-12 about__title">о курсе</h3>
39-
<i appIcon icon="folder" appSquare="12" class="about__head--icon"></i>
40-
</div>
41-
@if (courseDetail()!.description) {
42-
<div class="text-body-10 about__text">
43-
<p #descEl [innerHTML]="courseDetail()!.description | parseLinks | parseBreaks"></p>
44-
@if (descriptionExpandable) {
45-
<div
46-
class="read-more"
47-
(click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
48-
>
49-
{{ readFullDescription ? "cкрыть" : "подробнее" }}
50-
</div>
51-
}
52-
</div>
53-
}
54-
</div>
39+
<app-course-about [description]="courseDetail()!.description"></app-course-about>
5540
</div>
41+
}
5642
</div>
5743
</section>
5844

‎projects/social_platform/src/app/office/courses/detail/info/info.component.scss‎

Lines changed: 5 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,12 @@
4040

4141
&__details {
4242
display: grid;
43-
grid-template-columns: 2fr 5fr 3fr;
43+
grid-template-columns: 1fr;
4444
grid-gap: 20px;
45+
46+
@include responsive.apply-desktop {
47+
grid-template-columns: 2fr 5fr 3fr;
48+
}
4549
}
4650

4751
&__progress {
@@ -92,75 +96,6 @@
9296
}
9397
}
9498

95-
.about {
96-
padding: 24px;
97-
background-color: var(--light-white);
98-
border-radius: var(--rounded-lg);
99-
100-
&__head {
101-
display: flex;
102-
align-items: center;
103-
justify-content: space-between;
104-
margin-bottom: 8px;
105-
border-bottom: 0.5px solid var(--accent);
106-
107-
&--icon {
108-
color: var(--accent);
109-
}
110-
}
111-
112-
&__title {
113-
margin-bottom: 8px;
114-
color: var(--accent);
115-
}
116-
117-
/* stylelint-disable value-no-vendor-prefix */
118-
&__text {
119-
p {
120-
display: -webkit-box;
121-
overflow: hidden;
122-
color: var(--black);
123-
text-overflow: ellipsis;
124-
-webkit-box-orient: vertical;
125-
-webkit-line-clamp: 5;
126-
transition: all 0.7s ease-in-out;
127-
128-
&.expanded {
129-
-webkit-line-clamp: unset;
130-
}
131-
}
132-
133-
::ng-deep a {
134-
color: var(--accent);
135-
text-decoration: underline;
136-
text-decoration-color: transparent;
137-
text-underline-offset: 3px;
138-
transition: text-decoration-color 0.2s;
139-
140-
&:hover {
141-
text-decoration-color: var(--accent);
142-
}
143-
}
144-
}
145-
/* stylelint-enable value-no-vendor-prefix */
146-
147-
&__read-full {
148-
margin-top: 8px;
149-
color: var(--accent);
150-
cursor: pointer;
151-
}
152-
}
153-
154-
.read-more {
155-
margin-top: 8px;
156-
color: var(--accent);
157-
cursor: pointer;
158-
transition: background-color 0.2s;
159-
160-
&:hover {
161-
color: var(--accent-dark);
162-
}
163-
}
16499

165100
.cancel {
166101
display: flex;

0 commit comments

Comments
 (0)