Skip to content

Commit 9f7db36

Browse files
Copilotconorheffron
Copilot
and
conorheffron
authored
Frontend: improve carousel tile resizing for mobile/tablet (font size, wrap, overflow)
Agent-Logs-Url: https://github.com/conorheffron/ironoc/sessions/42d6f215-d0a0-44fa-bd62-e57752ce027a Co-authored-by: conorheffron <8218626+conorheffron@users.noreply.github.com>
1 parent 5266ae1 commit 9f7db36

3 files changed

Lines changed: 95 additions & 40 deletions

File tree

‎frontend/src/App.css‎

Lines changed: 90 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,42 @@
9090
font-family: "Open Sans";
9191
}
9292

93+
.carousel-caption h1 {
94+
font-size: clamp(0.9rem, 3vw, 1.5rem);
95+
word-wrap: break-word;
96+
overflow-wrap: break-word;
97+
}
98+
99+
.carousel-caption h2 {
100+
font-size: clamp(0.8rem, 2.5vw, 1.25rem);
101+
word-wrap: break-word;
102+
overflow-wrap: break-word;
103+
}
104+
93105
.carousel-caption h3 {
94106
color: navy;
107+
font-size: clamp(0.85rem, 2.5vw, 1.1rem);
108+
word-wrap: break-word;
109+
overflow-wrap: break-word;
110+
}
111+
112+
.carousel-caption h4 {
113+
font-size: clamp(0.75rem, 2vw, 1rem);
114+
word-wrap: break-word;
115+
overflow-wrap: break-word;
95116
}
96117

97118
.carousel-caption h5 {
98119
color: navy;
120+
font-size: clamp(0.75rem, 2vw, 1rem);
121+
word-wrap: break-word;
122+
overflow-wrap: break-word;
123+
}
124+
125+
.carousel-caption p {
126+
font-size: clamp(0.7rem, 1.8vw, 1rem);
127+
word-wrap: break-word;
128+
overflow-wrap: break-word;
99129
}
100130

101131
p a {
@@ -106,7 +136,7 @@ footer p a {
106136
color: blue;
107137
}
108138

109-
.carousel-caption h3, h5 {
139+
.carousel-caption h3, .carousel-caption h5 {
110140
background-color:yellow;
111141
width: 50%;
112142
height: auto;
@@ -120,13 +150,68 @@ footer p a {
120150
}
121151

122152
.overview-text {
123-
display: block;
124-
font-size: 1rem; /* Adjust the base font-size as needed */
153+
display: -webkit-box;
154+
-webkit-line-clamp: 3;
155+
-webkit-box-orient: vertical;
156+
font-size: clamp(0.7rem, 1.8vw, 1rem);
125157
line-height: 1.5;
126158
white-space: normal;
127159
word-wrap: break-word;
128160
overflow-wrap: break-word;
129-
max-height: 200px; /* Set a max height to avoid overflow */
130161
overflow: hidden;
131-
text-overflow: ellipsis; /* Add ellipsis for text overflow */
162+
text-overflow: ellipsis;
163+
}
164+
165+
@media (max-width: 768px) {
166+
.carousel-caption {
167+
padding: 8px;
168+
}
169+
170+
.carousel-caption h1 {
171+
font-size: clamp(0.8rem, 2.5vw, 1.1rem);
172+
}
173+
174+
.carousel-caption h2 {
175+
font-size: clamp(0.7rem, 2vw, 0.95rem);
176+
}
177+
178+
.carousel-caption h4 {
179+
font-size: clamp(0.65rem, 1.8vw, 0.875rem);
180+
}
181+
182+
.carousel-caption p {
183+
font-size: clamp(0.65rem, 1.8vw, 0.875rem);
184+
}
185+
186+
.overview-text {
187+
-webkit-line-clamp: 2;
188+
font-size: clamp(0.65rem, 1.8vw, 0.875rem);
189+
}
190+
}
191+
192+
@media (max-width: 576px) {
193+
.carousel-caption {
194+
padding: 4px;
195+
}
196+
197+
.carousel-caption h1 {
198+
font-size: 0.875rem;
199+
}
200+
201+
.carousel-caption h2 {
202+
display: none;
203+
}
204+
205+
.carousel-caption h4 {
206+
display: none;
207+
}
208+
209+
.carousel-caption p {
210+
font-size: 0.7rem;
211+
}
212+
213+
.overview-text {
214+
-webkit-line-clamp: 1;
215+
font-size: 0.7rem;
216+
}
132217
}

‎frontend/src/components/ControlledCarousel.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ class ControlledCarousel extends Component {
6262
<a href={item.link} target="_blank" rel="noreferrer">
6363
<img className="d-block w-100" src={handleColor(item.img)} alt={item.alt} />
6464
<Carousel.Caption>
65-
<h1><u>{item.title}</u></h1>
66-
<h2>{item.description}</h2>
65+
<h1 className="carousel-caption-title"><u>{item.title}</u></h1>
66+
<h2 className="carousel-caption-description">{item.description}</h2>
6767
<br /><br />
68-
<h4><b>Tech Stack:</b></h4>
69-
<h4>{item.techStack}</h4>
68+
<h4 className="carousel-caption-tech"><b>Tech Stack:</b></h4>
69+
<h4 className="carousel-caption-tech">{item.techStack}</h4>
7070
</Carousel.Caption>
7171
</a>
7272
</Carousel.Item>

‎frontend/src/components/Donate.js‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ class Donate extends Component {
8989
<img className="d-block w-100" src={red} alt={item.alt} />
9090

9191
<Carousel.Caption>
92-
<h1 className="mb-3">
92+
<h1 className="carousel-caption-title mb-3">
9393
<span style={{ textDecoration: 'underline' }}>{item.name}</span>
9494
</h1>
9595

@@ -131,36 +131,6 @@ class Donate extends Component {
131131
</Container>
132132
</div>
133133
);
134-
return (
135-
<div className="App">
136-
<AppNavbar />
137-
<Container>
138-
<Carousel className="App-header">
139-
{donateItems.map((item, index) => (
140-
<Carousel.Item key={index} interval={500}>
141-
<a href={item.donate} target="_blank" rel="noreferrer">
142-
<img className="d-block w-100" src={red} alt={item.alt} />
143-
<Carousel.Caption>
144-
<h1>
145-
<u>{item.name}</u>
146-
</h1><br />
147-
<h8>
148-
<b>Contact & Help by Phone: </b><span dangerouslySetInnerHTML={{ __html: item.phone }} />
149-
</h8><br />
150-
<h7>
151-
<b>Home page: </b><a href={item.link} target="_blank" rel="noreferrer">{item.link}</a>
152-
</h7><br /><br />
153-
<h11 className="overview-text">
154-
<b>Overview:</b> Founded in {item.founded}, {item.overview}
155-
</h11>
156-
</Carousel.Caption>
157-
</a>
158-
</Carousel.Item>
159-
))}
160-
</Carousel>
161-
</Container>
162-
</div>
163-
);
164134
}
165135
}
166136

0 commit comments

Comments
 (0)