Skip to content

Commit 366dd45

Browse files
AwakichAwakich
authored
Merge pull request #265 from PROCOLLAB-github/courses-program-mobile
add mobile version of courses & programs list pages
2 parents a3b0ac4 + 74da4c1 commit 366dd45

27 files changed

Lines changed: 261 additions & 151 deletions

‎.eslintrc.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
"rules": {
1515
"no-useless-constructor": "off",
1616
"@typescript-eslint/no-empty-function": "off",
17-
"dot-notation": "off"
17+
"dot-notation": "off",
18+
"@typescript-eslint/no-explicit-any": "warn",
19+
"@typescript-eslint/no-unused-vars": "warn",
20+
"@typescript-eslint/no-unused-expressions": "warn"
1821
}
1922
}

‎projects/social_platform/src/app/office/chat/chat.component.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.page {
2+
margin-top: 30px;
3+
24
&__bar {
35
margin-bottom: 20px;
46
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<app-back namespace="курсы" path="/office/program/all"></app-back>
55

66
<div class="profile__info">
7-
<form class="page__search" [formGroup]="searchForm">
7+
<form class="profile__search" [formGroup]="searchForm">
88
<app-search formControlName="search"></app-search>
99
</form>
1010

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

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,42 @@
22
@use "styles/responsive";
33

44
.profile {
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
padding-bottom: 100px;
9+
margin-top: 30px;
10+
11+
@include responsive.apply-desktop {
12+
display: block;
13+
}
14+
515
&__info {
616
display: grid;
7-
grid-template-columns: 8fr 2fr;
817
column-gap: 20px;
18+
19+
@include responsive.apply-desktop {
20+
grid-template-columns: 8fr 2fr;
21+
}
22+
}
23+
24+
&__search {
25+
margin-bottom: 24px;
26+
}
27+
28+
app-back {
29+
display: none;
30+
31+
@include responsive.apply-desktop {
32+
display: block;
33+
}
34+
}
35+
36+
app-soon-card {
37+
display: none;
38+
39+
@include responsive.apply-desktop {
40+
display: block;
41+
}
942
}
1043
}

‎projects/social_platform/src/app/office/courses/list/list.component.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
.courses {
2-
margin-top: 20px;
1+
@use "styles/responsive";
32

3+
.courses {
44
&__list {
55
display: grid;
6-
grid-template-columns: 4fr 4fr;
6+
grid-template-columns: 1fr;
77
grid-gap: 20px;
8+
9+
@include responsive.apply-desktop {
10+
grid-template-columns: 4fr 4fr;
11+
}
812
}
913
}

‎projects/social_platform/src/app/office/features/nav/nav.component.html‎

Lines changed: 58 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22

33
<div class="nav-bar">
44
<div class="nav-bar__inner">
5-
<h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
65
<div class="nav-bar__toggle">
76
<i
87
appIcon
8+
[ngStyle]="{ color: mobileMenuOpen ? 'var(--dark-grey)' : 'var(--light-white)' }"
99
[icon]="mobileMenuOpen ? 'menu-cross' : 'menu-burger'"
10-
appSquare="40"
10+
appSquare="24"
1111
(click)="mobileMenuOpen = !mobileMenuOpen"
12+
class="nav-bar__icon"
1213
>
1314
</i>
1415
@if (((notificationService.hasNotifications | async) || hasInvites) && !mobileMenuOpen) {
@@ -19,9 +20,6 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
1920
@if (mobileMenuOpen) {
2021
<div class="nav-bar__mobile-menu">
2122
<div class="nav-bar__top">
22-
<a class="nav-bar__mobile-logo" href="https://procollab.ru/" target="_blank">
23-
<img src="/assets/images/shared/logo.svg" alt="procollab" width="125px" />
24-
</a>
2523
<div
2624
class="nav-bar__notifications-toggle"
2725
[class.nav-bar__notifications-toggle--active]="notificationsOpen"
@@ -34,9 +32,17 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
3432
appWidth="23"
3533
appHeight="21"
3634
appViewBox="0 0 23 21"
35+
class="nav-bar__icon"
3736
></i>
3837

39-
<i appIcon icon="bell" appWidth="20" appHeight="22" appViewBox="0 0 20 22"></i>
38+
<i
39+
appIcon
40+
icon="bell"
41+
appWidth="20"
42+
appHeight="22"
43+
appViewBox="0 0 20 22"
44+
class="nav-bar__icon"
45+
></i>
4046
@if ((notificationService.hasNotifications | async) || hasInvites) {
4147
<div class="attention"></div>
4248
}
@@ -47,50 +53,75 @@ <h1 class="text-heading-1 nav-bar__title">{{ title }}</h1>
4753
<ul class="nav__list">
4854
<a class="nav__link" routerLink="feed" routerLinkActive="nav__link--active">
4955
<li class="text-body-14 nav__item">
50-
<i appIcon icon="feed" appSquare="24" appViewBox="0 0 24 20"></i>
51-
Новости
56+
<i appIcon icon="feed" appSquare="24" appViewBox="0 0 24 20" class="nav-bar__icon"></i>
57+
новости
5258
</li>
5359
</a>
5460
<a class="nav__link" routerLink="projects" routerLinkActive="nav__link--active">
5561
<li class="text-body-14 nav__item">
56-
<i appIcon icon="projects-filled" appSquare="24" appViewBox="0 0 24 20"></i>
57-
Проекты
62+
<i
63+
appIcon
64+
icon="projects"
65+
appSquare="24"
66+
appViewBox="0 0 24 20"
67+
class="nav-bar__icon"
68+
></i>
69+
проекты
5870
</li>
5971
</a>
60-
<a class="nav__link" routerLink="program/list" routerLinkActive="nav__link--active">
72+
<a class="nav__link" routerLink="members" routerLinkActive="nav__link--active">
6173
<li class="text-body-14 nav__item">
62-
<i appIcon icon="program" appSquare="24" appViewBox="0 0 24 16"></i>
63-
Программы
74+
<i
75+
appIcon
76+
icon="people-bold"
77+
appSquare="24"
78+
appViewBox="0 0 24 18"
79+
class="nav-bar__icon"
80+
></i>
81+
участники
6482
</li>
6583
</a>
66-
<a class="nav__link" routerLink="members" routerLinkActive="nav__link--active">
84+
<a class="nav__link" routerLink="program" routerLinkActive="nav__link--active">
6785
<li class="text-body-14 nav__item">
68-
<i appIcon icon="people-bold" appSquare="24" appViewBox="0 0 24 18"></i>
69-
Участники
86+
<i
87+
appIcon
88+
icon="program"
89+
appSquare="24"
90+
appViewBox="0 0 24 16"
91+
class="nav-bar__icon"
92+
></i>
93+
программы
7094
</li>
7195
</a>
72-
<a class="nav__link" routerLink="mentors" routerLinkActive="nav__link--active">
96+
<a class="nav__link" routerLink="courses" routerLinkActive="nav__link--active">
7397
<li class="text-body-14 nav__item">
74-
<i appIcon icon="two-people" appSquare="24" appViewBox="0 0 28 20"></i>
75-
Эксперты
98+
<i
99+
appIcon
100+
icon="trajectories"
101+
appSquare="24"
102+
appViewBox="0 0 28 20"
103+
class="nav-bar__icon"
104+
></i>
105+
курсы
76106
</li>
77107
</a>
78108
<a class="nav__link" routerLink="vacancies" routerLinkActive="nav__link--active">
79109
<li class="text-body-14 nav__item">
80-
<i appIcon icon="search-sidebar" appSquare="24" appViewBox="0 0 28 20"></i>
81-
Вакансии
110+
<i
111+
appIcon
112+
icon="search-sidebar"
113+
appSquare="24"
114+
appViewBox="0 0 28 20"
115+
class="nav-bar__icon"
116+
></i>
117+
вакансии
82118
</li>
83119
</a>
84-
<div class="text-body-14 pro-item" (click)="openSkills()" afterNavItems>
85-
<div class="pro-item__name">
86-
<i appIcon icon="trajectories" appSquare="24"></i> <span> Траектории </span>
87-
</div>
88-
</div>
89120
</ul>
90121
</nav>
91122
} @else {
92123
<div>
93-
<h3 class="text-bold-body-16 notifications__title">Уведомления</h3>
124+
<h3 class="text-bold-body-16 notifications__title">уведомления</h3>
94125
<ul class="notifications__invites">
95126
@for (invite of invites; track invite.id) {
96127
<li class="notifications__invite">
@@ -103,8 +134,6 @@ <h3 class="text-bold-body-16 notifications__title">Уведомления</h3>
103134
}
104135
</ul>
105136
</div>
106-
} @if (authService.profile | async; as user) {
107-
<app-profile-info class="nav-bar__profile" [user]="user"></app-profile-info>
108137
}
109138
</div>
110139
}

‎projects/social_platform/src/app/office/features/nav/nav.component.scss‎

Lines changed: 5 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55

66
.nav-bar {
77
display: block;
8-
padding: 25px 0 10px;
9-
background-color: var(--light-gray);
108

119
@include responsive.apply-desktop {
1210
display: none;
@@ -18,19 +16,21 @@
1816
display: flex;
1917
justify-content: space-between;
2018
max-width: responsive.$container-md;
21-
padding: 0 15px;
2219
margin: 0 auto;
2320

2421
@include responsive.apply-desktop {
2522
padding: 0;
2623
}
2724
}
2825

26+
&__icon {
27+
color: var(--dark-grey);
28+
}
29+
2930
&__top {
3031
display: flex;
3132
align-items: center;
32-
justify-content: space-between;
33-
padding-right: 50px;
33+
justify-content: flex-end;
3434
margin-bottom: 40px;
3535
}
3636

@@ -42,7 +42,6 @@
4242
justify-content: center;
4343
width: 60px;
4444
height: 40px;
45-
color: var(--black);
4645
cursor: pointer;
4746
border-radius: var(--rounded-sm);
4847

@@ -73,16 +72,6 @@
7372
}
7473
}
7574

76-
&__title {
77-
color: var(--black);
78-
79-
@include typography.heading-3;
80-
81-
@include responsive.apply-desktop {
82-
@include typography.heading-1;
83-
}
84-
}
85-
8675
&__mobile-menu {
8776
position: fixed;
8877
top: 0;
@@ -131,35 +120,3 @@
131120
background-color: var(--red);
132121
border-radius: 50%;
133122
}
134-
135-
.pro-item {
136-
display: flex;
137-
gap: 10px;
138-
align-items: center;
139-
justify-content: space-between;
140-
margin-right: 20px;
141-
color: var(--dark-grey);
142-
cursor: pointer;
143-
transition: color 0.2s;
144-
145-
&:hover {
146-
color: var(--black);
147-
}
148-
149-
&__name {
150-
display: flex;
151-
align-items: center;
152-
153-
i {
154-
margin-right: 12px;
155-
}
156-
}
157-
158-
&__badge {
159-
padding: 2px 10px;
160-
margin-left: auto;
161-
color: var(--white);
162-
background-color: var(--accent);
163-
border-radius: 12px;
164-
}
165-
}

‎projects/social_platform/src/app/office/features/nav/nav.component.ts‎

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

33
import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from "@angular/core";
4-
import { NavService } from "@services/nav.service";
54
import { NavigationStart, Router, RouterLink, RouterLinkActive } from "@angular/router";
65
import { noop, Subscription } from "rxjs";
76
import { NotificationService } from "@services/notification.service";
87
import { Invite } from "@models/invite.model";
98
import { AuthService } from "@auth/services";
109
import { InviteService } from "@services/invite.service";
11-
import { AsyncPipe } from "@angular/common";
10+
import { AsyncPipe, CommonModule } from "@angular/common";
1211
import { IconComponent } from "@ui/components";
1312
import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
1413

@@ -47,6 +46,7 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
4746
styleUrl: "./nav.component.scss",
4847
standalone: true,
4948
imports: [
49+
CommonModule,
5050
IconComponent,
5151
RouterLink,
5252
RouterLinkActive,
@@ -57,12 +57,10 @@ import { InviteManageCardComponent, ProfileInfoComponent } from "@uilib";
5757
})
5858
export class NavComponent implements OnInit, OnDestroy {
5959
constructor(
60-
public readonly navService: NavService,
6160
private readonly router: Router,
6261
public readonly notificationService: NotificationService,
6362
private readonly inviteService: InviteService,
64-
public readonly authService: AuthService,
65-
private readonly cdref: ChangeDetectorRef
63+
public readonly authService: AuthService
6664
) {}
6765

6866
ngOnInit(): void {
@@ -73,14 +71,6 @@ export class NavComponent implements OnInit, OnDestroy {
7371
}
7472
});
7573
routerEvents$ && this.subscriptions$.push(routerEvents$);
76-
77-
// Подписка на изменения заголовка страницы
78-
const title$ = this.navService.navTitle.subscribe(title => {
79-
this.title = title;
80-
this.cdref.detectChanges();
81-
});
82-
83-
title$ && this.subscriptions$.push(title$);
8474
}
8575

8676
ngOnDestroy(): void {
@@ -92,7 +82,6 @@ export class NavComponent implements OnInit, OnDestroy {
9282
subscriptions$: Subscription[] = [];
9383
mobileMenuOpen = false;
9484
notificationsOpen = false;
95-
title = "";
9685

9786
/**
9887
* Проверка наличия непринятых приглашений

0 commit comments

Comments
 (0)