Skip to content

Commit 49ffcae

Browse files
author
Saloni Tarone
committed
Add a Responsive styling
Signed-off-by: Saloni Tarone <[email protected]>
1 parent 5176139 commit 49ffcae

File tree

1 file changed

+149
-72
lines changed

1 file changed

+149
-72
lines changed

‎src/components/Inline-quotes/index.js‎

Lines changed: 149 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,127 +2,204 @@ import React, { useState, useEffect } from "react";
22
import styled from "styled-components";
33
import { useInView } from "react-intersection-observer";
44

5-
6-
75
const QuotesWrapper = styled.div`
6+
margin: 5% 0%;
7+
text-align: center;
8+
padding: 0 1rem;
89
9-
margin: 5% 0%;
10-
text-align: center;
11-
.quote-box {
10+
.quote-box {
1211
display: flex;
1312
flex-direction: row;
1413
flex: 1 1 0;
1514
text-align: center;
1615
align-items: center;
1716
padding: 2rem;
1817
border: 2px solid transparent;
19-
border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to right bottom, #00b39f, #121212 80%)" : "linear-gradient(to right bottom, #00b39f, #fff 80%)"} ;
18+
border-image: ${props => props.theme.DarkTheme
19+
? "linear-gradient(to right bottom, #00b39f, #121212 80%)"
20+
: "linear-gradient(to right bottom, #00b39f, #fff 80%)"};
2021
border-image-slice: 1 0 1 1;
2122
transition: border 0.2s ease-in-out;
23+
gap: 1.5rem;
24+
25+
@media screen and (max-width: 768px) {
26+
flex-direction: column;
27+
padding: 1.5rem 1rem;
28+
gap: 1rem;
29+
}
30+
2231
@media screen and (max-width: 500px) {
23-
flex-direction: column;
32+
padding: 1rem 0.75rem;
2433
}
2534
2635
h4 {
27-
text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
28-
flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
29-
color: ${props => props.theme.primaryColor};
30-
font-weight: 100;
31-
font-style: italic;
32-
@media screen and (max-width: 600px) {
33-
font-size: 1rem;
34-
}
35-
@media screen and (max-width: 500px) {
36-
text-align: center;
37-
flex: 0 0 100%;
38-
}
36+
text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
37+
flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
38+
color: ${props => props.theme.primaryColor};
39+
font-weight: 100;
40+
font-style: italic;
41+
font-size: 1.25rem;
42+
line-height: 1.6;
43+
margin: 0;
44+
45+
@media screen and (max-width: 768px) {
46+
text-align: center;
47+
flex: 0 0 100%;
48+
font-size: 1.1rem;
49+
}
50+
51+
@media screen and (max-width: 500px) {
52+
font-size: 1rem;
53+
line-height: 1.5;
54+
}
3955
}
40-
}
56+
}
4157
42-
.border {
43-
border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to left top, #00b39f, #121212 80%)" : "linear-gradient(to left top, #00b39f, #fff 80%)"} ;
58+
.border {
59+
border-image: ${props => props.theme.DarkTheme
60+
? "linear-gradient(to left top, #00b39f, #121212 80%)"
61+
: "linear-gradient(to left top, #00b39f, #fff 80%)"};
4462
border-image-slice: 1 1 1 0;
4563
transition: 0.6s ease-in-out;
46-
}
47-
img{
64+
}
65+
66+
img {
4867
border-radius: 50%;
49-
width: 6vw;
50-
height: 6vw;
51-
object-fit: contain;
52-
@media screen and (max-width: 1300px) {
53-
height: 5rem;
54-
width: 5rem;
68+
width: 96px;
69+
height: 96px;
70+
min-width: 96px;
71+
min-height: 96px;
72+
object-fit: cover;
73+
flex-shrink: 0;
74+
75+
@media screen and (max-width: 768px) {
76+
width: 80px;
77+
height: 80px;
78+
min-width: 80px;
79+
min-height: 80px;
80+
}
81+
82+
@media screen and (max-width: 500px) {
83+
width: 72px;
84+
height: 72px;
85+
min-width: 72px;
86+
min-height: 72px;
5587
}
56-
}
88+
}
5789
58-
.quote-source {
90+
.quote-source {
5991
display: flex;
6092
flex: 2 1 0;
6193
padding: 0 1rem;
6294
flex-direction: column;
63-
@media screen and (max-width: 500px) {
64-
text-align: center;
95+
justify-content: center;
96+
text-align: left;
97+
98+
@media screen and (max-width: 768px) {
99+
text-align: center;
100+
padding: 0;
65101
}
66102
67103
h5 {
68-
font-weight: bold;
69-
70-
padding:0.1rem;
71-
text-transform: uppercase;
72-
@media screen and (max-width: 600px) {
73-
margin-top: 1rem;
74-
font-size: 1rem;
75-
}
104+
font-weight: bold;
105+
padding: 0.1rem;
106+
margin: 0 0 0.5rem 0;
107+
text-transform: uppercase;
108+
font-size: 1rem;
109+
110+
@media screen and (max-width: 768px) {
111+
font-size: 0.95rem;
112+
}
113+
114+
@media screen and (max-width: 500px) {
115+
font-size: 0.875rem;
116+
}
76117
}
118+
77119
p {
78-
@media screen and (max-width: 600px) {
79-
font-size: 0.75rem;
80-
line-height: 1.25rem;
81-
}
120+
margin: 0;
121+
font-size: 0.9rem;
122+
line-height: 1.4;
123+
124+
@media screen and (max-width: 768px) {
125+
font-size: 0.85rem;
126+
}
127+
128+
@media screen and (max-width: 500px) {
129+
font-size: 0.8rem;
130+
line-height: 1.3;
131+
}
82132
}
83-
}
133+
}
84134
85-
hr {
135+
hr {
86136
height: 5rem;
87-
margin: 0% 3%;
137+
margin: 0;
138+
border: none;
139+
border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
140+
align-self: stretch;
141+
142+
@media screen and (max-width: 768px) {
143+
height: 0;
144+
width: 60%;
145+
max-width: 200px;
146+
margin: 0.5rem auto;
147+
border-left: none;
148+
border-top: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
149+
}
150+
88151
@media screen and (max-width: 500px) {
89-
margin: 5% 0%;
90-
height: 0;
91-
width: 40vw;
152+
width: 50%;
153+
max-width: 150px;
92154
}
93-
}
94-
`;
155+
}
95156
96-
const InlineQuotes = ({ person, title, quote,image }) => {
157+
.author-section {
158+
display: flex;
159+
flex-direction: row;
160+
align-items: center;
161+
gap: 1rem;
162+
163+
@media screen and (max-width: 768px) {
164+
flex-direction: column;
165+
gap: 0.75rem;
166+
}
167+
}
168+
`;
97169

98-
const [quoteRef, inView] = useInView({ threshold: 1.0 });
170+
const InlineQuotes = ({ person, title, quote, image }) => {
171+
const [quoteRef, inView] = useInView({ threshold: 0.5 });
99172
const [quoteInView, setquoteInView] = useState(false);
173+
100174
useEffect(() => {
101-
if (inView && !quoteInView)
175+
if (inView && !quoteInView) {
102176
setquoteInView(true);
103-
else if (quoteInView && !inView)
177+
} else if (quoteInView && !inView) {
104178
setquoteInView(false);
179+
}
105180
}, [inView, quoteInView]);
106181

107182
return (
108183
<QuotesWrapper $onlyQuoteIsPresent={!(image || person || title)}>
109184
<div className={quoteInView ? "quote-box border" : "quote-box"} ref={quoteRef}>
110185
<h4>❝ {quote} ❞</h4>
111186
{(image || person || title) && <hr />}
112-
{
113-
image &&
114-
<img
115-
src={image}
116-
alt={`${person || "Quote author"}`}
117-
width="96"
118-
height="96"
119-
style={{ objectFit: "cover" }}
120-
/>
121-
}
122-
<div className="quote-source">
123-
<h5>{person}</h5>
124-
<p>{title}</p>
125-
</div>
187+
{(image || person || title) && (
188+
<div className="author-section">
189+
{image && (
190+
<img
191+
src={image}
192+
alt={`${person || "Quote author"}`}
193+
width="96"
194+
height="96"
195+
/>
196+
)}
197+
<div className="quote-source">
198+
{person && <h5>{person}</h5>}
199+
{title && <p>{title}</p>}
200+
</div>
201+
</div>
202+
)}
126203
</div>
127204
</QuotesWrapper>
128205
);

0 commit comments

Comments
 (0)