Skip to content

Commit

Permalink
Fix Safari Bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamieBradders
JamieBradders authored Sep 6, 2024
2 parents 3efea52 + 8861e13 commit a9681ce
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 86 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<script src="/script.js" type="module"></script>

<script>
const uniqueId = "9cb7fd79-14ae-4779-bb28-60a8713626ba"; // Replace with your own placement ID
const uniqueId = "9d4d328d-160d-4d54-9968-ddb365ab8761"; // Replace with your own placement ID
const containerId = "adverts-container"; // Replace if you used a different ID in the HTML

window.onload = function () {
Expand Down
50 changes: 49 additions & 1 deletion templates/lazy-ladybird/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,55 @@

<div id="rga_ad-wrapper" style="max-width: 80rem; margin: 0 auto">
<div class="rga_card-ad-wrap">
<article class="rga_card-ad-template rga_card-ad-template--offset-3">
<article class="rga_card-ad-template">
<h2 class="rga_card-ad-template__title">
Ipsum laborum esse excepteur aute consequat
</h2>

<div class="rga_card-ad-template__image-wrap">
<img
src="https://images.unsplash.com/photo-1558898268-92ae44e7670e?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_card-ad-template__image"
/>
</div>

<div class="rga_card-ad-template__content">
<div class="rga_card-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet ea
elit irure dolore. Culpa pariatur nisi nostrud est laboris aute
nisi nisi laborum ea Lorem.
</div>
</div>

<a href="#" class="rga_card-ad-template__cta">Learn More</a>
</article>

<article class="rga_card-ad-template">
<h2 class="rga_card-ad-template__title">
Ipsum laborum esse excepteur aute consequat
</h2>

<div class="rga_card-ad-template__image-wrap">
<img
src="https://images.unsplash.com/photo-1558898268-92ae44e7670e?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_card-ad-template__image"
/>
</div>

<div class="rga_card-ad-template__content">
<div class="rga_card-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet ea
elit irure dolore. Culpa pariatur nisi nostrud est laboris aute
nisi nisi laborum ea Lorem.
</div>
</div>

<a href="#" class="rga_card-ad-template__cta">Learn More</a>
</article>

<article class="rga_card-ad-template">
<h2 class="rga_card-ad-template__title">
Ipsum laborum esse excepteur aute consequat
</h2>
Expand Down
1 change: 0 additions & 1 deletion templates/lazy-ladybird/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
.rga_card-ad-wrap {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));

gap: var(--rga-wrap-spacing);
padding: var(--rga-wrap-spacing);

Expand Down
86 changes: 45 additions & 41 deletions templates/weary-wolverine/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,59 +25,63 @@
<div class="rga_simple-ad-wrap">
<!-- Simple Template -->
<article class="rga_simple-ad-template">
<h2
class="rga_simple-ad-template__title rga_simple-ad-template__title--mobile"
>
Ipsum laborum esse excepteur aute consequat
</h2>

<div class="rga_simple-ad-template__image-wrap">
<img
src="https://images.unsplash.com/photo-1558898268-92ae44e7670e?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_simple-ad-template__image"
/>
</div>

<div class="rga_simple-ad-template__content">
<h3
class="rga_simple-ad-template__title rga_simple-ad-template__title--desktop"
<div class="rga_simple-ad-template__grid">
<h2
class="rga_simple-ad-template__title rga_simple-ad-template__title--mobile"
>
Ipsum laborum esse excepteur aute consequat
</h3>
</h2>

<div class="rga_simple-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet ea
elit irure dolore. Culpa pariatur nisi nostrud est laboris aute
nisi nisi laborum ea Lorem.
<div class="rga_simple-ad-template__image-wrap">
<img
src="https://images.unsplash.com/photo-1558898268-92ae44e7670e?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_simple-ad-template__image"
/>
</div>

<div class="rga_simple-ad-template__content">
<h3
class="rga_simple-ad-template__title rga_simple-ad-template__title--desktop"
>
Ipsum laborum esse excepteur aute consequat
</h3>

<div class="rga_simple-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet
ea elit irure dolore. Culpa pariatur nisi nostrud est laboris
aute nisi nisi laborum ea Lorem.
</div>
</div>
</div>

<a href="#" class="rga_simple-ad-template__cta">Learn More</a>
<a href="#" class="rga_simple-ad-template__cta">Learn More</a>
</div>
</article>

<!-- Simple Template -->
<article class="rga_simple-ad-template">
<div class="rga_simple-ad-template__image-wrap">
<img
src="https://plus.unsplash.com/premium_photo-1682095926736-d90023908060?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_simple-ad-template__image"
/>
</div>
<div class="rga_simple-ad-template__grid">
<div class="rga_simple-ad-template__image-wrap">
<img
src="https://plus.unsplash.com/premium_photo-1682095926736-d90023908060?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
class="rga_simple-ad-template__image"
/>
</div>

<div class="rga_simple-ad-template__content">
<h2 class="rga_simple-ad-template__title">
Ipsum laborum esse excepteur aute consequat
</h2>
<div class="rga_simplete-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet ea
elit irure dolore. Culpa pariatur nisi nostrud est laboris aute
nisi nisi laborum ea Lorem.
<div class="rga_simple-ad-template__content">
<h2 class="rga_simple-ad-template__title">
Ipsum laborum esse excepteur aute consequat
</h2>
<div class="rga_simplete-ad-template__body">
Proident esse minim ut voluptate aliqua nulla adipisicing amet
ea elit irure dolore. Culpa pariatur nisi nostrud est laboris
aute nisi nisi laborum ea Lorem.
</div>
</div>
</div>

<a href="#" class="rga_simple-ad-template__cta">Learn More</a>
<a href="#" class="rga_simple-ad-template__cta">Learn More</a>
</div>
</article>
</div>
</div>
Expand Down
16 changes: 9 additions & 7 deletions templates/weary-wolverine/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,16 @@
border-radius: var(--rga-ad-border-radius);
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--rga-ad-spacing);
max-width: var(--rga-ad-max-width);
width: 100%;
margin: 0 auto;
padding: var(--rga-ad-padding);
text-align: center;
}

.rga_simple-ad-template .rga_simple-ad-template__grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--rga-ad-spacing);

@media screen and (min-width: 768px) {
grid-template-columns: repeat(8, minmax(0, 1fr));
Expand All @@ -56,7 +58,6 @@
}

.rga_simple-ad-template .rga_simple-ad-template__content {
align-self: center;
grid-column: span 1 / span 1;

@media screen and (min-width: 768px) {
Expand Down Expand Up @@ -92,10 +93,11 @@
background-color: #ececec;
border-radius: var(--rga-ad-border-radius);
grid-column: span 1 / span 1;
height: 100%;
width: 100%;
}

@media screen and (min-width: 768px) {
@media screen and (min-width: 768px) {
.rga_simple-ad-template .rga_simple-ad-template__image-wrap {
grid-column: span 2 / span 2;
}
}
Expand Down
72 changes: 37 additions & 35 deletions templates/weary-wolverine/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,50 @@ export const renderSimpleTemplate = ({ adverts }) => {
.map((advert) => {
return `
<article class="rga_simple-ad-template">
<h2 class="rga_simple-ad-template__title rga_simple-ad-template__title--mobile">
${advert.title}
</h2>
<div class="rga_simple-ad-template__image-wrap">
${
advert.image_url &&
`
<img
src="${advert.image_url}"
alt=""
class="rga_simple-ad-template__image"
/>
`
}
</div>
<div class="rga_simple-ad-template__content">
<h3
class="rga_simple-ad-template__title rga_simple-ad-template__title--desktop"
>
<div class="rga_simple-ad-template__grid">
<h2 class="rga_simple-ad-template__title rga_simple-ad-template__title--mobile">
${advert.title}
</h3>
</h2>
<div class="rga_simple-ad-template__body">
<div class="rga_simple-ad-template__image-wrap">
${
advert.description?.length > 1
? `
<ul class="rga_simple-ad-template__list">
${advert.description
.map((item) => `<li>${item}</li>`)
.join("")}
</ul>
advert.image_url &&
`
: advert.description[0]
<img
src="${advert.image_url}"
alt=""
class="rga_simple-ad-template__image"
/>
`
}
</div>
</div>
<a href="${
advert.click_url
}" class="rga_simple-ad-template__cta">${advert.cta_text}</a>
<div class="rga_simple-ad-template__content">
<h3
class="rga_simple-ad-template__title rga_simple-ad-template__title--desktop"
>
${advert.title}
</h3>
<div class="rga_simple-ad-template__body">
${
advert.description?.length > 1
? `
<ul class="rga_simple-ad-template__list">
${advert.description
.map((item) => `<li>${item}</li>`)
.join("")}
</ul>
`
: advert.description[0]
}
</div>
</div>
<a href="${
advert.click_url
}" class="rga_simple-ad-template__cta">${advert.cta_text}</a>
</div>
</article>
`;
})
Expand Down

0 comments on commit a9681ce

Please sign in to comment.