Skip to content

Commit 178713e

Browse files
AwakichAwakich
committed
change design of navigation for project & program page, project-card component
1 parent 2892e76 commit 178713e

18 files changed

Lines changed: 343 additions & 245 deletions

File tree

‎projects/social_platform/src/app/office/program/detail/main/main.component.html‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,12 @@
7474

7575
<!-- TODO: внести ссылку на сайт программы когда это поле будет на бэке -->
7676
@if (!program.isUserManager) {
77-
<a class="info__more" [href]="program.presentationAddress" target="_blank">
78-
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
77+
<a class="info__more">
78+
<app-button
79+
appearance="outline"
80+
[disabled]="true"
81+
size="medium"
82+
customTypographyClass="text-body-12"
7983
>узнать подробнее</app-button
8084
>
8185
</a>
@@ -88,7 +92,11 @@
8892
} @if (!program.isUserManager) {
8993
<!-- добавить информацию с ссылок или чего-то в дизайне телефон но не у каждой программы есть телефон в контактах -->
9094
<a class="info__contacts">
91-
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
95+
<app-button
96+
[disabled]="true"
97+
appearance="outline"
98+
size="medium"
99+
customTypographyClass="text-body-12"
92100
>информация с ссылок</app-button
93101
>
94102
</a>

‎projects/social_platform/src/app/office/program/list/main/main.component.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
.programs {
2-
display: flex;
3-
gap: 20px;
4-
align-items: flex-start;
2+
display: grid;
3+
grid-template-columns: 8fr 2fr;
54
justify-content: space-between;
5+
grid-gap: 20px;
66

77
&__list {
88
display: grid;
9-
grid-template-columns: 330px 330px;
10-
column-gap: 80px;
9+
grid-template-columns: 4fr 4fr;
10+
grid-gap: 20px;
1111
}
1212

1313
&__filter {
1414
display: flex;
15-
flex-basis: 18%;
1615
flex-direction: column;
1716
gap: 20px;
1817
margin-top: 14px;

‎projects/social_platform/src/app/office/program/shared/program-card/program-card.component.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616
background: var(--white);
1717
border: 0.5px solid var(--dark-grey);
1818
border-radius: 50%;
19+
flex-shrink: 0;
1920
}
2021

2122
&__info {
22-
position: absolute;
23-
left: 17%;
23+
position: relative;
2424
z-index: 1;
25-
width: 100%;
26-
padding: 22px 22px 22px 50px;
25+
margin-left: -12%;
26+
padding: 22px;
2727
border: 0.5px solid var(--dark-grey);
2828
border-radius: var(--rounded-lg);
2929
}

‎projects/social_platform/src/app/office/projects/edit/edit.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -352,15 +352,15 @@ export class ProjectEditComponent implements OnInit, AfterViewInit, OnDestroy {
352352
next: () => {
353353
this.projectGoalService.saveGoals(projectId).subscribe({
354354
next: () => {
355-
this.snackBarService.success("Данные успешно сохранены");
355+
this.snackBarService.success("данные успешно сохранены");
356356
this.setProjFormIsSubmitting(false);
357357
this.router.navigateByUrl(`/office/projects/my`);
358358
},
359359
});
360360
},
361361
error: () => {
362362
this.setProjFormIsSubmitting(false);
363-
this.snackBarService.error("Что-то пошло не так!");
363+
this.snackBarService.error("ошибка при сохранении данных");
364364
},
365365
});
366366
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@include responsive.apply-desktop {
77
display: flex;
88
align-items: flex-start;
9+
margin-top: 16px;
910
}
1011

1112
&__filter {
@@ -29,11 +30,12 @@
2930
display: grid;
3031
flex-grow: 1;
3132
grid-template-columns: 1fr;
32-
grid-gap: 16px;
33+
row-gap: 20px;
34+
column-gap: 40px;
3335
align-items: flex-start;
3436

3537
@include responsive.apply-desktop {
36-
grid-template-columns: repeat(2, 1fr);
38+
grid-template-columns: repeat(4, 2fr);
3739
}
3840
}
3941
}

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

Lines changed: 71 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,81 @@
22

33
<main class="page">
44
<div class="page__bar">
5-
@if (projectService.projectsCount$ | async; as count) {
6-
<app-bar
7-
[backHave]="false"
8-
[ballHave]="true"
9-
[links]="[
10-
{
11-
link: '/office/projects/my',
12-
linkText: 'Мои проекты',
13-
isRouterLinkActiveOptions: false,
14-
count: count.my,
15-
},
16-
17-
{
18-
link: '/office/projects/subscriptions',
19-
linkText: 'Мои подписки',
20-
isRouterLinkActiveOptions: false,
21-
count: count.subs,
22-
},
23-
24-
{
25-
link: '/office/projects/all',
26-
linkText: 'Все проекты',
27-
isRouterLinkActiveOptions: false,
28-
count: count.all,
29-
},
30-
]"
31-
>
32-
</app-bar>
33-
<div class="bar__right">
34-
@if (isMy) {
35-
<app-button
36-
size="medium"
37-
(click)="addProject()"
38-
customTypographyClass="text-body-12 bar__add-project"
39-
>
40-
<span class="bar__add-project-text text-body-12">Добавить проект</span>
41-
<i appIcon icon="plus" appSquare="12"></i>
42-
</app-button>
43-
} @else if (isAll) {
44-
<div class="bar__bottom">
5+
<app-back namespace="проекты" path="/office/projects/main"></app-back>
6+
7+
<div class="page__info">
8+
<div class="page__outlet">
459
<form [formGroup]="searchForm">
4610
<app-search formControlName="search"></app-search>
4711
</form>
12+
13+
<app-bar-new
14+
[links]="[
15+
{
16+
link: '/office/projects/my',
17+
linkText: 'Мои проекты',
18+
iconName: 'main',
19+
isRouterLinkActiveOptions: false,
20+
},
21+
22+
{
23+
link: '/office/projects/subscriptions',
24+
linkText: 'Мои подписки',
25+
iconName: 'favourites',
26+
isRouterLinkActiveOptions: false,
27+
},
28+
29+
{
30+
link: '/office/projects/invites',
31+
linkText: 'Мои приглашения',
32+
iconName: 'send',
33+
isRouterLinkActiveOptions: false,
34+
},
35+
36+
{
37+
link: '/office/projects/all',
38+
linkText: 'Все проекты',
39+
iconName: 'folders',
40+
isRouterLinkActiveOptions: false,
41+
},
42+
]"
43+
>
44+
</app-bar-new>
45+
46+
<router-outlet></router-outlet>
47+
</div>
48+
49+
<div class="page__create">
50+
<app-button
51+
size="medium"
52+
(click)="addProject()"
53+
customTypographyClass="text-body-12 bar__add-project"
54+
>
55+
<span class="bar__add-project-text text-body-12">создать проект</span>
56+
<i appIcon icon="plus" appSquare="10"></i>
57+
</app-button>
58+
59+
<div class="page__left">
60+
<div class="page__analytics">
61+
<div class="analytics">
62+
<div class="analytics__soon">
63+
<div class="analytics__closed">
64+
<i appIcon icon="lock" appSquare="10"></i>
65+
<span class="text-body-6 analytics__closed--text">пока закрыто</span>
66+
</div>
67+
<app-button customTypographyClass="text-body-6" color="green" size="extra-small"
68+
>скоро</app-button
69+
>
70+
</div>
71+
72+
<div class="analytics__info">
73+
<p class="text-body-12">статистика</p>
74+
<p class="text-body-6">количество проектов, команды, эффективность</p>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
4879
</div>
49-
}
5080
</div>
51-
}
5281
</div>
53-
54-
<router-outlet></router-outlet>
5582
</main>

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

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,83 @@
11
@use "styles/responsive";
22

33
.page {
4-
padding-bottom: 100px;
4+
&__info {
5+
display: flex;
6+
justify-content: space-between;
7+
gap: 20px;
58

6-
&__bar {
7-
margin-bottom: 12px;
9+
form {
10+
flex-grow: 1;
11+
}
12+
}
13+
14+
&__outlet {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 20px;
18+
margin-top: 10px;
19+
width: 100%;
820
}
9-
}
1021

11-
:host ::ng-deep {
12-
.bar__right {
22+
&__create {
1323
display: flex;
24+
flex-direction: column;
1425
align-items: center;
15-
margin-left: auto;
26+
gap: 20px;
1627
}
1728

18-
.bar__bottom {
19-
width: 100%;
20-
padding: 20px;
21-
background-color: var(--white);
22-
border: 1px solid var(--medium-grey-for-outline);
23-
border-radius: var(--rounded-xl);
29+
&__analytics {
30+
padding: 12px;
31+
background-color: var(--light-white);
32+
border: 0.5px solid var(--medium-grey-for-outline);
33+
border-radius: var(--rounded-lg);
34+
}
35+
}
36+
37+
.analytics {
38+
text-align: center;
39+
40+
&__soon {
41+
position: relative;
42+
margin-bottom: 4px;
43+
border: 0.5px solid var(--medium-grey-for-outline);
44+
border-radius: var(--rounded-lg);
2445
}
2546

26-
.bar__add-project {
47+
&__closed {
2748
display: flex;
49+
flex-direction: column;
50+
gap: 2px;
2851
align-items: center;
29-
cursor: pointer;
52+
justify-content: center;
53+
padding: 24px 37px;
54+
55+
&--text {
56+
color: var(--dark-grey);
57+
}
3058

3159
i {
32-
display: block;
33-
margin-left: 6px;
60+
color: var(--dark-grey);
3461
}
3562
}
3663

37-
.bar__add-project-text {
38-
display: inline;
64+
app-button {
65+
position: absolute;
66+
top: 82%;
67+
left: 36%;
68+
}
69+
70+
&__info {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 2px;
74+
align-items: center;
75+
justify-content: center;
76+
margin-top: 8px;
77+
78+
p {
79+
color: var(--accent);
80+
text-align: center;
81+
}
3982
}
4083
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import { ProjectCount } from "@models/project.model";
88
import { ProjectService } from "@services/project.service";
99
import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
1010
import { SearchComponent } from "@ui/components/search/search.component";
11-
import { BarComponent, ButtonComponent, IconComponent } from "@ui/components";
11+
import { ButtonComponent, IconComponent } from "@ui/components";
1212
import { AsyncPipe } from "@angular/common";
13+
import { BarNewComponent } from "@ui/components/bar-new/bar.component";
14+
import { BackComponent } from "@uilib";
1315

1416
/**
1517
* Главный компонент модуля проектов
@@ -34,8 +36,9 @@ import { AsyncPipe } from "@angular/common";
3436
SearchComponent,
3537
ButtonComponent,
3638
RouterOutlet,
39+
BarNewComponent,
3740
AsyncPipe,
38-
BarComponent,
41+
BackComponent,
3942
],
4043
})
4144
export class ProjectsComponent implements OnInit, OnDestroy {

0 commit comments

Comments
 (0)