Skip to content

Commit 3bb6a33

Browse files
medyomedyo
committed
refactor: enhance AdvBanner component with improved props and layout adjustments
1 parent 7cf1214 commit 3bb6a33

3 files changed

Lines changed: 310 additions & 48 deletions

File tree

‎src/features/adv/components/AdvBanner.css‎

Lines changed: 232 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
1-
#banneradv * {
1+
.banneradv * {
22
margin: initial;
33
padding: initial;
44
}
5-
#banneradv {
5+
.banneradv {
66
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
77
'Helvetica Neue', Helvetica, Arial, sans-serif;
8-
}
9-
#banneradv {
108
display: flex;
9+
flex-direction: row;
10+
align-items: center;
11+
justify-content: center;
1112
max-width: 330px;
1213
z-index: 100;
1314
margin: 0 auto;
1415
}
15-
#banneradv a {
16+
.banneradv a {
1617
color: inherit;
1718
text-decoration: none;
1819
}
19-
#banneradv a:hover {
20+
.banneradv a:hover {
2021
color: inherit;
2122
}
22-
#banneradv span {
23+
.banneradv span {
2324
position: relative;
2425
display: block;
2526
overflow: hidden;
2627
}
27-
#banneradv .wrap {
28-
display: flex;
29-
}
30-
#banneradv .img {
28+
.banneradv .img {
3129
display: block;
3230
margin: 0;
3331
line-height: 1;
3432
}
35-
#banneradv .img img {
33+
.banneradv .img img {
3634
display: block;
3735
}
38-
#banneradv .text {
36+
.banneradv .text {
3937
font-size: 13px;
4038
padding: 10px;
4139
margin-bottom: 16px;
4240
line-height: 1.5;
4341
text-align: left;
4442
}
45-
#banneradv .poweredby {
43+
.banneradv .poweredby {
4644
display: block;
4745
padding: 6px 8px;
4846
background: inherit;
@@ -63,3 +61,223 @@
6361
height: 0;
6462
display: none;
6563
}
64+
65+
/* Carbon Cover */
66+
.carbonCoverTarget {
67+
max-width: 420px;
68+
}
69+
70+
.carbonCoverTarget a {
71+
text-decoration: none;
72+
color: inherit;
73+
}
74+
75+
.carbonCover {
76+
display: flex;
77+
flex-direction: row-reverse;
78+
padding: 1em 1em;
79+
overflow: hidden;
80+
box-sizing: border-box;
81+
height: 180px;
82+
border-radius: 8px;
83+
gap: 1em;
84+
font-size: 14px;
85+
position: relative;
86+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
87+
--gradient-direction: 135deg;
88+
}
89+
90+
.carbonCover:before {
91+
content: '';
92+
position: absolute;
93+
inset: 0;
94+
background-image: var(--ad-dynamic-bg-image);
95+
background-repeat: no-repeat;
96+
background-size: cover;
97+
background-position: center;
98+
filter: blur(10px);
99+
z-index: -1;
100+
}
101+
102+
.carbonCover:after {
103+
content: '';
104+
position: absolute;
105+
inset: 0;
106+
background: linear-gradient(
107+
var(--gradient-direction),
108+
color-mix(in srgb, var(--ad-gradient-color) 90%, transparent) 0%,
109+
color-mix(in srgb, var(--ad-gradient-color) 60%, transparent) 100%
110+
);
111+
z-index: 0;
112+
pointer-events: none;
113+
}
114+
115+
/* Ensure child elements appear above background layers */
116+
117+
.carbonCover > * {
118+
position: relative;
119+
z-index: 1;
120+
}
121+
122+
.carbonCoverImage {
123+
width: 80px;
124+
height: 80px;
125+
z-index: 2;
126+
object-fit: cover;
127+
border-radius: 10px;
128+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
129+
flex-shrink: 0;
130+
}
131+
132+
.carbonCoverMain {
133+
display: flex;
134+
gap: 0.5em;
135+
color: #fff;
136+
flex-grow: 1;
137+
flex-direction: column;
138+
text-shadow: 0 1px hsla(0, 0%, 0%, 0.2);
139+
min-width: 0;
140+
}
141+
142+
.carbonCoverLogo {
143+
max-width: 125px;
144+
}
145+
146+
.carbonCoverButton {
147+
background-color: #fff;
148+
white-space: nowrap;
149+
max-width: fit-content;
150+
position: absolute;
151+
bottom: 0;
152+
color: #111;
153+
border-radius: 4px;
154+
font-size: 0.875em;
155+
font-weight: 600;
156+
padding: 0.5em 1em;
157+
cursor: pointer;
158+
text-shadow: initial;
159+
transition: background-color 0.3s, color 0.3s;
160+
}
161+
162+
.carbonCoverTagline {
163+
font-weight: 500;
164+
width: 12em;
165+
line-height: 1.35;
166+
}
167+
168+
.carbonCoverDescription {
169+
opacity: 0;
170+
overflow: hidden;
171+
transform: translateY(-8px);
172+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
173+
width: 18em;
174+
line-height: 1.35;
175+
font-size: 0.875em;
176+
}
177+
178+
/* Hover and Focus States - Kansai & Flow Motion */
179+
.carbonCover:hover .carbonCoverDescription,
180+
.carbonCover:focus-within .carbonCoverDescription {
181+
opacity: 1;
182+
transform: translateY(0);
183+
transition-delay: 0.1s;
184+
}
185+
186+
.carbonCover:hover,
187+
.carbonCover:focus-within {
188+
transform: translateY(-2px);
189+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
190+
}
191+
192+
.carbonCover:hover .carbonCoverImage,
193+
.carbonCover:focus-within .carbonCoverImage {
194+
width: 90px;
195+
height: 90px;
196+
filter: brightness(1.05);
197+
}
198+
199+
.carbonCoverTarget .carbonAttribution {
200+
margin-block-start: 0.5em;
201+
display: block;
202+
text-align: right;
203+
color: hsla(0, 0%, 7%, 0.85);
204+
font-size: 12px;
205+
letter-spacing: 0.015ch;
206+
}
207+
208+
/* Apped flow-direction for small container width */
209+
210+
.carbonCoverTarget[flow-direction='column'] .carbonCover {
211+
flex-direction: column;
212+
min-height: 0;
213+
}
214+
215+
.carbonCoverTarget[flow-direction='column'] .carbonCoverImage {
216+
height: initial;
217+
width: initial;
218+
}
219+
220+
.carbonCoverTarget[flow-direction='column'] .carbonCover:hover .carbonCoverImage,
221+
.carbonCoverTarget[flow-direction='column'] .carbonCover:focus-within .carbonCoverImage {
222+
width: initial;
223+
height: initial;
224+
filter: brightness(1.05);
225+
}
226+
227+
.carbonCoverTarget[flow-direction='column'] .carbonCoverDescription {
228+
transform: translateY(0);
229+
}
230+
231+
.carbonCoverTarget[flow-direction='column'] .carbonCoverImage {
232+
width: 100%;
233+
max-width: 100%;
234+
}
235+
236+
.carbonCoverTarget[flow-direction='column'] .carbonCoverMain {
237+
gap: 0.5em;
238+
}
239+
240+
.carbonCoverTarget[flow-direction='column'] .carbonCoverButton {
241+
position: initial;
242+
}
243+
244+
.carbonCoverTarget[flow-direction='column'] .carbonCoverTagline,
245+
.carbonCoverTarget[flow-direction='column'] .carbonCoverDescription {
246+
width: 100%;
247+
max-width: 100%;
248+
}
249+
250+
.carbonCoverTarget[flow-direction='column'] .carbonCoverDescription {
251+
opacity: 1;
252+
}
253+
254+
.advFeed {
255+
display: flex;
256+
flex-direction: column;
257+
}
258+
.advFeed .carbonCoverTarget {
259+
width: 100%;
260+
max-width: none;
261+
}
262+
.advFeed .carbonCover {
263+
height: 255px;
264+
margin-bottom: 12px;
265+
}
266+
.advFeed .carbonCoverImage {
267+
width: 180px;
268+
height: 180px;
269+
}
270+
.advFeed .placeholder {
271+
padding: 0;
272+
height: 100%;
273+
}
274+
.advFeed .banneradv {
275+
flex-direction: column;
276+
align-items: center;
277+
justify-content: center;
278+
flex: 1;
279+
}
280+
281+
.advFeed:has(.banneradv) .rowDetails {
282+
margin-left: auto;
283+
}

0 commit comments

Comments
 (0)