Skip to content

Commit 3441758

Browse files
AwakichAwakich
committed
unify project & program detail pages to one detail page module
1 parent c2beb89 commit 3441758

15 files changed

Lines changed: 799 additions & 1373 deletions

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

Lines changed: 223 additions & 105 deletions
Large diffs are not rendered by default.

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

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
/** @format */
2+
3+
@use "styles/responsive";
4+
@use "styles/typography";
5+
6+
$detail-bar-height: 63px;
7+
$detail-bar-mb: 12px;
8+
9+
.detail {
10+
display: flex;
11+
flex-direction: column;
12+
height: 100%;
13+
max-height: 100%;
14+
overflow-y: scroll;
15+
16+
&__bar {
17+
margin-bottom: 20px;
18+
}
19+
20+
&__body {
21+
flex-grow: 1;
22+
max-height: calc(100% - #{$detail-bar-height} - #{$detail-bar-mb});
23+
padding-bottom: 12px;
24+
}
25+
}
26+
27+
.info {
28+
$body-slide: 15px;
29+
30+
position: relative;
31+
padding: 0;
32+
background-color: transparent;
33+
border: none;
34+
border-radius: $body-slide;
35+
36+
&__cover {
37+
position: relative;
38+
border-radius: 15px 15px 0 0;
39+
40+
height: 136px;
41+
42+
&--program {
43+
height: 155px;
44+
}
45+
46+
img {
47+
position: absolute;
48+
top: 0;
49+
right: 0;
50+
bottom: 0;
51+
left: 0;
52+
width: 100%;
53+
height: 100%;
54+
object-fit: cover;
55+
56+
&--program {
57+
object-fit: contain;
58+
object-position: top;
59+
}
60+
}
61+
}
62+
63+
&__body {
64+
position: relative;
65+
z-index: 2;
66+
}
67+
68+
&__avatar {
69+
position: absolute;
70+
bottom: -10px;
71+
left: 50%;
72+
display: block;
73+
cursor: pointer;
74+
background-color: var(--white);
75+
border-radius: 50%;
76+
77+
&--program {
78+
bottom: 15px;
79+
}
80+
81+
@include responsive.apply-desktop {
82+
83+
transform: translate(-50%, 50%);
84+
}
85+
}
86+
87+
&__row {
88+
display: flex;
89+
gap: 20px;
90+
align-items: center;
91+
justify-content: center;
92+
margin-top: 2px;
93+
94+
@include responsive.apply-desktop {
95+
justify-content: unset;
96+
margin-top: 0;
97+
}
98+
}
99+
100+
&__title {
101+
margin-top: 10px;
102+
overflow: hidden;
103+
color: var(--black);
104+
text-align: center;
105+
text-overflow: ellipsis;
106+
}
107+
108+
&__text {
109+
color: var(--dark-grey);
110+
}
111+
112+
&__actions {
113+
display: grid;
114+
grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
115+
gap: 20px;
116+
padding: 24px 0 30px;
117+
align-items: center;
118+
}
119+
120+
&__presentation {
121+
display: block;
122+
123+
i {
124+
margin-left: 15px;
125+
color: var(--accent);
126+
}
127+
128+
app-tooltip {
129+
position: absolute;
130+
right: -7%;
131+
bottom: 32%;
132+
z-index: 1000;
133+
}
134+
}
135+
136+
&__edit {
137+
display: block;
138+
}
139+
}
140+
141+
.project {
142+
&__list {
143+
display: flex;
144+
flex-direction: column;
145+
gap: 10px;
146+
align-items: center;
147+
max-height: none;
148+
149+
&--scrollable {
150+
max-height: 180px;
151+
overflow-y: auto;
152+
}
153+
}
154+
155+
&__item {
156+
display: flex;
157+
flex-grow: 1;
158+
align-items: center;
159+
justify-content: space-between;
160+
width: 300px;
161+
margin-bottom: 12px;
162+
margin-left: 40px;
163+
164+
&--info {
165+
display: flex;
166+
gap: 20px;
167+
align-items: center;
168+
}
169+
}
170+
}
171+
172+
.cancel {
173+
display: flex;
174+
flex-direction: column;
175+
align-items: center;
176+
justify-content: center;
177+
max-height: calc(100vh - 40px);
178+
padding: 24px 54px;
179+
180+
&__top {
181+
display: flex;
182+
flex-direction: column;
183+
gap: 10px;
184+
align-items: center;
185+
margin-bottom: 10px;
186+
}
187+
188+
&__title {
189+
text-align: center;
190+
}
191+
192+
&__text {
193+
width: 40%;
194+
color: var(--dark-grey);
195+
text-align: center;
196+
}
197+
198+
&__button {
199+
margin-top: 20px;
200+
}
201+
}
202+
203+
.support {
204+
padding-bottom: 110px;
205+
206+
@include responsive.apply-desktop {
207+
width: 470px;
208+
}
209+
210+
&__cross {
211+
position: absolute;
212+
top: 15px;
213+
right: 15px;
214+
z-index: 2;
215+
cursor: pointer;
216+
}
217+
218+
&__img {
219+
position: absolute;
220+
right: 0;
221+
bottom: 0;
222+
height: 195px;
223+
224+
@include responsive.apply-desktop {
225+
height: unset;
226+
}
227+
}
228+
229+
&__title {
230+
color: var(--black);
231+
text-align: center;
232+
233+
@include typography.bold-body-16;
234+
235+
@include responsive.apply-desktop {
236+
@include typography.heading-4;
237+
}
238+
}
239+
240+
&__text {
241+
margin: 20px 0;
242+
color: var(--black);
243+
244+
@include responsive.apply-desktop {
245+
max-width: 260px;
246+
}
247+
}
248+
}
249+
250+
.unsubscribe-modal {
251+
display: flex;
252+
flex-direction: column;
253+
align-items: center;
254+
padding: 24px;
255+
256+
h3 {
257+
margin-bottom: 16px;
258+
color: var(--black);
259+
}
260+
261+
img {
262+
margin-bottom: 16px;
263+
}
264+
265+
&__buttons {
266+
display: flex;
267+
gap: 12px;
268+
align-items: center;
269+
}
270+
}
271+

0 commit comments

Comments
 (0)