monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-22 16:26:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

showing small message if ads are not working

Browse source
This commit is contained in:
Miodec 2022-07-22 13:32:19 +02:00
parent 130eb17ae7
commit 1940225f07
3 changed files with 60 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/styles/ads.scss
View file

@ -70,9 +70,19 @@
justify-content: center;
justify-self: center;
align-items: center;
grid-template-areas: "mid right";
.textLeft {
grid-area: left;
text-align: right;
display: none;
}
.textRight {
grid-area: right;
}
.icon {
width: unset;
height: unset;
grid-area: mid;
}
.text {
color: var(--sub-color);
@ -81,5 +91,12 @@
font-size: 0.7rem;
}
}
&.withLeft {
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left mid right";
.textLeft {
display: block;
}
}
}
}

54
frontend/src/ts/controllers/ad-controller.ts
View file

@ -131,30 +131,36 @@ export async function renderResult(): Promise<void> {
if (!initialised) {
init();
}
if (widerThanBreakpoint) {
// $("#ad-result-wrapper").html(`
// <div class="icon"><i class="fas fa-ad"></i></div>
// <div id="ad-result"></div>
// `);
// if ($("#ad-result-wrapper").is(":empty")) {
//@ts-ignore
// window.egAps.render(["ad-result"]);
// } else {
//@ts-ignore
window.egAps.refreshAds(["ad-result"]);
// }
} else {
// $("#ad-result-small-wrapper").html(`
// <div class="icon small"><i class="fas fa-ad"></i></div>
// <div id="ad-result-small"></div>
// `);
// if ($("#ad-result-small-wrapper").is(":empty")) {
//@ts-ignore
// window.egAps.render(["ad-result-small"]);
// } else {
//@ts-ignore
window.egAps.refreshAds(["ad-result-small"]);
// }
//@ts-ignore
if (window.egAps === undefined) return;
try {
if (widerThanBreakpoint) {
// $("#ad-result-wrapper").html(`
// <div class="icon"><i class="fas fa-ad"></i></div>
// <div id="ad-result"></div>
// `);
// if ($("#ad-result-wrapper").is(":empty")) {
//@ts-ignore
// window.egAps.render(["ad-result"]);
// } else {
//@ts-ignore
window.egAps.refreshAds(["ad-result"]);
// }
} else {
// $("#ad-result-small-wrapper").html(`
// <div class="icon small"><i class="fas fa-ad"></i></div>
// <div id="ad-result-small"></div>
// `);
// if ($("#ad-result-small-wrapper").is(":empty")) {
//@ts-ignore
// window.egAps.render(["ad-result-small"]);
// } else {
//@ts-ignore
window.egAps.refreshAds(["ad-result-small"]);
// }
}
} catch (e) {
$("#ad-result-wrapper .iconAndText").addClass("withLeft");
}
}

19
frontend/static/html/pages/test.html
View file

@ -305,16 +305,23 @@
</div>
<div id="ad-result-wrapper" class="ad advertisement ad-h">
<div class="iconAndText">
<div class="icon"><i class="fas fa-ad"></i></div>
<div class="text">
Using an ad blocker? No worries.
<div class="text textLeft">
Ads are not working? Whooops
<div class="smalltext">
The ads support the project, but we understand they can be
annoying.
Make sure to give your consent
<br />
(extensions could block the popup from showing)
</div>
</div>
<div class="icon"><i class="fas fa-ad"></i></div>
<div class="text textRight">
Using an ad blocker? No worries
<div class="smalltext">
We understand ads can be annoying
<br />
You can
<i>disable all ads</i>
in the settings.
in the settings
</div>
</div>
</div>