Skip to content

Commit 3376417

Browse files
author
ankitrewar11
committed
fix: center event image and fix Join Now button navigation #7623
Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
1 parent 6b7a832 commit 3376417

File tree

2 files changed

+147
-118
lines changed

2 files changed

+147
-118
lines changed

‎src/components/UpcomingEventCard/EventCard.style.js‎

Lines changed: 115 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,124 @@
11
import styled from "styled-components";
22

33
const UpcomingEventsWrapper = styled.div`
4-
.blog-slider {
5-
width: 100%;
6-
position: relative;
7-
max-width: 50rem;
8-
margin: auto;
9-
background: ${props => props.theme.grey212121ToWhite};
10-
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
11-
padding: 1rem;
12-
border-radius: 0.5rem;
13-
height: 39.5rem;
14-
overflow: auto;
15-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
16-
}
17-
18-
.swiper-wrapper{
19-
height: 38rem
20-
}
21-
.blog-slider_img{
22-
max-height: 25rem;
23-
object-fit: cover;
24-
.gatsby-image-wrapper {
25-
img {
26-
max-height: 25rem;
27-
}
28-
}
29-
}
30-
.blog-slider_content{
31-
text-align: center;
32-
overflow: hidden;
33-
padding-bottom: 4rem;
34-
}
35-
36-
.blog-slider_item {
37-
overflow-x: hidden;
38-
overflow-y: auto;
39-
40-
}
41-
.blog-slider_item.swiper-slide::-webkit-scrollbar {
42-
width: 0;
43-
}
44-
45-
.blog-slider_title {
46-
text-align: center;
47-
margin: 1rem auto 0.2rem;
48-
}
49-
50-
.blog-slider_date {
51-
display: flex;
52-
color: ${props => props.theme.whiteSevenToBlackSeven};
53-
justify-content: flex-end;
54-
margin: 0;
55-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
56-
}
57-
58-
.blog-slider_text {
59-
h2 {
60-
text-align: start;
61-
font-size: 1.25rem;
62-
}
63-
64-
ul > li {
65-
text-align: start;
66-
list-style: disc;
67-
}
68-
}
69-
70-
.blog-slider_description {
71-
padding-left: 0.625rem;
72-
font-size: 1.25rem;
73-
}
74-
75-
.swiper-pagination-bullet {
76-
background: ${props => props.theme.secondaryColor};
77-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
78-
}
79-
80-
.swiper-pagination {
81-
background: ${props => props.theme.grey212121ToWhite};
82-
padding-top: 0.8rem;
4+
.blog-slider {
5+
width: 100%;
6+
position: relative;
7+
max-width: 50rem;
8+
margin: auto;
9+
background: ${(props) => props.theme.grey212121ToWhite};
10+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
11+
padding: 1rem;
12+
border-radius: 0.5rem;
13+
height: 39.5rem;
14+
overflow: auto;
15+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
16+
}
17+
18+
.swiper-wrapper {
19+
height: 38rem;
20+
}
21+
.blog-slider_img {
22+
max-height: 25rem;
23+
object-fit: cover;
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
overflow: hidden;
28+
.gatsby-image-wrapper {
29+
width: 100%;
30+
height: 100%;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
img {
35+
max-height: 25rem;
36+
object-fit: cover !important;
37+
width: 100%;
38+
}
39+
}
40+
}
41+
.blog-slider_content {
42+
text-align: center;
43+
overflow: hidden;
44+
padding-bottom: 4rem;
45+
}
46+
47+
.blog-slider_item {
48+
overflow-x: hidden;
49+
overflow-y: auto;
50+
}
51+
.blog-slider_item.swiper-slide::-webkit-scrollbar {
52+
width: 0;
53+
}
54+
55+
.blog-slider_title {
56+
text-align: center;
57+
margin: 1rem auto 0.2rem;
58+
}
59+
60+
.blog-slider_date {
61+
display: flex;
62+
color: ${(props) => props.theme.whiteSevenToBlackSeven};
63+
justify-content: flex-end;
64+
margin: 0;
65+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
66+
}
67+
68+
.blog-slider_text {
69+
h2 {
70+
text-align: start;
71+
font-size: 1.25rem;
72+
}
73+
74+
ul > li {
75+
text-align: start;
76+
list-style: disc;
77+
}
78+
}
79+
80+
.blog-slider_description {
81+
padding-left: 0.625rem;
82+
font-size: 1.25rem;
83+
}
84+
85+
.swiper-pagination-bullet {
86+
background: ${(props) => props.theme.secondaryColor};
87+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
88+
}
89+
90+
.swiper-pagination {
91+
background: ${(props) => props.theme.grey212121ToWhite};
92+
padding-top: 0.8rem;
8393
margin-top: 1rem;
8494
margin-bottom: -1.2rem;
8595
padding-bottom: 0.8rem;
86-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
87-
}
88-
89-
@media (max-width: 720px) {
90-
.blog-slider_button {
91-
margin-bottom: 2rem;
92-
}
93-
94-
.blog-slider {
95-
height: 38rem;
96-
}
97-
}
98-
99-
@media (max-width: 420px) {
100-
.blog-slider_title {
101-
font-size: 1.75rem;
102-
}
103-
104-
.blog-slider_text > h2 {
105-
font-size: 1.15rem;
106-
}
107-
108-
.blog-slider {
109-
height: 35rem;
110-
}
111-
}
96+
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
97+
}
98+
99+
@media (max-width: 720px) {
100+
.blog-slider_button {
101+
margin-bottom: 2rem;
102+
}
103+
104+
.blog-slider {
105+
height: 38rem;
106+
}
107+
}
108+
109+
@media (max-width: 420px) {
110+
.blog-slider_title {
111+
font-size: 1.75rem;
112+
}
113+
114+
.blog-slider_text > h2 {
115+
font-size: 1.15rem;
116+
}
117+
118+
.blog-slider {
119+
height: 35rem;
120+
}
121+
}
112122
`;
113123

114124
export default UpcomingEventsWrapper;

‎src/components/UpcomingEventCard/index.js‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,62 @@ import "swiper/css/bundle";
88
import Button from "../../reusecore/Button";
99
import slugify from "../../utils/slugify";
1010

11-
1211
const UpcomingEvents = ({ data }) => {
1312
return (
1413
<UpcomingEventsWrapper>
1514
<div className="blog-slider swiper">
16-
<div style={{
17-
display: "block"
18-
}} className="blog-slider__wrp swiper-wrapper"
15+
<div
16+
style={{
17+
display: "block",
18+
}}
19+
className="blog-slider__wrp swiper-wrapper"
1920
>
20-
2121
<Swiper
2222
spaceBetween={50}
2323
slidesPerView={1}
2424
modules={[Mousewheel, Pagination]}
2525
pagination={{ clickable: true }}
2626
>
27-
{data.nodes.map(item => {
27+
{data.nodes.map((item) => {
2828
return (
2929
<SwiperSlide key={item.id}>
3030
<div className="blog-slider_item swiper-slide">
3131
<div className="blog-slider_img">
32-
<Link to={`/community/events/${slugify(item.frontmatter.title)}`}>
33-
<Image {...item.frontmatter.thumbnail} alt={item.frontmatter.title} />
32+
<Link
33+
to={`/community/events/${slugify(item.frontmatter.title)}`}
34+
>
35+
<Image
36+
{...item.frontmatter.thumbnail}
37+
alt={item.frontmatter.title}
38+
/>
3439
</Link>
3540
</div>
3641
<div className="blog-slider_content">
37-
<h3 className="blog-slider_title">{item.frontmatter.title}</h3>
38-
<p className="blog-slider_date">{item.frontmatter.date}</p>
39-
<p className="blog-slider_description">{item.frontmatter.abstract}</p>
40-
<Button $secondary className="blog-slider_button" $url={item.frontmatter.eurl} title="Join Now" $external={true} />
42+
<h3 className="blog-slider_title">
43+
{item.frontmatter.title}
44+
</h3>
45+
<p className="blog-slider_date">
46+
{item.frontmatter.date}
47+
</p>
48+
<p className="blog-slider_description">
49+
{item.frontmatter.abstract}
50+
</p>
51+
<Button
52+
$secondary
53+
className="blog-slider_button"
54+
$url={
55+
item.frontmatter.eurl ||
56+
`/community/events/${slugify(item.frontmatter.title)}`
57+
}
58+
title="Join Now"
59+
$external={!!item.frontmatter.eurl}
60+
/>
4161
</div>
4262
</div>
4363
</SwiperSlide>
4464
);
4565
})}
4666
</Swiper>
47-
4867
</div>
4968
</div>
5069
</UpcomingEventsWrapper>

0 commit comments

Comments
 (0)