Skip to content

Commit 2907091

Browse files
berezinantberezinant
committed
KTL-1239 fix: inversed animation after design review, formatted code
1 parent 8f8cfa6 commit 2907091

File tree

2 files changed

+157
-135
lines changed

2 files changed

+157
-135
lines changed

‎src/components/AnnualReport/annualReport.module.css

Lines changed: 109 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,156 @@
11
.report {
2-
margin: var(--ktl-box-page-l) 0;
3-
padding: var(--ktl-box-section-l) 0;
4-
background: var(--ktl-light-grey);
5-
border-top: 1px solid var(--rs-color-black-t20);
6-
border-bottom: 1px solid var(--rs-color-black-t20);
7-
8-
@media (--ktl-tl) {
9-
margin: var(--ktl-box-page-m) 0;
10-
}
11-
12-
@media (--ktl-mm) {
13-
margin: var(--ktl-box-section-l) 0;
14-
}
2+
margin: var(--ktl-box-page-l) 0;
3+
padding: var(--ktl-box-section-l) 0;
4+
background: var(--ktl-light-grey);
5+
border-top: 1px solid var(--rs-color-black-t20);
6+
border-bottom: 1px solid var(--rs-color-black-t20);
7+
8+
@media (--ktl-tl) {
9+
margin: var(--ktl-box-page-m) 0;
10+
}
11+
12+
@media (--ktl-mm) {
13+
margin: var(--ktl-box-section-l) 0;
14+
}
1515
}
1616

1717
.slides {
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
2121

22-
@media (--ktl-tl) {
23-
flex-direction: column;
24-
}
22+
@media (--ktl-tl) {
23+
flex-direction: column;
24+
}
2525
}
2626

2727
.imageContainer {
28-
position: relative;
29-
display: flex;
30-
flex-direction: column;
31-
align-items: center;
32-
width: 416px;
33-
height: 276px;
34-
35-
@media (--ktl-tl) {
36-
margin: var(--ktl-box-section-s) 0 var(--ktl-box-section-s) -50px;
37-
order: 2;
38-
}
39-
40-
@media (--ktl-mm) {
41-
margin: var(--ktl-box-section-s) 0;
42-
width: 288px;
43-
height: 176px;
44-
}
28+
position: relative;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
width: 416px;
33+
height: 276px;
34+
35+
@media (--ktl-tl) {
36+
margin: var(--ktl-box-section-s) 0 var(--ktl-box-section-s) -50px;
37+
order: 2;
38+
}
39+
40+
@media (--ktl-mm) {
41+
margin: var(--ktl-box-section-s) 0;
42+
width: 288px;
43+
height: 176px;
44+
}
4545
}
4646

4747
.imageContainer:before {
48-
content: ' ';
49-
position: absolute;
48+
content: ' ';
49+
position: absolute;
50+
top: -49px;
51+
left: 45px;
52+
width: 374px;
53+
height: 374px;
54+
border-radius: 50%;
55+
opacity: 0.5;
56+
background: radial-gradient(50% 50% at 50% 50%, rgba(51, 0, 255, 0.5) 0%, rgba(232, 232, 232, 0.00) 100%);
57+
58+
@media (--ktl-mm) {
5059
top: -49px;
51-
left: 45px;
52-
width: 374px;
53-
height: 374px;
54-
border-radius: 50%;
55-
opacity: 0.5;
56-
background: radial-gradient(50% 50% at 50% 50%, rgba(51, 0, 255, 0.5) 0%, rgba(232, 232, 232, 0.00) 100%);
57-
58-
@media (--ktl-mm) {
59-
top: -49px;
60-
left: 0;
61-
width: 300px;
62-
height: 280px;
63-
}
60+
left: 0;
61+
width: 300px;
62+
height: 280px;
63+
}
6464
}
6565

6666
.image {
67-
position: absolute;
68-
transform: perspective(1500px) rotateY(15deg);
69-
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
70-
transition: transform 1s ease 0s;
71-
will-change: transform;
72-
73-
@media (--ktl-mm) {
74-
width: 256px;
75-
height: 144px;
76-
}
67+
position: absolute;
68+
transform: perspective(3000px) rotateY(0deg);
69+
box-shadow: rgba(0, 0, 0, 0) 0 25px 50px -12px;
70+
transition: transform 1s ease 0s, box-shadow 1s ease 0s;
71+
will-change: transform, box-shadow;
72+
73+
@media (--ktl-mm) {
74+
width: 256px;
75+
height: 144px;
76+
}
77+
}
78+
79+
.imageContainer:hover .image {
80+
box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
7781
}
7882

7983
.image:nth-child(1) {
80-
top: 24px;
81-
left: 48px;
84+
top: 24px;
85+
left: 48px;
8286

83-
@media (--ktl-mm) {
84-
top: 0;
85-
left: 0;
86-
}
87+
@media (--ktl-mm) {
88+
top: 0;
89+
left: 0;
90+
}
8791
}
8892

8993
.imageContainer:hover .image:nth-child(1) {
90-
transform: perspective(3000px) rotateY(0deg) translateX(-18px) translateY(-6px);
94+
transform: perspective(1500px) rotateY(15deg) translateX(-18px) translateY(-6px);
9195
}
9296

9397
.image:nth-child(2) {
94-
top: 48px;
95-
left: 72px;
98+
top: 48px;
99+
left: 72px;
96100

97-
@media (--ktl-mm) {
98-
top: 16px;
99-
left: 16px;
100-
}
101+
@media (--ktl-mm) {
102+
top: 16px;
103+
left: 16px;
104+
}
101105
}
102106

103107
.imageContainer:hover .image:nth-child(2) {
104-
transform: perspective(3000px) rotateY(0deg);
108+
transform: perspective(1500px) rotateY(15deg);
105109
}
106110

107111
.image:nth-child(3) {
108-
top: 72px;
109-
left: 96px;
112+
top: 72px;
113+
left: 96px;
110114

111-
@media (--ktl-mm) {
112-
top: 32px;
113-
left: 32px;
114-
}
115+
@media (--ktl-mm) {
116+
top: 32px;
117+
left: 32px;
118+
}
115119
}
116120

117121
.imageContainer:hover .image:nth-child(3) {
118-
transform: perspective(3000px) rotateY(0deg) translateX(18px) translateY(6px);
122+
transform: perspective(1500px) rotateY(15deg) translateX(18px) translateY(6px);
119123
}
120124

121125
.textContainer {
122-
display: flex;
123-
flex-direction: column;
124-
align-items: center;
125-
gap: var(--ktl-box-section-m);
126-
width: 572px;
127-
padding: var(--ktl-box-block-s) var(--ktl-box-section-s);
128-
text-align: center;
129-
130-
@media (--ktl-tl) {
131-
position: relative;
132-
width: unset;
133-
padding: 0;
134-
z-index: 1;
135-
}
126+
display: flex;
127+
flex-direction: column;
128+
align-items: center;
129+
gap: var(--ktl-box-section-m);
130+
width: 572px;
131+
padding: var(--ktl-box-block-s) var(--ktl-box-section-s);
132+
text-align: center;
133+
134+
@media (--ktl-tl) {
135+
position: relative;
136+
width: unset;
137+
padding: 0;
138+
z-index: 1;
139+
}
136140
}
137141

138142
.button {
139-
display: block;
140-
@media (--ktl-tl) {
141-
display: none;
142-
}
143+
display: block;
144+
@media (--ktl-tl) {
145+
display: none;
146+
}
143147
}
144148

145149
.buttonMobile {
146-
display: none;
147-
@media (--ktl-tl) {
148-
display: block;
149-
order: 3;
150-
}
150+
display: none;
151+
@media (--ktl-tl) {
152+
display: block;
153+
order: 3;
154+
}
151155
}
152156

‎src/components/AnnualReport/index.tsx

Lines changed: 48 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,53 @@ import report2MissionRecap from "./assets/2-mission-recap.png";
66
import report3FoundationResults from "./assets/3-foundation-results.png";
77

88
export function AnnualReport() {
9-
const renderButton = (className: string) => (
10-
<Button
11-
className={className}
12-
mode="outline"
13-
size="l"
14-
// TODO: upload actual pdf file with the report
15-
href="/annual-report-2023.pdf"
16-
target="_blank"
17-
>
18-
View annual report
19-
</Button>
20-
);
21-
return (
22-
<div className={styles.report}>
23-
<section className={cn("ktl-layout ktl-layout--center", styles.slides)}>
24-
<div className={styles.imageContainer}>
25-
<img src={report3FoundationResults} alt="Foundation results" className={styles.image} width={320}
26-
height={180}/>
27-
<img src={report2MissionRecap} alt="Misson recap" className={styles.image} width={320}
28-
height={180}/>
29-
<img src={report1KotlinResults} alt="Kotlin results" className={styles.image} width={320}
30-
height={180}/>
31-
</div>
32-
<div className={styles.textContainer}>
33-
<h2 className="ktf-h2 ktf-h3--tl">Explore Kotlin Foundation <br/>highlights from 2023</h2>
34-
{renderButton(styles.button)}
35-
</div>
36-
{renderButton(styles.buttonMobile)}
37-
</section>
9+
const renderButton = (className: string) => (
10+
<Button
11+
className={className}
12+
mode="outline"
13+
size="l"
14+
// TODO: upload actual pdf file with the report
15+
href="/annual-report-2023.pdf"
16+
target="_blank"
17+
>
18+
View annual report
19+
</Button>
20+
);
21+
return (
22+
<div className={styles.report}>
23+
<section className={cn("ktl-layout ktl-layout--center", styles.slides)}>
24+
<div className={styles.imageContainer}>
25+
<img
26+
src={report3FoundationResults}
27+
alt="Foundation results"
28+
className={styles.image}
29+
width={320}
30+
height={180}
31+
/>
32+
<img
33+
src={report2MissionRecap}
34+
alt="Misson recap"
35+
className={styles.image}
36+
width={320}
37+
height={180}
38+
/>
39+
<img
40+
src={report1KotlinResults}
41+
alt="Kotlin results"
42+
className={styles.image}
43+
width={320}
44+
height={180}
45+
/>
3846
</div>
39-
);
47+
<div className={styles.textContainer}>
48+
<h2 className="ktf-h2 ktf-h3--tl">
49+
Explore Kotlin Foundation <br />
50+
highlights from 2023
51+
</h2>
52+
{renderButton(styles.button)}
53+
</div>
54+
{renderButton(styles.buttonMobile)}
55+
</section>
56+
</div>
57+
);
4058
}

0 commit comments

Comments
 (0)