You've already forked AstralRinth
forked from didirus/AstralRinth
Try CarbonAds (#629)
* Try CarbonAds * Move location * add border, fix adblock msg * Fix advertisement label look (#636) Ever since changes for Carbon ads were introduced, the label did not match the appearance of the card, leaving the bottom right corner of the card not round. With more recent changes, where border was added, that became even more apparent - now the border covers the label, which does not look good; this effect only becomes worse when zooming. This commit attempts to mitigate these issues with the following: - To fix the border issues, label's absolute position is now calculated from the card wrapper, where the border is applied. This allows label to cover the border for seamless look. That is done by changing position of the card wrapper to relative instead of doing so for the ad contents container. - The label now tries to take over the border, to do so the bottom and right relative positions have been changed to -3px. - To account for the position change, the label is now a bit more padded, to make text content of it to look more or less as before, otherwise it would shift a bit. Not sure if the padding changes are accurate, but it does look close to how it looked before. * Fix message again * Update user ads position * Remove privacy toggles (placebo and didn't do anything) * Remove other code * Link docs page Co-authored-by: Sasha Sorokin <10401817+Brawaru@users.noreply.github.com>
This commit is contained in:
Geometrically
@@ -1,192 +1,188 @@
|
||||
<template>
|
||||
<div v-if="ethical_ads_on">
|
||||
<div v-if="ethical_ad_display && ethicalAdType === 'text'">
|
||||
<div
|
||||
:class="ethical_ad_style"
|
||||
data-ea-publisher="modrinth-com"
|
||||
:data-ea-type="ethicalAdType"
|
||||
data-ea-manual="true"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else-if="ethical_ad_display" class="ethical-wrapper">
|
||||
<div
|
||||
:class="ethical_ad_style"
|
||||
data-ea-publisher="modrinth-com"
|
||||
:data-ea-type="ethicalAdType"
|
||||
data-ea-manual="true"
|
||||
></div>
|
||||
<div class="info-wrapper">
|
||||
<div v-if="isBlocked" id="info-popup">
|
||||
<span>
|
||||
<span class="info-popup-wrap">
|
||||
<a
|
||||
class="info-popup-img"
|
||||
href="https://docs.modrinth.com/docs/details/carbon"
|
||||
>
|
||||
<img
|
||||
src="https://cdn.modrinth.com/barrier_fixes.png"
|
||||
alt="ads via Carbon"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://docs.modrinth.com/docs/details/carbon"
|
||||
class="info-popup-text"
|
||||
>
|
||||
Please disable your adblocker. Advertisements support this site and
|
||||
its creators.
|
||||
</a>
|
||||
</span>
|
||||
<a
|
||||
href="http://carbonads.net/?utm_source=modrinthcom&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon"
|
||||
class="info-popup-poweredby"
|
||||
target="_blank"
|
||||
rel="noopener sponsored"
|
||||
>ads via Carbon
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<script
|
||||
v-show="!isBlocked"
|
||||
id="_carbonads_js"
|
||||
async
|
||||
type="text/javascript"
|
||||
src="//cdn.carbonads.com/carbon.js?serve=CEAIKK3N&placement=modrinthcom"
|
||||
></script>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const sizes = {
|
||||
banner: {
|
||||
adUnit: 'banner',
|
||||
size: '728x90,468x60',
|
||||
},
|
||||
square: {
|
||||
adUnit: 'square',
|
||||
size: '250x250,200x200',
|
||||
},
|
||||
}
|
||||
|
||||
/* eslint-disable no-undef */
|
||||
export default {
|
||||
name: 'Advertisement',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
smallScreen: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
ethicalAdsBig: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
ethicalAdsSmall: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
ethicalAdType: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'text',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isDark: false,
|
||||
format: null,
|
||||
displayed: false,
|
||||
onSmallScreen: false,
|
||||
windowResizeListenerDebounce: null,
|
||||
ethicalAdLoad: null,
|
||||
ethicalAdTries: 0,
|
||||
isBlocked: false,
|
||||
}
|
||||
},
|
||||
head: {
|
||||
script: [
|
||||
{
|
||||
hid: 'ethical_ads_script',
|
||||
type: 'text/javascript',
|
||||
src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
|
||||
async: true,
|
||||
body: true,
|
||||
defer: true,
|
||||
}, // Insert in body
|
||||
],
|
||||
},
|
||||
computed: {
|
||||
ethical_ads_on() {
|
||||
return (
|
||||
this.$store.app.$config.ads.ethicalAds === 'true' &&
|
||||
(this.ethicalAdsSmall || this.ethicalAdsBig)
|
||||
)
|
||||
},
|
||||
hidden() {
|
||||
return this.$store.app.$config.ads.ethicalAds === 'true'
|
||||
},
|
||||
ethical_ad_display() {
|
||||
return (
|
||||
(this.onSmallScreen && this.ethicalAdsSmall) ||
|
||||
(!this.onSmallScreen && this.ethicalAdsBig)
|
||||
)
|
||||
},
|
||||
ethical_ad_style() {
|
||||
return {
|
||||
dark: this.isDark,
|
||||
raised: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Register hook on resize
|
||||
window.addEventListener('resize', this.handleWindowResize)
|
||||
this.isDark = this.$colorMode.value !== 'light'
|
||||
// Find ad
|
||||
if (!(this.type in sizes)) {
|
||||
console.error('Ad type not recognized.')
|
||||
return
|
||||
}
|
||||
// Set the informations
|
||||
this.format = sizes[this.type]
|
||||
this.displayed = true
|
||||
if (process.browser) {
|
||||
this.handleWindowResize()
|
||||
this.refresh_ad()
|
||||
if (!this.$store.state.cosmetics.notUsingBlockers) {
|
||||
setTimeout(() => this.checkAds(0), 1000)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleWindowResize() {
|
||||
clearTimeout(this.windowResizeListenerDebounce)
|
||||
this.windowResizeListenerDebounce = setTimeout(() => {
|
||||
if (window.innerWidth > 1024) {
|
||||
if (this.onSmallScreen) {
|
||||
// Return everything to normal size
|
||||
this.onSmallScreen = false
|
||||
this.format = sizes[this.type]
|
||||
this.displayed = true
|
||||
// Refresh ad
|
||||
this.refresh_ad()
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.onSmallScreen === false) {
|
||||
// Reload ad
|
||||
this.onSmallScreen = true
|
||||
this.refresh_ad()
|
||||
}
|
||||
this.onSmallScreen = true
|
||||
if (this.smallScreen === 'destroy') {
|
||||
this.displayed = false
|
||||
} else if (this.smallScreen in sizes) {
|
||||
console.log('Changing ad size to ', this.smallScreen)
|
||||
this.format = sizes[this.smallScreen]
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
refresh_ad() {
|
||||
if (this.ethical_ads_on) {
|
||||
this.ethicalAdTries++
|
||||
clearTimeout(this.ethicalAdLoad)
|
||||
checkAds(tries) {
|
||||
if (!window._carbonads) {
|
||||
this.isBlocked = true
|
||||
|
||||
if (this.ethicalAdTries <= 5) {
|
||||
this.ethicalAdLoad = setTimeout(() => {
|
||||
if (typeof window.ethicalads === 'undefined') {
|
||||
console.log('EthicalAds are not loaded yet, retrying...')
|
||||
this.refresh_ad()
|
||||
}
|
||||
ethicalads.load()
|
||||
}, 100)
|
||||
if (tries < 1000) {
|
||||
setTimeout(() => this.checkAds(tries + 1), 250)
|
||||
}
|
||||
} else {
|
||||
this.$store.state.cosmetics.commit('SET_NOT_USING_BLOCKERS', true)
|
||||
this.isBlocked = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ad-wrapper {
|
||||
width: 100%;
|
||||
// @extend %card;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: var(--spacing-card-md);
|
||||
justify-content: center;
|
||||
<style lang="scss">
|
||||
.do-not-style {
|
||||
position: absolute !important;
|
||||
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
min-height: 2px !important;
|
||||
height: 2px !important;
|
||||
max-height: 2px !important;
|
||||
|
||||
min-width: 2px !important;
|
||||
width: 2px !important;
|
||||
max-width: 2px !important;
|
||||
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.ethical-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.info-wrapper {
|
||||
min-height: 122px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-ad);
|
||||
margin-bottom: var(--spacing-card-md);
|
||||
justify-content: center;
|
||||
border-radius: var(--size-rounded-card);
|
||||
|
||||
border: 3px solid var(--color-ad-raised);
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#carbonads_1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#carbonads,
|
||||
#info-popup {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
|
||||
font-size: 22px;
|
||||
box-sizing: content-box;
|
||||
|
||||
padding: var(--spacing-card-sm) var(--spacing-card-sm);
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-wrap,
|
||||
.info-popup-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carbon-img,
|
||||
.info-popup-img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: auto;
|
||||
border-radius: var(--size-rounded-card);
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-text,
|
||||
.info-popup-text {
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.carbon-poweredby,
|
||||
.info-popup-poweredby {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
background: var(--color-ad-raised);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1ch;
|
||||
font-weight: 600;
|
||||
font-size: 0.5em;
|
||||
line-height: 1;
|
||||
border-top-left-radius: var(--size-rounded-card);
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
border-bottom-right-radius: var(--size-rounded-card);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 759px) {
|
||||
.carbon-text,
|
||||
.info-popup-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
ref="container"
|
||||
class="container"
|
||||
:class="{ 'mobile-menu-open': mobileMenuOpen }"
|
||||
:style="{
|
||||
visibility: shown ? 'visible' : 'hidden',
|
||||
}"
|
||||
>
|
||||
<div class="card banner">
|
||||
<span>
|
||||
Modrinth uses cookies for various purposes. We encourage you to review
|
||||
your privacy settings by clicking on the button below:
|
||||
</span>
|
||||
<div class="actions">
|
||||
<button class="btn button" @click="review">Review</button>
|
||||
<button class="btn brand-button" @click="hide">Accept all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scopes from '~/privacy-toggles'
|
||||
export default {
|
||||
name: 'CookieConsent',
|
||||
props: {
|
||||
mobileMenuOpen: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shown: false,
|
||||
}
|
||||
},
|
||||
fetch() {
|
||||
this.checkVisibility()
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.checkVisibility()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkVisibility() {
|
||||
this.$store.dispatch('consent/loadFromCookies', this.$cookies)
|
||||
|
||||
this.shown =
|
||||
!this.$store.state.consent.is_consent_given &&
|
||||
this.$route.path !== '/settings/privacy'
|
||||
},
|
||||
hide() {
|
||||
this.$store.commit('consent/set_consent', true)
|
||||
// Accept all scopes
|
||||
for (const elem in scopes.settings) {
|
||||
this.$store.commit('consent/add_scope', elem)
|
||||
}
|
||||
this.$store.dispatch('consent/save', this.$cookies)
|
||||
|
||||
this.shown = false
|
||||
},
|
||||
review() {
|
||||
this.shown = false
|
||||
this.$router.push('/settings/privacy')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.banner {
|
||||
font-size: 1.05rem;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
|
||||
padding: 1rem 1rem calc(var(--size-mobile-navbar-height) + 1rem);
|
||||
transition: padding-bottom 0.25s ease-in-out;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1rem;
|
||||
justify-content: center;
|
||||
|
||||
.btn {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.mobile-menu-open {
|
||||
.banner {
|
||||
padding-bottom: calc(var(--size-mobile-navbar-height-expanded) + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.banner {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
&.mobile-menu-open {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
width: unset;
|
||||
text-align: unset;
|
||||
|
||||
.banner {
|
||||
border-radius: var(--size-rounded-card);
|
||||
width: 18vw;
|
||||
min-width: 16rem;
|
||||
border-left: solid 5px var(--color-brand);
|
||||
margin: 0 2rem 2rem 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
justify-content: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user