Skip to content

Commit da56cab

Browse files
Lazy-LennyLazy-Lenny
authored
Merge pull request #1218 from ita-social-projects/feature/issue-1303
Feature/issue-1303 (one wow fact styling)
2 parents 76ba23b + 03bb05b commit da56cab

File tree

2 files changed

+78
-195
lines changed

2 files changed

+78
-195
lines changed

‎src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
44
import { useEffect, useRef, useState } from 'react';
55
import { useSearchParams } from 'react-router-dom';
66
import BlockSlider from '@features/SlickSlider/InterestingFactSliderSlickSlider.component';
7-
import useMobx, { useStreetcodeDataContext } from '@stores/root-store';
7+
import useMobx, { useModalContext, useStreetcodeDataContext } from '@stores/root-store';
88
import BlockHeading from '@streetcode/HeadingBlock/BlockHeading.component';
99
import InterestingFactItem from '@streetcode/InterestingFactsBlock/InterestingFactItem/InterestingFactItem.component';
1010

@@ -20,6 +20,7 @@ const InterestingFactsComponent = () => {
2020
const [sliderArray, setSliderArray] = useState<Fact[]>([]);
2121
const [middleFactIndex, setMiddleFactIndex] = useState(0);
2222
const [isScrolled, setIsScrolled] = useState<boolean>(false);
23+
const { modalStore: { setModal } } = useModalContext();
2324

2425
const facts = useRef<Fact[]>([]);
2526
useAsync(
@@ -62,6 +63,11 @@ const InterestingFactsComponent = () => {
6263
}
6364
});
6465

66+
const handleModalOpen = () =>
67+
{
68+
setModal('facts', facts.current[0].id, true);
69+
}
70+
6571
const setings = {
6672
initialSlide: initialSlideIndex,
6773
dots: facts.current.length > 3,
@@ -109,19 +115,21 @@ const InterestingFactsComponent = () => {
109115
? (
110116
<div
111117
id="wow-facts"
112-
className={`container "interestingFactsWrapper"
113-
${facts.current.length === 1 ? 'single' : ''}`}
118+
className={`container "interestingFactsWrapper"`}
114119
>
115120
<BlockHeading headingText="Wow-факти" />
116121
<div className={`interestingFactsContainer
117-
${facts.current.length === 1 ? 'singleFact' : ''}`}
122+
${facts.current.length === 1 ? 'oneFactContainer' : ''}`}
118123
>
119124
<div className="interestingFactsSliderContainer">
120125
<div style={{ height: '100%' }}>
121126
{(facts.current.length === 1) ? (
122-
<div className="singleSlideContainer">
127+
<div className="oneFactItem"
128+
onClick={handleModalOpen}
129+
onKeyDown={handleModalOpen}>
123130
<InterestingFactItem
124131
fact={facts.current[0]}
132+
middleFactIndex={middleFactIndex}
125133
/>
126134
</div>
127135
) : (

‎src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.styles.scss‎

Lines changed: 65 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -47,58 +47,15 @@
4747
cursor: pointer;
4848
}
4949

50-
.singleSlideContainer{
51-
margin-bottom: pxToRem(90px);
52-
@include mut.flex-centered();
53-
@include vnd.vendored(transform, scale(1.32));
54-
padding-top: pxToRem(88px);
55-
56-
.interestingFactSlide{
57-
@include mut.sized(650px, 600px);
58-
59-
.slideImage {
60-
@include mut.sized($height: 60%);
61-
62-
img {
63-
@include mut.sized($width: 100%);
64-
max-height: 100%;
65-
}
66-
}
67-
68-
.slideText{
69-
@include mut.sized($height: 40%);
70-
71-
.heading{
72-
font-size:26px;
73-
}
74-
75-
.mainText{
76-
@include mut.sized($height: 75%);
77-
font-size:15px;
78-
line-height: pxToRem(20px);
79-
@include mut.rem-margined($right: 5px );
80-
81-
82-
&::-webkit-scrollbar-thumb,
83-
&::-webkit-scrollbar-track {
84-
@include mut.full-rounded(15px);
85-
@include mut.sized($height: 20px);
86-
87-
}
88-
89-
&::-webkit-scrollbar-thumb {
90-
background: c.$card-scrollbar-track-color;
91-
}
92-
93-
&::-webkit-scrollbar-track {
94-
background: c.$accented-gray-color;
95-
@include mut.rem-margined( $bottom: 10px );
96-
}
97-
}
98-
}
50+
.oneFactContainer{
51+
.oneFactItem{
52+
@include mut.flex-centered();
53+
transform: scale(1.52);
54+
padding: f.pxToRem(110px) 0;
9955
}
10056
}
10157

58+
10259
@media screen and (max-width: 1450px){
10360
.interestingFactsSliderContainer {
10461
@include mut.sized(1120px);
@@ -109,6 +66,11 @@
10966
bottom: auto;
11067
}
11168
}
69+
.oneFactContainer{
70+
.oneFactItem{
71+
padding: f.pxToRem(63px) 0;
72+
}
73+
}
11274
}
11375

11476
@media screen and (max-width: 1325px){
@@ -121,6 +83,16 @@
12183
.interestingFactsSliderContainer {
12284
@include mut.sized(830px);
12385
}
86+
87+
.oneFactItem{
88+
padding: f.pxToRem(43px) 0;
89+
90+
.interestingFactSlide{
91+
.slideImage{
92+
@include mut.sized(250px, 170px);
93+
}
94+
}
95+
}
12496
}
12597

12698
@media screen and (max-width: 1024px){
@@ -147,48 +119,28 @@
147119
@include mut.sized(85%, 100%);
148120
}
149121

150-
.singleSlideContainer{
122+
.oneFactContainer{
123+
@include mut.flex-centered();
124+
}
125+
126+
.oneFactItem{
127+
padding: f.pxToRem(83px) 0;
128+
151129
.interestingFactSlide{
152-
@include mut.sized(445px);
153-
@include mut.full-rounded(20px);
154-
155-
.slideImage {
156-
@include mut.sized($height: 65%);
157-
158-
img {
159-
@include mut.sized($width: 100%, $height: 100%);
160-
max-height: 300px;
161-
}
130+
@include mut.sized(273px, 293px);
131+
132+
.slideImage{
133+
@include mut.sized(273px, 174px);
162134
}
163-
.slideText{
164-
@include mut.sized($height: 40%);
165-
.heading{
166-
font-size:20px;
167-
@include mut.rem-padded(7px, 0px, 8px, 15px);
168-
}
169-
170-
.mainText{
171-
overflow: auto;
172-
height: 150px;
173-
font-size: 15px;
174-
line-height: pxToRem(21px);
175-
margin-bottom: pxToEm(10px);
176-
177-
&:after {
178-
content: "";
179-
position: absolute;
180-
z-index: 1;
181-
bottom: 0;
182-
left: 0;
183-
pointer-events: none;
184-
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
185-
width: 100%;
186-
height: 1.7em;
187-
}
188-
}
135+
}
136+
137+
.cardTextContainer{
138+
.cardTextContainerTitle{
139+
margin-bottom: f.pxToRem(8px);
189140
}
190141
}
191142
}
143+
192144
}
193145

194146
@media screen
@@ -210,50 +162,9 @@ and (min-width: 768px) and (max-width: 1024px){
210162
.interestingFactsSliderContainer {
211163
@include mut.sized(100%, 100%);
212164
}
213-
214-
.singleSlideContainer{
215-
216-
.interestingFactSlide{
217-
@include mut.sized(445px);
218-
219-
@include mut.full-rounded(20px);
220-
221-
.slideImage {
222-
@include mut.sized($height: 65%);
223-
224-
img {
225-
@include mut.sized($width: 100%, $height: 100%);
226-
max-height: 210px;
227-
}
228-
}
229-
.slideText{
230-
@include mut.sized($height: 40%);
231-
.heading{
232-
font-size:20px;
233-
@include mut.rem-padded(7px, 0px, 8px, 15px);
234-
}
235-
236-
.mainText{
237-
overflow: auto;
238-
height: 150px;
239-
font-size: 15px;
240-
line-height: pxToRem(21px);
241-
margin-bottom: pxToEm(10px);
242-
243-
&:after {
244-
content: "";
245-
position: absolute;
246-
z-index: 1;
247-
bottom: 0;
248-
left: 0;
249-
pointer-events: none;
250-
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
251-
width: 100%;
252-
height: 1.7em;
253-
}
254-
255-
}
256-
}
165+
.oneFactContainer{
166+
.oneFactItem{
167+
padding: f.pxToRem(83px) 0;
257168
}
258169
}
259170
}
@@ -278,53 +189,6 @@ and (min-width: 768px) and (max-width: 1024px){
278189
.interestingFactsSliderContainer {
279190
@include mut.sized(100%, 100%);
280191
}
281-
282-
283-
.singleSlideContainer{
284-
margin-bottom: pxToRem(65px);
285-
padding-top: pxToRem(50px);
286-
287-
.interestingFactSlide{
288-
@include mut.sized(345px);
289-
@include mut.full-rounded(20px);
290-
291-
.slideImage {
292-
@include mut.sized($height: 65%);
293-
294-
img {
295-
@include mut.sized($width: 100%, $height: 100%);
296-
max-height: 210px;
297-
}
298-
}
299-
.slideText{
300-
@include mut.sized($height: 40%);
301-
.heading{
302-
font-size:14px;
303-
@include mut.rem-padded(7px, 0px, 8px, 15px);
304-
}
305-
306-
.mainText{
307-
overflow: auto;
308-
font-size: 12px;
309-
line-height: pxToRem(21px);
310-
margin-bottom: pxToEm(10px);
311-
312-
&:after {
313-
content: "";
314-
position: absolute;
315-
z-index: 1;
316-
bottom: 0;
317-
left: 0;
318-
pointer-events: none;
319-
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
320-
width: 100%;
321-
height: 1.7em;
322-
}
323-
324-
}
325-
}
326-
}
327-
}
328192
}
329193

330194
@media screen and (max-width: 768px){
@@ -362,23 +226,34 @@ and (min-width: 768px) and (max-width: 1024px){
362226
}
363227
}
364228
}
229+
.oneFactContainer{
230+
@include mut.flex-centered();
365231

366-
.singleSlideContainer{
232+
.oneFactItem{
233+
padding: f.pxToRem(83px) 0;
234+
}
235+
}
236+
}
237+
238+
@media screen and (max-width: 580px) {
239+
.oneFactItem{
367240
.interestingFactSlide{
368-
@include mut.sized(32%);
369-
@include mut.full-rounded(20px);
370-
371-
.slideImage {
372-
@include mut.sized($height: 55%);
373-
374-
img {
375-
@include mut.sized($width: 100%, $height: 100%);
376-
}
241+
@include mut.sized(205px, 220px);
242+
243+
.slideImage{
244+
@include mut.sized(205px, 131px);
377245
}
378-
.slideText{
379-
@include mut.sized($height: 110px);
380-
@include mut.full-rounded(0px);
246+
.cardTextContainer{
247+
.cardTextContainerText{
248+
font-size: f.pxToRem(8.5px);
249+
}
250+
.cardTextContainerTitle{
251+
font-size: f.pxToRem(10.5px);
252+
margin-bottom: f.pxToRem(6px);
253+
padding-top: 5px;
254+
}
381255
}
256+
382257
}
383258
}
384259
}

0 commit comments

Comments
 (0)