Skip to content

Commit

Permalink
fix(pong): remove div/p (#11393)
Browse files Browse the repository at this point in the history 
* fix(pong): remove div/p

Remove an unnecessary p and resolve an
invalid DOM nesting issue.

* fix height if not inherited
  • Loading branch information
@fiji-flo
fiji-flo authored Jul 1, 2024
1 parent 2408a4d commit e27d2b8
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 128 deletions.
44 changes: 19 additions & 25 deletions client/src/playground/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,34 +242,28 @@ main.play {
min-height: 0;
width: 25rem;

> div {
.pong-cta {
margin: 0.5rem auto 1rem 1rem;
}
.pong-cta {
margin: 0.5rem auto 1rem 1rem;
}

.pong-note {
margin: 0.5rem 0.5rem auto auto;
}

.pong-note {
margin: 0.5rem 0.5rem auto auto;
.pong {
> img {
height: 100%;
width: auto;
}

.pong {
> img {
height: 100%;
width: auto;
}

> div.content {
align-items: end;
background: linear-gradient(
to left,
#111 16rem,
transparent
);
flex-direction: column;
height: 100%;
justify-content: end;
padding-left: 8rem;
width: 100%;
}
> div.content {
align-items: end;
background: linear-gradient(to left, #111 16rem, transparent);
flex-direction: column;
height: 100%;
justify-content: end;
padding-left: 8rem;
width: 100%;
}
}
}
Expand Down
134 changes: 66 additions & 68 deletions client/src/ui/organisms/placement/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,93 +14,89 @@ section.place {
--border-radius: 0.5rem;
border: 1px solid var(--border-primary);
border-radius: var(--border-radius);
height: 100%;
margin: 0;
min-height: 20rem;
overflow: hidden;
position: relative;
width: 11rem;

> div {
.pong-note {
background-color: #fff6;
border-radius: 0.25rem;
color: #fff;
font-size: 0.625rem;
margin: 0.5rem;
padding: 0 0.25rem;
position: absolute;
right: 0;
text-decoration: none;
text-decoration: underline;
text-transform: uppercase;
top: 0;
width: max-content;

&:hover {
background-color: #fff;
color: #111;
}
}

.pong {
height: 100%;
padding: 0;
width: 100%;

.pong-note {
background-color: #fff6;
border-radius: 0.25rem;
color: #fff;
font-size: 0.625rem;
margin: 0.5rem;
padding: 0 0.25rem;
position: absolute;
right: 0;
text-decoration: none;
text-decoration: underline;
text-transform: uppercase;
top: 0;
width: max-content;

&:hover {
background-color: #fff;
color: #111;
}
> img {
height: auto;
width: 100%;
}

.pong {
> div.content {
background: linear-gradient(to top, #111 9rem, transparent);
border-radius: var(--border-radius);
color: #fff;
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 100%;
padding: 0;
justify-content: end;
position: absolute;
top: 0;
width: 100%;

> img {
height: auto;
width: 100%;
strong {
font-size: 0.8875rem;
line-height: 1.25;
padding: 0 1rem;
}

> div.content {
background: linear-gradient(to top, #111 9rem, transparent);
border-radius: var(--border-radius);
color: #fff;
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 100%;
justify-content: end;
position: absolute;
top: 0;
width: 100%;

strong {
font-size: 0.8875rem;
line-height: 1.25;
padding: 0 1rem;
}

span {
font-size: 0.75rem;
line-height: 1.25;
padding: 0 1rem;
}
span {
font-size: 0.75rem;
line-height: 1.25;
padding: 0 1rem;
}

.pong-cta {
--color: #fff;
--icon-primary: var(--color);
background-color: #fff1;
border: solid 2px;
border-radius: 2rem;
color: var(--color);
font-size: 0.75rem;
font-weight: 600;
margin: 0.5rem auto 1rem 1rem;
padding: 0.5em 1em;
.pong-cta {
--color: #fff;
--icon-primary: var(--color);
background-color: #fff1;
border: solid 2px;
border-radius: 2rem;
color: var(--color);
font-size: 0.75rem;
font-weight: 600;
margin: 0.5rem auto 1rem 1rem;
padding: 0.5em 1em;
transition: all 0.3s ease-in-out;

&::after {
transition: all 0.3s ease-in-out;
}

&::after {
transition: all 0.3s ease-in-out;
}

&:hover {
--color: #111;
background-color: #fff;
}
&:hover {
--color: #111;
background-color: #fff;
}
}
}
Expand Down Expand Up @@ -175,11 +171,13 @@ section.place {

&.side {
flex-direction: column;
height: fit-content;
max-width: 12rem;
min-height: 20rem;
}

&.new-side {
height: fit-content;
min-height: 22rem;
}

Expand Down
68 changes: 33 additions & 35 deletions client/src/ui/organisms/placement/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,41 +515,39 @@ function RenderNewSideBanner({
className={["place", ...extraClassNames].join(" ")}
style={style}
>
<p className="pong-box2">
<div>
<a
className="pong"
data-glean={`pong: pong->click ${typ}`}
href={`/pong/click?code=${encodeURIComponent(
click
)}&version=${version}`}
target="_blank"
rel="sponsored noreferrer"
>
<img
src={`/pimg/${encodeURIComponent(image || "")}`}
aria-hidden={!Boolean(alt)}
alt={alt || ""}
width={imageWidth}
height={imageHeight}
></img>
<div className="content">
<strong>{heading}</strong>
<span>{copy}</span>
{cta && <span className="pong-cta external">{cta}</span>}
</div>
</a>
<a
href="/en-US/advertising"
className="pong-note"
data-glean="pong: pong->about"
target="_blank"
rel="noreferrer"
>
Ad
</a>
</div>
</p>
<div className="pong-box2">
<a
className="pong"
data-glean={`pong: pong->click ${typ}`}
href={`/pong/click?code=${encodeURIComponent(
click
)}&version=${version}`}
target="_blank"
rel="sponsored noreferrer"
>
<img
src={`/pimg/${encodeURIComponent(image || "")}`}
aria-hidden={!Boolean(alt)}
alt={alt || ""}
width={imageWidth}
height={imageHeight}
></img>
<div className="content">
<strong>{heading}</strong>
<span>{copy}</span>
{cta && <span className="pong-cta external">{cta}</span>}
</div>
</a>
<a
href="/en-US/advertising"
className="pong-note"
data-glean="pong: pong->about"
target="_blank"
rel="noreferrer"
>
Ad
</a>
</div>

<a
className="no-pong"
Expand Down

0 comments on commit e27d2b8

Please sign in to comment.