Skip to content

Commit 780077d

Browse files
AwakichAwakich
committed
adapted to mobile version projects, members, projects-rating pages for program
1 parent ad1ec93 commit 780077d

8 files changed

Lines changed: 295 additions & 53 deletions

File tree

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

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,42 @@
6969
</div>
7070

7171
<ng-template #programTpl>
72-
@if (userType() !== undefined) {
72+
@if (userType() !== undefined) { @if ((isProjectsPage || isProjectsRatingPage) && appWidth
73+
< 920) {
74+
<a [routerLink]="'/office/program/' + info().id">
75+
<app-button
76+
appearance="outline"
77+
size="small"
78+
class="info__contacts"
79+
customTypographyClass="text-body-12"
80+
>
81+
<span>назад</span>
82+
</app-button>
83+
</a>
84+
85+
<app-button
86+
appearance="outline"
87+
size="small"
88+
[disabled]="!info().links?.length"
89+
class="info__contacts"
90+
customTypographyClass="text-body-12"
91+
(click)="isContactsModalOpen = true"
92+
>
93+
<i appIcon icon="phone" appSquare="12"></i>
94+
</app-button>
95+
96+
<app-modal
97+
[open]="isContactsModalOpen"
98+
(openChange)="isContactsModalOpen = !isContactsModalOpen"
99+
bodyClass="modal__body--no-flex"
100+
>
101+
<app-program-links
102+
title="контакты"
103+
icon="phone"
104+
[links]="contactLinks"
105+
></app-program-links>
106+
</app-modal>
107+
} @else {
73108
<div class="info__primary-action">
74109
@if (!isUserMember && !isUserManager) { @if (info().name.includes("Кейс-чемпионат MIR"))
75110
{
@@ -107,7 +142,7 @@
107142
} @if ((isUserManager || isUserExpert) && isUserMember) {
108143
<a [routerLink]="'/office/program/' + info().id + '/projects-rating'">
109144
<app-button
110-
[appearance]="isProjectsRatingPage ? 'inline' : 'outline'"
145+
[appearance]="isProjectsRatingPage || appWidth < 920 ? 'inline' : 'outline'"
111146
[size]="appWidth > 920 ? 'medium' : 'big'"
112147
customTypographyClass="text-body-12"
113148
>
@@ -146,7 +181,7 @@
146181
<i
147182
appIcon
148183
class="info__presentation-icon"
149-
[icon]="appWidth > 920 ? 'arrow-down' : isUserManager ? 'graph' : 'file'"
184+
[icon]="appWidth > 920 ? 'arrow-down' : 'file'"
150185
[appSquare]="appWidth > 920 ? '8' : '12'"
151186
></i>
152187
}
@@ -155,7 +190,18 @@
155190

156191
@if (appWidth > 920) {
157192
<div class="info__divider"></div>
158-
} @if (isUserManager || isUserExpert) {
193+
} @if (appWidth < 920) {
194+
<app-button
195+
appearance="outline"
196+
size="small"
197+
[disabled]="!info().links?.length"
198+
class="info__contacts"
199+
customTypographyClass="text-body-12"
200+
(click)="isContactsModalOpen = true"
201+
>
202+
<i appIcon icon="phone" appSquare="12"></i>
203+
</app-button>
204+
} @if (isUserManager || (isUserExpert && appWidth > 920)) {
159205
<a [routerLink]="'/office/program/' + info().id + '/projects'">
160206
<app-button
161207
[appearance]="isProjectsPage ? 'inline' : 'outline'"
@@ -166,7 +212,7 @@
166212
проекты-участники
167213
</app-button>
168214
</a>
169-
} @else { @if (appWidth > 920) {
215+
} @if (!isUserManager && !isUserExpert && appWidth > 920) {
170216
<a class="info__more">
171217
<app-button
172218
appearance="outline"
@@ -177,40 +223,30 @@
177223
узнать подробнее
178224
</app-button>
179225
</a>
180-
} @else {
181-
<app-button
182-
appearance="outline"
183-
size="small"
184-
[disabled]="!info().links?.length"
185-
class="info__contacts"
186-
customTypographyClass="text-body-12"
187-
(click)="isContactsModalOpen = true"
188-
>
189-
<i appIcon icon="phone" appSquare="12"></i>
190-
</app-button>
191-
} } @if (appWidth < 920) {
226+
} @if (isUserManager || (isUserExpert && appWidth > 920)) {
227+
<a [routerLink]="'/office/program/' + info().id + '/members'" class="info__members">
228+
<app-button
229+
[appearance]="isMembersPage ? 'inline' : 'outline'"
230+
size="medium"
231+
[disabled]="isUserExpert && !isUserManager"
232+
customTypographyClass="text-body-12"
233+
>
234+
участники
235+
</app-button>
236+
</a>
237+
} @if (appWidth < 920) {
192238
<app-button
193239
appearance="outline"
194240
size="big"
195241
[disabled]="!info().materials?.length"
196242
class="info__materials"
243+
[class.info__materials--full]="isUserManager || isUserExpert"
197244
customTypographyClass="text-body-12"
198245
(click)="isMaterialsModalOpen = true"
199246
>
200247
материалы
201248
</app-button>
202-
} @if (isUserManager || isUserExpert) {
203-
<a [routerLink]="'/office/program/' + info().id + '/members'">
204-
<app-button
205-
[appearance]="isMembersPage ? 'inline' : 'outline'"
206-
size="medium"
207-
[disabled]="isUserExpert && !isUserManager"
208-
customTypographyClass="text-body-12"
209-
>
210-
участники
211-
</app-button>
212-
</a>
213-
} @else {
249+
} @if (!isUserManager && !isUserExpert) {
214250
<app-button
215251
(click)="
216252
info().courses?.length
@@ -224,7 +260,7 @@
224260
>
225261
{{ appWidth > 920 ? "перейти в курс" : "курс" }}
226262
</app-button>
227-
} }
263+
}
228264

229265
<app-modal
230266
[open]="isAssignProjectToProgramModalOpen()"
@@ -300,6 +336,7 @@
300336
[links]="materialLinks"
301337
></app-program-links>
302338
</app-modal>
339+
} }
303340
</ng-template>
304341

305342
<ng-template #projectTpl>

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,14 +141,25 @@ $detail-bar-mb: 12px;
141141
}
142142
}
143143

144-
&__contacts {
144+
&__contacts,
145+
&__members {
145146
justify-self: end;
146147

147148
@include responsive.apply-desktop {
148149
justify-self: auto;
149150
}
150151
}
151152

153+
&__materials {
154+
&--full {
155+
grid-column: 1 / -1;
156+
157+
@include responsive.apply-desktop {
158+
grid-column: auto;
159+
}
160+
}
161+
}
162+
152163
&__primary-action {
153164
grid-column: 1 / -1;
154165
order: 999;

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

Lines changed: 97 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
<div
44
class="page"
55
#listRoot
6-
[style.grid-template-columns]="listType === 'members' ? '10fr' : '8fr 2fr'"
6+
[style.grid-template-columns]="
7+
appWidth < 920 ? '1fr' : listType === 'members' ? '10fr' : '8fr 2fr'
8+
"
79
>
810
<div class="page__outlet">
911
<div class="page__search">
@@ -12,10 +14,75 @@
1214
</form>
1315
</div>
1416

15-
<div class="filter-toggle page__filter-toggle" (click)="isFilterOpen = !isFilterOpen">
16-
<span>Фильтры</span>
17-
<i appIcon icon="filter" appSquare="34"></i>
17+
@if (appWidth < 920 && listType !== 'members') {
18+
<div class="page__mobile-controls">
19+
<div class="page__mobile-filter-row">
20+
<div class="page__mobile-filter-row">
21+
<app-button
22+
appearance="outline"
23+
size="big"
24+
customTypographyClass="text-body-12"
25+
(click)="isFilterModalOpen.set(true)"
26+
>
27+
<i appIcon icon="additional" appSquare="14"></i>
28+
</app-button>
29+
<a class="page__clear text-body-12" (click)="onClearFilters()">сбросить</a>
30+
</div>
31+
32+
@if (listType === "rating") {
33+
<div class="page__mobile-export">
34+
<app-button
35+
[loader]="loadingExportRates()"
36+
customTypographyClass="text-body-12"
37+
size="big"
38+
(click)="downloadRates()"
39+
>
40+
<span class="text-body-12">выгрузка оценок</span>
41+
<i appIcon icon="download" appSquare="18"></i>
42+
</app-button>
43+
</div>
44+
45+
}
46+
</div>
47+
48+
@if (listType === 'projects') {
49+
<div class="page__mobile-export">
50+
<app-button
51+
[loader]="loadingExportProjects()"
52+
customTypographyClass="text-body-12"
53+
size="medium"
54+
(click)="downloadProjects()"
55+
>
56+
<span class="text-body-12">выгрузка проектов</span>
57+
<i appIcon icon="download" appSquare="18"></i>
58+
</app-button>
59+
60+
<app-button
61+
[loader]="loadingExportSubmittedProjects()"
62+
customTypographyClass="text-body-12"
63+
size="medium"
64+
(click)="downloadSubmittedProjects()"
65+
>
66+
<span class="text-body-12">сданные решения</span>
67+
<i appIcon icon="download" appSquare="18"></i>
68+
</app-button>
69+
</div>
70+
} @else { @if (appWidth > 920) {
71+
<div class="page__mobile-export">
72+
<app-button
73+
[loader]="loadingExportRates()"
74+
customTypographyClass="text-body-12"
75+
size="medium"
76+
(click)="downloadRates()"
77+
>
78+
<span class="text-body-12">выгрузка оценок</span>
79+
<i appIcon icon="download" appSquare="18"></i>
80+
</app-button>
81+
</div>
82+
83+
} }
1884
</div>
85+
}
1986

2087
<ul class="page__list" [class.page__list--rating]="listType === 'rating'">
2188
@for (listItem of searchedList; track listItem.id) {
@@ -37,7 +104,7 @@
37104
</ul>
38105
</div>
39106

40-
@if (listType !== 'members') {
107+
@if (appWidth >= 920 && listType !== 'members') {
41108
<div class="page__create">
42109
<div class="page__left">
43110
@if (listType === 'projects' || listType === 'rating') {
@@ -78,7 +145,7 @@
78145
<i appIcon icon="download" appSquare="18"></i>
79146
</app-button>
80147
</div>
81-
} @else {
148+
} @else { @if (appWidth > 920) {
82149
<div class="page__export">
83150
<app-button
84151
[loader]="loadingExportRates()"
@@ -102,13 +169,14 @@
102169
<i appIcon icon="download" appSquare="18"></i>
103170
</app-button>
104171
</div>
105-
}
172+
173+
} }
106174
</div>
107175
</div>
108176
}
109177
</div>
110178
</div>
111-
} @if (listType !== 'members' && listType !== 'projects') {
179+
} @if (listType !== 'members' && listType !== 'projects' && appWidth >= 920) {
112180
<div class="page__tooltip">
113181
<div class="tooltip">
114182
<app-tooltip color="grey" iconSize="40" (show)="isHintExpertsVisible.set(true)"></app-tooltip>
@@ -163,4 +231,25 @@
163231
</div>
164232
</app-modal>
165233
}
234+
235+
<app-modal
236+
[open]="isFilterModalOpen()"
237+
(openChange)="isFilterModalOpen.set($event)"
238+
bodyClass="modal__body--no-flex"
239+
>
240+
<app-projects-filter
241+
[listType]="listType"
242+
(closeFilter)="isFilterModalOpen.set(false)"
243+
(clear)="onClearFilters()"
244+
></app-projects-filter>
245+
246+
<app-button
247+
appearance="outline"
248+
size="big"
249+
customTypographyClass="text-body-12"
250+
(click)="isFilterModalOpen.set(false)"
251+
>
252+
применить фильтр
253+
</app-button>
254+
</app-modal>
166255
</div>

0 commit comments

Comments
 (0)