From 30ce8326ad0ba9fe45b5a31c63486f6cffc837a9 Mon Sep 17 00:00:00 2001 From: Awakich Date: Tue, 7 Apr 2026 16:52:06 +0300 Subject: [PATCH 01/10] add new detail pages for courses & program --- .../detail/course-detail.component.html | 93 ++++++--- .../detail/course-detail.component.scss | 36 +++- .../courses/detail/course-detail.component.ts | 23 ++- .../courses/detail/course-detail.routes.ts | 4 +- .../courses/detail/info/info.component.html | 24 +-- .../courses/detail/info/info.component.scss | 75 +------ .../courses/detail/info/info.component.ts | 53 +---- .../course-about/course-about.component.html | 18 ++ .../course-about/course-about.component.scss | 73 +++++++ .../course-about/course-about.component.ts | 42 ++++ .../course-module-card.component.scss | 8 +- .../features/detail/detail.component.html | 189 +++++++++++------- .../features/detail/detail.component.scss | 69 ++++++- .../features/detail/detail.component.ts | 32 ++- .../office/features/nav/nav.component.html | 3 - .../program-links.component.html | 26 +++ .../program-links.component.scss | 60 ++++++ .../program-links/program-links.component.ts | 19 ++ .../program/detail/main/main.component.html | 70 ++----- .../program/detail/main/main.component.scss | 42 +--- .../program/detail/main/main.component.ts | 24 ++- .../components/button/button.component.scss | 2 +- .../ui/components/modal/modal.component.html | 2 +- .../ui/components/modal/modal.component.scss | 4 + .../ui/components/modal/modal.component.ts | 3 + 25 files changed, 645 insertions(+), 349 deletions(-) create mode 100644 projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.html create mode 100644 projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss create mode 100644 projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.ts create mode 100644 projects/social_platform/src/app/office/features/program-links/program-links.component.html create mode 100644 projects/social_platform/src/app/office/features/program-links/program-links.component.scss create mode 100644 projects/social_platform/src/app/office/features/program-links/program-links.component.ts diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.html b/projects/social_platform/src/app/office/courses/detail/course-detail.component.html index e874a8146..da713b6ea 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.html +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.component.html @@ -4,44 +4,75 @@
@if(course()) {
- cover - -
- - @if (!isTaskDetail()) { -

{{ course()!.title }}

- } +
+ cover +
+ + @if (!isTaskDetail()) { @if (appWidth > 920) { +

{{ course()!.title }}

+ } } +
-
-
-
- {{ isTaskDetail() ? "назад к модулю" : "назад" }} +
+
+ @if (appWidth < 920) { + + аналитика + + + + о курсе + + } - вернуться в программу + {{ isTaskDetail() ? "назад к модулю" : "назад" }} + + вернуться в программу +
+ + + + }
diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss b/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss index 5383399fb..8b1384171 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss @@ -10,6 +10,11 @@ $detail-bar-mb: 12px; height: 100%; max-height: 100%; padding-top: 20px; + margin: 0px 20px; + + @include responsive.apply-desktop { + margin: 0; + } &__body { flex-grow: 1; @@ -25,12 +30,16 @@ $detail-bar-mb: 12px; padding: 0; border: none; border-radius: $body-slide; + margin-bottom: 20px; &__cover { position: relative; - width: 100%; height: 136px; - border-radius: 15px 15px 0 0; + border-radius: 15px; + + @include responsive.apply-desktop { + border-radius: 15px 15px 0 0; + } img { position: absolute; @@ -60,6 +69,7 @@ $detail-bar-mb: 12px; align-items: center; cursor: pointer; border-radius: 50%; + transform: translate(-50%, 30%); &--program { bottom: 15px; @@ -102,13 +112,29 @@ $detail-bar-mb: 12px; &__actions { display: grid; grid-template-columns: 1fr 1fr; - gap: 180px; + gap: 12px; align-items: center; - padding: 24px 0 30px; + padding: 24px 10px 0; + + @include responsive.apply-desktop { + gap: 180px; + padding: 24px 0 30px; + } + + &--end { + justify-self: end; + } + + &--full { + grid-column: 1 / -1; + + @include responsive.apply-desktop { + grid-column: auto; + } + } &--disabled { cursor: not-allowed; - opacity: 0.5; } } } diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts b/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts index b66e3a03b..a1057f719 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts @@ -1,13 +1,16 @@ /** @format */ import { CommonModule } from "@angular/common"; -import { Component, DestroyRef, inject, signal, OnInit } from "@angular/core"; +import { Component, DestroyRef, HostListener, inject, signal, OnInit } from "@angular/core"; import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from "@angular/router"; import { filter, map, tap } from "rxjs"; 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 { ModalComponent } from "@ui/components/modal/modal.component"; +import { CourseAboutComponent } from "@office/courses/shared/course-about/course-about.component"; /** * Компонент детального просмотра траектории @@ -17,7 +20,15 @@ import { CourseDetail, CourseStructure } from "@office/models/courses.model"; @Component({ selector: "app-course-detail", standalone: true, - imports: [CommonModule, RouterOutlet, AvatarComponent, ButtonComponent], + imports: [ + CommonModule, + RouterOutlet, + AvatarComponent, + ButtonComponent, + IconComponent, + ModalComponent, + CourseAboutComponent, + ], templateUrl: "./course-detail.component.html", styleUrl: "./course-detail.component.scss", }) @@ -26,8 +37,16 @@ export class CourseDetailComponent implements OnInit { private readonly router = inject(Router); private readonly destroyRef = inject(DestroyRef); + appWidth = window.innerWidth; + + @HostListener("window:resize") + onResize() { + this.appWidth = window.innerWidth; + } + protected readonly isTaskDetail = signal(false); protected readonly isDisabled = signal(false); + isAboutModalOpen = false; protected readonly courseModules = signal([]); protected readonly course = signal(undefined); diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.routes.ts b/projects/social_platform/src/app/office/courses/detail/course-detail.routes.ts index 8b168483c..5550d2854 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.routes.ts +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.routes.ts @@ -1,9 +1,9 @@ /** @format */ import type { Routes } from "@angular/router"; -import { TrajectoryInfoComponent } from "./info/info.component"; import { CourseDetailComponent } from "./course-detail.component"; import { CoursesDetailResolver } from "./course-detail.resolver"; +import { CourseInfoComponent } from "./info/info.component"; export const COURSE_DETAIL_ROUTES: Routes = [ { @@ -16,7 +16,7 @@ export const COURSE_DETAIL_ROUTES: Routes = [ children: [ { path: "", - component: TrajectoryInfoComponent, + component: CourseInfoComponent, }, { path: "lesson", diff --git a/projects/social_platform/src/app/office/courses/detail/info/info.component.html b/projects/social_platform/src/app/office/courses/detail/info/info.component.html index 1902dec97..2b6776ff7 100644 --- a/projects/social_platform/src/app/office/courses/detail/info/info.component.html +++ b/projects/social_platform/src/app/office/courses/detail/info/info.component.html @@ -4,6 +4,7 @@
+ @if (appWidth > 920) {
+ }
+ @if (appWidth > 920) {
-
-
-

о курсе

- -
- @if (courseDetail()!.description) { -
-

- @if (descriptionExpandable) { -
- {{ readFullDescription ? "cкрыть" : "подробнее" }} -
- } -
- } -
+
+ }
diff --git a/projects/social_platform/src/app/office/courses/detail/info/info.component.scss b/projects/social_platform/src/app/office/courses/detail/info/info.component.scss index fa96d9440..2ab066532 100644 --- a/projects/social_platform/src/app/office/courses/detail/info/info.component.scss +++ b/projects/social_platform/src/app/office/courses/detail/info/info.component.scss @@ -40,8 +40,12 @@ &__details { display: grid; - grid-template-columns: 2fr 5fr 3fr; + grid-template-columns: 1fr; grid-gap: 20px; + + @include responsive.apply-desktop { + grid-template-columns: 2fr 5fr 3fr; + } } &__progress { @@ -92,75 +96,6 @@ } } -.about { - padding: 24px; - background-color: var(--light-white); - border-radius: var(--rounded-lg); - - &__head { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 8px; - border-bottom: 0.5px solid var(--accent); - - &--icon { - color: var(--accent); - } - } - - &__title { - margin-bottom: 8px; - color: var(--accent); - } - - /* stylelint-disable value-no-vendor-prefix */ - &__text { - p { - display: -webkit-box; - overflow: hidden; - color: var(--black); - text-overflow: ellipsis; - -webkit-box-orient: vertical; - -webkit-line-clamp: 5; - transition: all 0.7s ease-in-out; - - &.expanded { - -webkit-line-clamp: unset; - } - } - - ::ng-deep a { - color: var(--accent); - text-decoration: underline; - text-decoration-color: transparent; - text-underline-offset: 3px; - transition: text-decoration-color 0.2s; - - &:hover { - text-decoration-color: var(--accent); - } - } - } - /* stylelint-enable value-no-vendor-prefix */ - - &__read-full { - margin-top: 8px; - color: var(--accent); - cursor: pointer; - } -} - -.read-more { - margin-top: 8px; - color: var(--accent); - cursor: pointer; - transition: background-color 0.2s; - - &:hover { - color: var(--accent-dark); - } -} .cancel { display: flex; diff --git a/projects/social_platform/src/app/office/courses/detail/info/info.component.ts b/projects/social_platform/src/app/office/courses/detail/info/info.component.ts index 5e15b937d..40da88b16 100644 --- a/projects/social_platform/src/app/office/courses/detail/info/info.component.ts +++ b/projects/social_platform/src/app/office/courses/detail/info/info.component.ts @@ -1,20 +1,9 @@ /** @format */ -import { - AfterViewInit, - ChangeDetectorRef, - Component, - DestroyRef, - ElementRef, - inject, - OnInit, - signal, - ViewChild, -} from "@angular/core"; +import { Component, DestroyRef, HostListener, inject, OnInit, signal } from "@angular/core"; import { ActivatedRoute, RouterModule } from "@angular/router"; -import { ParseBreaksPipe, ParseLinksPipe } from "@corelib"; import { IconComponent } from "@uilib"; -import { expandElement } from "@utils/expand-element"; +import { CourseAboutComponent } from "@office/courses/shared/course-about/course-about.component"; import { map } from "rxjs"; import { CommonModule } from "@angular/common"; import { SoonCardComponent } from "@office/shared/soon-card/soon-card.component"; @@ -40,25 +29,27 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; imports: [ IconComponent, RouterModule, - ParseBreaksPipe, - ParseLinksPipe, CommonModule, SoonCardComponent, ModalComponent, ButtonComponent, CourseModuleCardComponent, + CourseAboutComponent, ], templateUrl: "./info.component.html", styleUrl: "./info.component.scss", }) -export class TrajectoryInfoComponent implements OnInit, AfterViewInit { - @ViewChild("descEl") descEl?: ElementRef; +export class CourseInfoComponent implements OnInit { + appWidth = window.innerWidth; + + @HostListener("window:resize") + onResize() { + this.appWidth = window.innerWidth; + } private readonly route = inject(ActivatedRoute); private readonly destroyRef = inject(DestroyRef); - private readonly cdRef = inject(ChangeDetectorRef); - protected readonly courseStructure = signal(undefined); protected readonly courseDetail = signal(undefined); protected readonly isCompleteModule = signal(false); @@ -100,28 +91,4 @@ export class TrajectoryInfoComponent implements OnInit, AfterViewInit { } }); } - - protected descriptionExpandable?: boolean; - protected readFullDescription!: boolean; - - /** - * Проверка возможности расширения описания после инициализации представления - */ - ngAfterViewInit(): void { - const descElement = this.descEl?.nativeElement; - this.descriptionExpandable = descElement?.clientHeight < descElement?.scrollHeight; - - this.cdRef.detectChanges(); - } - - /** - * Переключение развернутого/свернутого состояния описания - * @param elem - HTML элемент описания - * @param expandedClass - CSS класс для развернутого состояния - * @param isExpanded - текущее состояние (развернуто/свернуто) - */ - onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void { - expandElement(elem, expandedClass, isExpanded); - this.readFullDescription = !isExpanded; - } } diff --git a/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.html b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.html new file mode 100644 index 000000000..2ec404736 --- /dev/null +++ b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.html @@ -0,0 +1,18 @@ + + +
+
+

о курсе

+ +
+ @if (description) { +
+

+ @if (descriptionExpandable) { +
+ {{ readFullDescription ? "cкрыть" : "подробнее" }} +
+ } +
+ } +
diff --git a/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss new file mode 100644 index 000000000..a4d1d7a0f --- /dev/null +++ b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss @@ -0,0 +1,73 @@ +/** @format */ + +@use "styles/responsive"; + +.about { + padding: 0px; + background-color: transparent; + border-radius: 0px; + + @include responsive.apply-desktop { + padding: 24px; + background-color: var(--light-white); + border-radius: var(--rounded-lg); + } + + &__head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + border-bottom: 0.5px solid var(--accent); + + &--icon { + color: var(--accent); + } + } + + &__title { + margin-bottom: 8px; + color: var(--accent); + } + + /* stylelint-disable value-no-vendor-prefix */ + &__text { + p { + display: -webkit-box; + overflow: hidden; + color: var(--black); + text-overflow: ellipsis; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + transition: all 0.7s ease-in-out; + + &.expanded { + -webkit-line-clamp: unset; + } + } + + ::ng-deep a { + color: var(--accent); + text-decoration: underline; + text-decoration-color: transparent; + text-underline-offset: 3px; + transition: text-decoration-color 0.2s; + + &:hover { + text-decoration-color: var(--accent); + } + } + } + /* stylelint-enable value-no-vendor-prefix */ +} + +.read-more { + margin-top: 8px; + color: var(--accent); + cursor: pointer; + transition: background-color 0.2s; + + &:hover { + color: var(--accent-dark); + } +} diff --git a/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.ts b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.ts new file mode 100644 index 000000000..685fa33d9 --- /dev/null +++ b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.ts @@ -0,0 +1,42 @@ +/** @format */ + +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + inject, + Input, + ViewChild, +} from "@angular/core"; +import { IconComponent } from "@uilib"; +import { ParseBreaksPipe, ParseLinksPipe } from "@corelib"; +import { expandElement } from "@utils/expand-element"; + +@Component({ + selector: "app-course-about", + templateUrl: "./course-about.component.html", + styleUrl: "./course-about.component.scss", + standalone: true, + imports: [IconComponent, ParseBreaksPipe, ParseLinksPipe], +}) +export class CourseAboutComponent implements AfterViewInit { + @Input({ required: true }) description!: string; + @ViewChild("descEl") descEl?: ElementRef; + + private readonly cdRef = inject(ChangeDetectorRef); + + descriptionExpandable = false; + readFullDescription = false; + + ngAfterViewInit(): void { + const el = this.descEl?.nativeElement; + this.descriptionExpandable = el?.clientHeight < el?.scrollHeight; + this.cdRef.detectChanges(); + } + + onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void { + expandElement(elem, expandedClass, isExpanded); + this.readFullDescription = !isExpanded; + } +} diff --git a/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss b/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss index fd009a50b..d5d246422 100644 --- a/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss +++ b/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss @@ -1,3 +1,5 @@ +@use "styles/responsive"; + .skill-card { display: flex; align-items: center; @@ -45,7 +47,7 @@ &__expand { position: absolute; bottom: -9px; - left: 17%; + left: 7%; z-index: 10; z-index: -10; width: 300px; @@ -53,6 +55,10 @@ cursor: pointer; background-color: var(--medium-grey-for-outline); border-radius: var(--rounded-xl); + + @include responsive.apply-desktop { + left: 14%; + } i { ::ng-deep { diff --git a/projects/social_platform/src/app/office/features/detail/detail.component.html b/projects/social_platform/src/app/office/features/detail/detail.component.html index b4be4f2ed..f60482841 100644 --- a/projects/social_platform/src/app/office/features/detail/detail.component.html +++ b/projects/social_platform/src/app/office/features/detail/detail.component.html @@ -19,7 +19,13 @@ class="info__avatar" (click)="redirectDetailInfo()" [class.info__avatar--program]="listType === 'program'" - [style.width]="listType === 'project' || listType === 'profile' ? '110px' : '123px'" + [style.width]=" + appWidth < 920 + ? '90px' + : listType === 'project' || listType === 'profile' + ? '110px' + : '123px' + " > @if (chatService.userOnlineStatusCache | async; as cache) { @if (listType === 'project' || listType === 'profile') { @@ -61,65 +69,62 @@
- @if (userType() !== undefined) { @if (!isUserMember && !isUserManager) { @if - (info().name.includes("Кейс-чемпионат MIR")) { - - - зарегистрироваться - - - } @else if (info().registrationLink) { - - - зарегистрироваться - - - } @else { - - - зарегистрироваться - - - } } @if (isUserMember && !isUserManager && !isUserExpert) { - - {{ isProjectAssigned ? "вы подали проект" : "создать заявку" }} - - - } @if ((isUserManager || isUserExpert) && isUserMember) { - + @if (userType() !== undefined) { +
+ @if (!isUserMember && !isUserManager) { @if (info().name.includes("Кейс-чемпионат MIR")) + { + + + зарегистрироваться + + + } @else if (info().registrationLink) { + + + зарегистрироваться + + + } @else { + + + зарегистрироваться + + + } } @if (isUserMember && !isUserManager && !isUserExpert) { - оценка проектов + {{ isProjectAssigned ? "вы подали проект" : "создать заявку" }} + - - } + } @if ((isUserManager || isUserExpert) && isUserMember) { + + + оценка проектов + + + } +
- + + @if (appWidth > 920) { {{ info().name.includes("Технолидеры Будущего") ? "Каталог лучших стартапов 2022/23" @@ -127,7 +132,7 @@ ? "аналитика" : "положение" }} - @if (isUserManager) { + } @if (isUserManager && appWidth > 920) { } @else { - + } + @if (appWidth > 920) {
- - @if (isUserManager || isUserExpert) { + } @if (isUserManager || isUserExpert) { проекты-участники - } @else { + } @else { @if (appWidth > 920) { узнать подробнее + } @else { + + + + } } @if (appWidth < 920) { + + материалы + } @if (isUserManager || isUserExpert) { участники } @else { @if (info().courses?.length) { - - - перейти в курс + + + {{ appWidth > 920 ? "перейти в курс" : "курс" }} } @else { - + @@ -251,6 +283,30 @@ + + + + + + + + @@ -273,7 +329,6 @@ } @if (!isInProject) { @if (profile) { @if (+profile.id === +info().id) { > } @if (+profile.id === +info().id) { ([]); listType: "project" | "program" | "profile" = "project"; + appWidth = window.innerWidth; + + @HostListener("window:resize") + onResize() { + this.appWidth = window.innerWidth; + } + // Переменная для подсказок isTooltipVisible = false; @@ -128,6 +145,19 @@ export class DeatilComponent implements OnInit, OnDestroy { openSupport = false; // Флаг модального окна поддержки leaderLeaveModal = false; // Флаг модального окна предупреждения лидера isDelayModalOpen = false; + isContactsModalOpen = false; + isMaterialsModalOpen = false; + + get contactLinks(): { label: string; url: string }[] { + return (this.info()?.links ?? []).map((link: string) => ({ label: link, url: link })); + } + + get materialLinks(): { label: string; url: string }[] { + return (this.info()?.materials ?? []).map((m: { title: string; url: string }) => ({ + label: m.title, + url: m.url, + })); + } // Переменные для работы с подтверждением навыков showApproveSkillModal = false; diff --git a/projects/social_platform/src/app/office/features/nav/nav.component.html b/projects/social_platform/src/app/office/features/nav/nav.component.html index 7ded39491..5d0c22b4e 100644 --- a/projects/social_platform/src/app/office/features/nav/nav.component.html +++ b/projects/social_platform/src/app/office/features/nav/nav.component.html @@ -12,9 +12,6 @@ class="nav-bar__icon" > - @if (((notificationService.hasNotifications | async) || hasInvites) && !mobileMenuOpen) { -
- } @if (mobileMenuOpen) { diff --git a/projects/social_platform/src/app/office/features/program-links/program-links.component.html b/projects/social_platform/src/app/office/features/program-links/program-links.component.html new file mode 100644 index 000000000..4ff733576 --- /dev/null +++ b/projects/social_platform/src/app/office/features/program-links/program-links.component.html @@ -0,0 +1,26 @@ + + +
+
+

{{ title }}

+ +
+ @if (links?.length) { + + } +
diff --git a/projects/social_platform/src/app/office/features/program-links/program-links.component.scss b/projects/social_platform/src/app/office/features/program-links/program-links.component.scss new file mode 100644 index 000000000..dfc8a3af4 --- /dev/null +++ b/projects/social_platform/src/app/office/features/program-links/program-links.component.scss @@ -0,0 +1,60 @@ +/** @format */ + +.links { + overflow: hidden; + + &__head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + border-bottom: 0.5px solid var(--accent); + } + + &__title { + margin-bottom: 8px; + color: var(--accent); + } + + &__icon { + color: var(--accent); + } + + &__list { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__item { + cursor: pointer; + } + + &__link { + display: flex; + gap: 6px; + align-items: center; + color: var(--accent); + transition: color 0.2s; + + &:hover { + color: var(--accent-dark); + } + + i { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border: 0.5px solid var(--medium-grey-for-outline); + border-radius: var(--rounded-xxl); + } + + span { + overflow: hidden; + text-overflow: ellipsis; + } + } +} diff --git a/projects/social_platform/src/app/office/features/program-links/program-links.component.ts b/projects/social_platform/src/app/office/features/program-links/program-links.component.ts new file mode 100644 index 000000000..6fe221c0e --- /dev/null +++ b/projects/social_platform/src/app/office/features/program-links/program-links.component.ts @@ -0,0 +1,19 @@ +/** @format */ + +import { Component, Input } from "@angular/core"; +import { IconComponent } from "@uilib"; +import { UserLinksPipe } from "@core/pipes/user-links.pipe"; +import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe"; + +@Component({ + selector: "app-program-links", + templateUrl: "./program-links.component.html", + styleUrl: "./program-links.component.scss", + standalone: true, + imports: [IconComponent, UserLinksPipe, TruncatePipe], +}) +export class ProgramLinksComponent { + @Input({ required: true }) title!: string; + @Input({ required: true }) icon!: string; + @Input({ required: true }) links!: { label: string; url: string }[]; +} diff --git a/projects/social_platform/src/app/office/program/detail/main/main.component.html b/projects/social_platform/src/app/office/program/detail/main/main.component.html index 84e3dfa63..6e3c93dcf 100644 --- a/projects/social_platform/src/app/office/program/detail/main/main.component.html +++ b/projects/social_platform/src/app/office/program/detail/main/main.component.html @@ -10,6 +10,7 @@ } @else {
+ @if (appWidth > 920) {
+ }
@@ -58,61 +60,27 @@

о программе

+ @if (appWidth > 920) {
-
+ }
} diff --git a/projects/social_platform/src/app/office/program/detail/main/main.component.scss b/projects/social_platform/src/app/office/program/detail/main/main.component.scss index 8f6e3b020..a721634f7 100644 --- a/projects/social_platform/src/app/office/program/detail/main/main.component.scss +++ b/projects/social_platform/src/app/office/program/detail/main/main.component.scss @@ -65,8 +65,12 @@ &__details { display: grid; - grid-template-columns: 2fr 5fr 3fr; + grid-template-columns: 1fr; grid-gap: 20px; + + @include responsive.apply-desktop { + grid-template-columns: 2fr 5fr 3fr; + } } } @@ -140,42 +144,6 @@ } } -.links { - overflow: hidden; - - &__section { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 8px; - border-bottom: 0.5px solid var(--accent); - } - - &__icon { - color: var(--accent); - } - - &__title { - margin-bottom: 8px; - color: var(--accent); - } - - &__item { - cursor: pointer; - } - - ul { - display: flex; - flex-direction: column; - gap: 8px; - overflow: hidden; - - span { - overflow: hidden; - text-overflow: ellipsis; - } - } -} .news { &__form { diff --git a/projects/social_platform/src/app/office/program/detail/main/main.component.ts b/projects/social_platform/src/app/office/program/detail/main/main.component.ts index b7f301fc7..fabde4a54 100644 --- a/projects/social_platform/src/app/office/program/detail/main/main.component.ts +++ b/projects/social_platform/src/app/office/program/detail/main/main.component.ts @@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component, ElementRef, + HostListener, OnDestroy, OnInit, signal, @@ -26,7 +27,7 @@ import { ProgramNewsService } from "@office/program/services/program-news.servic import { FeedNews } from "@office/projects/models/project-news.model"; import { expandElement } from "@utils/expand-element"; import { ParseBreaksPipe, ParseLinksPipe } from "projects/core"; -import { UserLinksPipe } from "@core/pipes/user-links.pipe"; +import { ProgramLinksComponent } from "@office/features/program-links/program-links.component"; import { ProgramNewsCardComponent } from "../shared/news-card/news-card.component"; import { ButtonComponent, IconComponent } from "@ui/components"; import { ApiPagination } from "@models/api-pagination.model"; @@ -40,7 +41,6 @@ import { SoonCardComponent } from "@office/shared/soon-card/soon-card.component" import { NewsFormComponent } from "@office/features/news-form/news-form.component"; import { AsyncPipe } from "@angular/common"; import { AvatarComponent } from "@uilib"; -import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe"; import { NewsCardComponent } from "@office/features/news-card/news-card.component"; import { AuthService } from "@auth/services"; @@ -53,7 +53,6 @@ import { AuthService } from "@auth/services"; IconComponent, ButtonComponent, ProgramNewsCardComponent, - UserLinksPipe, AsyncPipe, ParseBreaksPipe, ParseLinksPipe, @@ -61,9 +60,7 @@ import { AuthService } from "@auth/services"; MatProgressBarModule, SoonCardComponent, NewsFormComponent, - ModalComponent, - MatProgressBarModule, - TruncatePipe, + ProgramLinksComponent, RouterModule, ], }) @@ -86,6 +83,13 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy { return this.projectAdditionalService.getErrorAssignProjectToProgramModalMessage(); } + appWidth = window.innerWidth; + + @HostListener("window:resize") + onResize() { + this.appWidth = window.innerWidth; + } + news = signal([]); totalNewsCount = signal(0); fetchLimit = signal(10); @@ -367,4 +371,12 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy { registerDateExpired!: boolean; descriptionExpandable!: boolean; readFullDescription = false; + + get contactLinks(): { label: string; url: string }[] { + return (this.program?.links ?? []).map(link => ({ label: link, url: link })); + } + + get materialLinks(): { label: string; url: string }[] { + return (this.program?.materials ?? []).map(m => ({ label: m.title, url: m.url })); + } } diff --git a/projects/social_platform/src/app/ui/components/button/button.component.scss b/projects/social_platform/src/app/ui/components/button/button.component.scss index 1b8f6b5f0..57d11961c 100644 --- a/projects/social_platform/src/app/ui/components/button/button.component.scss +++ b/projects/social_platform/src/app/ui/components/button/button.component.scss @@ -125,7 +125,7 @@ } &--small { - width: 70px; + width: 100px; padding: 4px 24px; &--icon { diff --git a/projects/social_platform/src/app/ui/components/modal/modal.component.html b/projects/social_platform/src/app/ui/components/modal/modal.component.html index 27a13b455..567450daf 100644 --- a/projects/social_platform/src/app/ui/components/modal/modal.component.html +++ b/projects/social_platform/src/app/ui/components/modal/modal.component.html @@ -3,7 +3,7 @@
{ From a78824444d062e6f76e06a3e615ee3447f1c4a9a Mon Sep 17 00:00:00 2001 From: Awakich Date: Tue, 7 Apr 2026 16:52:30 +0300 Subject: [PATCH 02/10] add styles for detail pages for courses & program --- .../detail/course-detail.component.scss | 8 +++---- .../courses/detail/info/info.component.scss | 1 - .../course-about/course-about.component.scss | 6 ++--- .../course-module-card.component.scss | 2 +- .../features/detail/detail.component.scss | 24 ++++++++++--------- .../program/detail/main/main.component.scss | 3 +-- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss b/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss index 8b1384171..87c000661 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss @@ -10,8 +10,8 @@ $detail-bar-mb: 12px; height: 100%; max-height: 100%; padding-top: 20px; - margin: 0px 20px; - + margin: 0 20px; + @include responsive.apply-desktop { margin: 0; } @@ -28,15 +28,15 @@ $detail-bar-mb: 12px; position: relative; padding: 0; + margin-bottom: 20px; border: none; border-radius: $body-slide; - margin-bottom: 20px; &__cover { position: relative; height: 136px; border-radius: 15px; - + @include responsive.apply-desktop { border-radius: 15px 15px 0 0; } diff --git a/projects/social_platform/src/app/office/courses/detail/info/info.component.scss b/projects/social_platform/src/app/office/courses/detail/info/info.component.scss index 2ab066532..2bf5aac8b 100644 --- a/projects/social_platform/src/app/office/courses/detail/info/info.component.scss +++ b/projects/social_platform/src/app/office/courses/detail/info/info.component.scss @@ -96,7 +96,6 @@ } } - .cancel { display: flex; flex-direction: column; diff --git a/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss index a4d1d7a0f..de3d620a8 100644 --- a/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss +++ b/projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss @@ -3,10 +3,10 @@ @use "styles/responsive"; .about { - padding: 0px; + padding: 0; background-color: transparent; - border-radius: 0px; - + border-radius: 0; + @include responsive.apply-desktop { padding: 24px; background-color: var(--light-white); diff --git a/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss b/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss index d5d246422..1dd2ed12f 100644 --- a/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss +++ b/projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss @@ -55,7 +55,7 @@ cursor: pointer; background-color: var(--medium-grey-for-outline); border-radius: var(--rounded-xl); - + @include responsive.apply-desktop { left: 14%; } diff --git a/projects/social_platform/src/app/office/features/detail/detail.component.scss b/projects/social_platform/src/app/office/features/detail/detail.component.scss index 4f33b30e0..87663abe6 100644 --- a/projects/social_platform/src/app/office/features/detail/detail.component.scss +++ b/projects/social_platform/src/app/office/features/detail/detail.component.scss @@ -12,8 +12,8 @@ $detail-bar-mb: 12px; height: 100%; max-height: 100%; padding-top: 20px; - margin: 0px 20px; - + margin: 0 20px; + @include responsive.apply-desktop { margin: 0; } @@ -38,7 +38,7 @@ $detail-bar-mb: 12px; position: relative; height: 63px; border-radius: 15px; - + @include responsive.apply-desktop { height: 136px; border-radius: 15px 15px 0 0; @@ -46,7 +46,7 @@ $detail-bar-mb: 12px; &--program { height: 63px; - + @include responsive.apply-desktop { height: 155px; } @@ -84,7 +84,7 @@ $detail-bar-mb: 12px; background-color: var(--white); border-radius: 50%; transform: translate(-50%, 60%); - + &--program { bottom: 15px; } @@ -128,12 +128,12 @@ $detail-bar-mb: 12px; grid-template-columns: 2fr 2fr; gap: 12px; align-items: center; - padding: 24px 10px 0px; + padding: 24px 10px 0; @include responsive.apply-desktop { grid-template-columns: 2fr 2fr 2fr 2fr 2fr; - padding: 24px 0 30px; gap: 20px; + padding: 24px 0 30px; } app-modal { @@ -150,19 +150,21 @@ $detail-bar-mb: 12px; } &__primary-action { - order: 999; grid-column: 1 / -1; + order: 999; - a, app-button { + a, + app-button { display: block; width: 100%; } @include responsive.apply-desktop { - order: 0; grid-column: auto; + order: 0; - a, app-button { + a, + app-button { display: inline-block; width: auto; } diff --git a/projects/social_platform/src/app/office/program/detail/main/main.component.scss b/projects/social_platform/src/app/office/program/detail/main/main.component.scss index a721634f7..88b8850b9 100644 --- a/projects/social_platform/src/app/office/program/detail/main/main.component.scss +++ b/projects/social_platform/src/app/office/program/detail/main/main.component.scss @@ -67,7 +67,7 @@ display: grid; grid-template-columns: 1fr; grid-gap: 20px; - + @include responsive.apply-desktop { grid-template-columns: 2fr 5fr 3fr; } @@ -144,7 +144,6 @@ } } - .news { &__form { display: block; From f0d165764a67cf206cd1ffa1ff1b66c5fb0a62c5 Mon Sep 17 00:00:00 2001 From: Awakich Date: Thu, 9 Apr 2026 13:29:41 +0300 Subject: [PATCH 03/10] add mobile version of lesson pages --- .../src/app/office/courses/courses.service.ts | 5 +- .../detail/course-detail.component.html | 59 +++-- .../detail/course-detail.component.scss | 29 ++- .../courses/detail/course-detail.component.ts | 46 +++- .../lesson/complete/complete.component.scss | 6 +- .../courses/lesson/lesson.component.html | 7 +- .../courses/lesson/lesson.component.scss | 44 +++- .../office/courses/lesson/lesson.component.ts | 41 +++- .../exclude-task/exclude-task.component.scss | 15 +- .../shared/file-task/file-task.component.scss | 34 ++- .../radio-select-task.component.scss | 11 +- .../relations-task.component.html | 57 ----- .../relations-task.component.scss | 92 ------- .../relations-task.component.spec.ts | 24 -- .../relations-task.component.ts | 230 ------------------ .../video-task/info-task.component.scss | 33 ++- .../write-task/write-task.component.html | 2 +- .../write-task/write-task.component.scss | 29 ++- .../features/detail/detail.component.html | 35 ++- .../features/detail/detail.component.ts | 2 +- 20 files changed, 315 insertions(+), 486 deletions(-) delete mode 100644 projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.html delete mode 100644 projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.scss delete mode 100644 projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.spec.ts delete mode 100644 projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.ts diff --git a/projects/social_platform/src/app/office/courses/courses.service.ts b/projects/social_platform/src/app/office/courses/courses.service.ts index 629fa14ea..4667747e8 100644 --- a/projects/social_platform/src/app/office/courses/courses.service.ts +++ b/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(null); + readonly courseStructure = signal(null); + constructor(private readonly apiService: ApiService) {} /** diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.html b/projects/social_platform/src/app/office/courses/detail/course-detail.component.html index da713b6ea..4305f7b0c 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.html +++ b/projects/social_platform/src/app/office/courses/detail/course-detail.component.html @@ -2,40 +2,57 @@
- @if(course()) { + @if (course()) {
+ @if (showCover) {
cover +
- @if (!isTaskDetail()) { @if (appWidth > 920) { -

{{ course()!.title }}

- } } + + @if (!isTaskDetail() && !isMobile) { +

+ {{ course()!.title }} +

+ }
+ }
-
- @if (appWidth < 920) { +
+ @if (showBackOnly) { + + назад + + +
+ @if (currentLesson()) { +

модуль {{ currentLesson()!.moduleOrder }}

+

урок {{ lessonOrder }}

+ } +
+ - аналитика + о курсе - + } @else { @if (showAnalyticsButton) { + аналитика + } @if (showAboutButton) { о курсе @@ -44,22 +61,24 @@

{{ course()!.title }}

{{ isTaskDetail() ? "назад к модулю" : "назад" }} + назад + + @if (showProgramButton) { вернуться в программу + вернуться в программу + + } }
diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss b/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss index 87c000661..9a5ef77ec 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.scss +++ b/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; + } +} \ No newline at end of file diff --git a/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts b/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts index a1057f719..3d3b5beee 100644 --- a/projects/social_platform/src/app/office/courses/detail/course-detail.component.ts +++ b/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([]); protected readonly course = signal(undefined); + protected readonly courseStructure = signal(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); diff --git a/projects/social_platform/src/app/office/courses/lesson/complete/complete.component.scss b/projects/social_platform/src/app/office/courses/lesson/complete/complete.component.scss index 0e2a04514..24f1eb5d1 100644 --- a/projects/social_platform/src/app/office/courses/lesson/complete/complete.component.scss +++ b/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; diff --git a/projects/social_platform/src/app/office/courses/lesson/lesson.component.html b/projects/social_platform/src/app/office/courses/lesson/lesson.component.html index 53cca9543..fdc3ea4a9 100644 --- a/projects/social_platform/src/app/office/courses/lesson/lesson.component.html +++ b/projects/social_platform/src/app/office/courses/lesson/lesson.component.html @@ -2,10 +2,13 @@ @if (lessonInfo()) {
-
+
+ @if (appWidth >= 920) {

модуль {{ lessonInfo()?.moduleOrder }}

+

урок {{ lessonOrder() }}

+ }
@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) }" >

{{ task.order }}

diff --git a/projects/social_platform/src/app/office/courses/lesson/lesson.component.scss b/projects/social_platform/src/app/office/courses/lesson/lesson.component.scss index fa3302c71..90b0b10bc 100644 --- a/projects/social_platform/src/app/office/courses/lesson/lesson.component.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/projects/social_platform/src/app/office/courses/lesson/lesson.component.ts b/projects/social_platform/src/app/office/courses/lesson/lesson.component.ts index ff9bed681..3ed1c5c1d 100644 --- a/projects/social_platform/src/app/office/courses/lesson/lesson.component.ts +++ b/projects/social_platform/src/app/office/courses/lesson/lesson.component.ts @@ -1,6 +1,14 @@ /** @format */ -import { Component, computed, DestroyRef, inject, OnInit, signal } from "@angular/core"; +import { + Component, + computed, + DestroyRef, + HostListener, + inject, + OnInit, + signal, +} from "@angular/core"; import { CommonModule } from "@angular/common"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from "@angular/router"; @@ -40,9 +48,17 @@ export class LessonComponent implements OnInit { private readonly coursesService = inject(CoursesService); private readonly snackbarService = inject(SnackbarService); + appWidth = window.innerWidth; + + @HostListener("window:resize") + onResize() { + this.appWidth = window.innerWidth; + } + protected readonly lessonInfo = signal(undefined); protected readonly isComplete = signal(false); protected readonly currentTaskId = signal(null); + protected readonly activeTaskId = signal(null); protected readonly loader = signal(false); protected readonly loading = signal(false); @@ -54,6 +70,18 @@ export class LessonComponent implements OnInit { protected readonly tasks = computed(() => this.lessonInfo()?.tasks ?? []); + protected readonly lessonOrder = computed(() => { + const lesson = this.lessonInfo(); + const structure = this.coursesService.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; + }); + protected readonly currentTask = computed(() => { const id = this.currentTaskId(); return this.tasks().find(t => t.id === id) ?? null; @@ -96,6 +124,8 @@ export class LessonComponent implements OnInit { .subscribe({ next: lessonInfo => { this.lessonInfo.set(lessonInfo); + console.log(lessonInfo); + this.coursesService.currentLesson.set(lessonInfo); // Если курс уже завершен, редирект на results if (lessonInfo.progressStatus === "completed") { @@ -117,6 +147,7 @@ export class LessonComponent implements OnInit { if (onResultsPage && !allCompleted) { // Находимся на results, но не все задания выполнены — редирект обратно this.currentTaskId.set(nextTaskId); + this.activeTaskId.set(nextTaskId); setTimeout(() => { this.loading.set(false); this.router.navigate(["./"], { relativeTo: this.route }); @@ -129,6 +160,7 @@ export class LessonComponent implements OnInit { }, 500); } else { this.currentTaskId.set(nextTaskId); + this.activeTaskId.set(nextTaskId); setTimeout(() => this.loading.set(false), 500); } }, @@ -162,8 +194,12 @@ export class LessonComponent implements OnInit { return task ? this.isDone(task) : false; }); + isClickable(task: Task): boolean { + return this.isDone(task) || task.id === this.activeTaskId(); + } + onSelectTask(task: Task) { - if (!this.isDone(task)) return; + if (!this.isClickable(task)) return; this.currentTaskId.set(task.id); this.answerBody.set(null); @@ -217,6 +253,7 @@ export class LessonComponent implements OnInit { if (nextId) { this.currentTaskId.set(nextId); + this.activeTaskId.set(nextId); this.success.set(false); this.answerBody.set(null); } else { diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss b/projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss index d393effe1..f9300d613 100644 --- a/projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss +++ b/projects/social_platform/src/app/office/courses/lesson/shared/exclude-task/exclude-task.component.scss @@ -3,8 +3,13 @@ .exclude { display: flex; - flex-direction: row; - gap: 20px; + flex-direction: column; + gap: 12px; + + @include responsive.apply-desktop { + flex-direction: row; + gap: 20px; + } // &--hasContent { // display: flex; @@ -30,10 +35,14 @@ align-self: center; width: 100%; max-width: 395px; - height: 223px; + height: 185px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + height: 223px; + } } } } diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss b/projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss index 4b6a23d3b..9e6d9abe1 100644 --- a/projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss +++ b/projects/social_platform/src/app/office/courses/lesson/shared/file-task/file-task.component.scss @@ -3,10 +3,13 @@ .file-task { display: flex; - flex-direction: row; - gap: 20px; + flex-direction: column; + gap: 12px; @include responsive.apply-desktop { + flex-direction: row; + gap: 20px; + &--hasVideo { flex-direction: row; } @@ -14,11 +17,16 @@ &__header, &__content { - min-height: 358px; - padding: 24px; + min-height: 0px; + padding: 12px; background: var(--light-white); border: 0.5px solid var(--medium-grey-for-outline); border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + min-height: 358px; + padding: 24px; + } } &__header { @@ -28,16 +36,24 @@ &__content { min-width: 333px; max-width: 350px; - padding: 12px 24px; + padding: 12px; ::ng-deep { app-upload-file { .control { - max-height: 83px; + max-height: 61px; border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + max-height: 83px; + } } } } + + @include responsive.apply-desktop { + padding: 12px 24px; + } &--success { border-color: var(--green); @@ -106,10 +122,14 @@ align-self: center; width: 100%; max-width: 395px; - height: 223px; + height: 185px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + height: 223px; + } } } diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss b/projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss index a0a4f8dac..afe99b55e 100644 --- a/projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss +++ b/projects/social_platform/src/app/office/courses/lesson/shared/radio-select-task/radio-select-task.component.scss @@ -2,8 +2,11 @@ @use "styles/responsive"; .radio { + display: flex; + flex-direction: column; + gap: 12px; + @include responsive.apply-desktop { - display: flex; flex-direction: row; gap: 20px; @@ -140,10 +143,14 @@ align-self: center; width: 100%; max-width: 395px; - height: 223px; + height: 185px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + height: 223px; + } } } } diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.html b/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.html deleted file mode 100644 index f812a3c8f..000000000 --- a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.html +++ /dev/null @@ -1,57 +0,0 @@ - - -
-

{{ data.text }}

-
-
- - -
- @for (_ of Array(data.connectLeft.length); track $index) { -
- @if (data.connectLeft[$index].text) { - {{ data.connectLeft[$index].text }} - } @else if (data.connectLeft[$index].file) { - - } -
- } -
- -
- @for (_ of Array(data.connectRight.length); track $index) { -
- @if (data.connectRight[$index].text) { - {{ data.connectRight[$index].text }} - } @else if (data.connectRight[$index].file) { - - } -
- } -
-
- @if (hint.length) { -
- } -
diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.scss b/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.scss deleted file mode 100644 index 16477a974..000000000 --- a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use "styles/typography"; -@use "styles/responsive"; - -.relations { - padding: 26px; - background-color: var(--white); - border: 1px solid var(--grey-button); - border-radius: 15px; - - &__title { - margin-bottom: 20px; - color: var(--black); - - @include typography.heading-4; - - @include responsive.apply-desktop { - margin-bottom: 26px; - - @include typography.heading-3; - } - } - - &__description { - margin-bottom: 20px; - white-space: pre-line; - - @include typography.body-14; - } - - &__wrapper { - display: flex; - flex-direction: column; - gap: 50px; - justify-content: space-between; - - @include responsive.apply-desktop { - flex-direction: row; - } - } - - &__column { - display: flex; - flex-direction: column; - flex-grow: 1; - gap: 10px; - min-width: 220px; - - &--grid { - display: grid; - - @include responsive.apply-desktop { - grid-template-columns: repeat(2, 1fr); - } - } - } - - &__item { - max-height: 500px; - padding: 10px; - overflow: hidden; - cursor: pointer; - border: 1px solid var(--grey-button); - border-radius: 10px; - - @include typography.body-14; - - @include responsive.apply-desktop { - @include typography.body-12; - } - - &--active { - border-color: var(--accent); - } - - &--success { - color: var(--green); - background-color: var(--light-green); - border-color: var(--green); - } - - &--disabled { - pointer-events: none; - opacity: 0.3; - } - } - - :host ::ng-deep &__hint p { - margin-top: 20px; - - @include typography.body-14; - } -} diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.spec.ts b/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.spec.ts deleted file mode 100644 index e2cfaff43..000000000 --- a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** @format */ - -import { ComponentFixture, TestBed } from "@angular/core/testing"; - -import { RelationsTaskComponent } from "./relations-task.component"; - -describe("RelationsTaskComponent", () => { - let component: RelationsTaskComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RelationsTaskComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(RelationsTaskComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should create", () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.ts b/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.ts deleted file mode 100644 index de13975f9..000000000 --- a/projects/social_platform/src/app/office/courses/lesson/shared/relations-task/relations-task.component.ts +++ /dev/null @@ -1,230 +0,0 @@ -/** @format */ - -import { - Component, - type OnInit, - type AfterViewInit, - type OnDestroy, - ElementRef, - ViewChild, - ViewChildren, - type QueryList, - Input, - Output, - EventEmitter, - signal, - computed, - inject, -} from "@angular/core"; -import { CommonModule } from "@angular/common"; -import { DomSanitizer } from "@angular/platform-browser"; -import { fromEvent, type Subscription } from "rxjs"; -import { debounceTime } from "rxjs/operators"; -import { ParseBreaksPipe, ParseLinksPipe } from "@corelib"; -import { - ConnectQuestion, - ConnectQuestionRequest, - ConnectQuestionResponse, -} from "projects/skills/src/models/step.model"; - -/** - * Компонент задачи на установление связей - * Позволяет пользователю соединять элементы из левого столбца с элементами правого столбца - * - * Входные параметры: - * @Input data - данные вопроса типа ConnectQuestion - * @Input hint - текст подсказки - * @Input success - флаг успешного выполнения - * @Input error - объект ошибки для сброса состояния - * - * Выходные события: - * @Output update - событие обновления с массивом связей - * - * Функциональность: - * - Отображает два столбца элементов для соединения - * - Рисует SVG линии между связанными элементами - * - Поддерживает текстовые и графические элементы - * - Автоматически перерисовывает линии при изменении размера окна - */ -@Component({ - selector: "app-relations-task", - standalone: true, - imports: [CommonModule, ParseBreaksPipe, ParseLinksPipe], - templateUrl: "./relations-task.component.html", - styleUrls: ["./relations-task.component.scss"], -}) -export class RelationsTaskComponent implements OnInit, AfterViewInit, OnDestroy { - @Input({ required: true }) data!: ConnectQuestion; // Данные вопроса - @Input() hint!: string; // Текст подсказки - @Input() success = false; // Флаг успешного выполнения - - // Сеттер для обработки ошибок и сброса состояния - @Input() - set error(error: ConnectQuestionResponse | null) { - this._error.set(error); - - if (error !== null) { - this.result.set([]); // Сбрасываем результат при ошибке - this.selectedLeftId.set(null); // Сбрасываем выбранный элемент - } - } - - get error() { - return this._error(); - } - - protected readonly Array = Array; - - _error = signal(null); - - @Output() update = new EventEmitter(); // Событие обновления связей - - // Ссылки на DOM элементы - @ViewChild("svgOverlay", { static: true }) svgOverlay!: ElementRef; - @ViewChildren("leftItem", { read: ElementRef }) leftItems!: QueryList>; - @ViewChildren("rightItem", { read: ElementRef }) rightItems!: QueryList>; - - private resizeSub!: Subscription; // Подписка на изменение размера окна - - // Состояние компонента - result = signal([]); // Массив установленных связей - resultLeft = computed(() => this.result().map(r => r.leftId)); // ID связанных левых элементов - resultRight = computed(() => this.result().map(r => r.rightId)); // ID связанных правых элементов - selectedLeftId = signal(null); // ID выбранного левого элемента - - description!: any; // Обработанное описание - sanitizer = inject(DomSanitizer); - - // Проверяет, является ли правый столбец сеткой изображений - get isImageGrid() { - return this.data.connectRight.every(itm => !!itm.file); - } - - ngOnInit() { - // Безопасно обрабатываем HTML в описании - this.description = this.sanitizer.bypassSecurityTrustHtml(this.data.description); - } - - ngAfterViewInit() { - // Подписываемся на изменение размера окна для перерисовки линий - this.resizeSub = fromEvent(window, "resize") - .pipe(debounceTime(100)) - .subscribe(() => this.drawLines()); - - // Рисуем линии после инициализации представления - setTimeout(() => this.drawLines()); - } - - ngOnDestroy() { - this.resizeSub.unsubscribe(); - } - - /** - * Обработчик выбора элемента из левого столбца - * @param id - ID выбранного элемента - */ - onSelectLeft(id: number) { - const current = this.selectedLeftId(); - - // Если элемент уже выбран, снимаем выбор - if (current === id) { - this.selectedLeftId.set(null); - return; - } - - // Если элемент уже связан, удаляем связь - const existingIndex = this.result().findIndex(r => r.leftId === id); - if (existingIndex !== -1) { - this.result.update(r => r.filter((_, i) => i !== existingIndex)); - this.drawLines(); - this.update.emit(this.result()); - } - - this.selectedLeftId.set(id); - } - - /** - * Обработчик выбора элемента из правого столбца - * Создает связь между выбранным левым и правым элементами - * @param id - ID выбранного правого элемента - */ - onSelectRight(id: number) { - const leftId = this.selectedLeftId(); - if (leftId === null) return; - - // Удаляем существующие связи для этих элементов - let newResult = this.result().filter(r => r.leftId !== leftId && r.rightId !== id); - - // Добавляем новую связь - newResult = [...newResult, { leftId, rightId: id }]; - - this.result.set(newResult); - this.selectedLeftId.set(null); - - this.drawLines(); - this.update.emit(this.result()); - } - - /** - * Удаляет все SVG линии - */ - removeLines() { - const svgEl = this.svgOverlay.nativeElement; - while (svgEl.firstChild) { - svgEl.removeChild(svgEl.firstChild); - } - } - - /** - * Рисует SVG линии между связанными элементами - * Вычисляет позиции элементов и создает линии между ними - */ - private drawLines() { - this.removeLines(); - - const svgEl = this.svgOverlay.nativeElement; - const svgRect = svgEl.getBoundingClientRect(); - - // Получаем позиции левых элементов - const leftPositions = new Map(); - this.leftItems.forEach(el => { - const id = Number(el.nativeElement.dataset["id"]); - leftPositions.set(id, el.nativeElement.getBoundingClientRect()); - }); - - // Получаем позиции правых элементов - const rightPositions = new Map(); - this.rightItems.forEach(el => { - const id = Number(el.nativeElement.dataset["id"]); - rightPositions.set(id, el.nativeElement.getBoundingClientRect()); - }); - - // Рисуем линии для каждой связи - this.result().forEach(pair => { - const leftRect = leftPositions.get(pair.leftId); - const rightRect = rightPositions.get(pair.rightId); - - if (!leftRect || !rightRect) return; - - // Вычисляем координаты линии - const x1 = leftRect.right - svgRect.left; - const y1 = leftRect.top + leftRect.height / 2 - svgRect.top; - const x2 = rightRect.left - svgRect.left; - const y2 = rightRect.top + rightRect.height / 2 - svgRect.top; - - // Создаем SVG линию - const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); - line.setAttribute("x1", x1.toString()); - line.setAttribute("y1", y1.toString()); - line.setAttribute("x2", x2.toString()); - line.setAttribute("y2", y2.toString()); - line.setAttribute("stroke", "#6B46C1"); - line.setAttribute("stroke-width", "4"); - line.setAttribute("stroke-linecap", "round"); - line.setAttribute("stroke-linejoin", "round"); - line.setAttribute("class", "connection-line"); - - svgEl.appendChild(line); - }); - } -} diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/video-task/info-task.component.scss b/projects/social_platform/src/app/office/courses/lesson/shared/video-task/info-task.component.scss index 8db8a6463..28850f53b 100644 --- a/projects/social_platform/src/app/office/courses/lesson/shared/video-task/info-task.component.scss +++ b/projects/social_platform/src/app/office/courses/lesson/shared/video-task/info-task.component.scss @@ -6,26 +6,39 @@ &__body { display: flex; flex-direction: row; - gap: 24px; + gap: 12px; min-height: 358px; - padding: 24px; + padding: 12px; background-color: var(--light-white); border: 0.5px solid var(--medium-grey-for-outline); border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + padding: 24px; + gap: 24px; + } iframe { display: block; align-self: center; width: 100%; max-width: 395px; - height: 223px; + height: 185px; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rounded-lg); + + @include responsive.apply-desktop { + height: 223px; + } } &--hasImage { - flex-direction: row-reverse; + flex-direction: column; + + @include responsive.apply-desktop { + flex-direction: row-reverse; + } } &--hasVideo { @@ -39,13 +52,21 @@ width: 100%; &--hasVideo { - flex-direction: row; + flex-direction: column; flex-grow: 1; + + @include responsive.apply-desktop { + flex-direction: row; + } } &--hasImage { - flex-direction: row-reverse; + flex-direction: column-reverse; flex-grow: 1; + + @include responsive.apply-desktop { + flex-direction: row-reverse; + } } } diff --git a/projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.html b/projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.html index d89c6bdb6..b30d261f2 100644 --- a/projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.html +++ b/projects/social_platform/src/app/office/courses/lesson/shared/write-task/write-task.component.html @@ -52,7 +52,7 @@

ответ