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
GitHub
parent
4bfab89292
commit
cd2f2d42a3
@ -54,6 +54,7 @@ html {
|
||||
--color-kbd-shadow: rgba(0, 0, 0, 0.25);
|
||||
|
||||
--color-ad: #d6e6f9;
|
||||
--color-ad-raised: #b1c8e4;
|
||||
|
||||
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
|
||||
--shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
|
||||
@ -145,7 +146,8 @@ html {
|
||||
|
||||
--color-kbd-shadow: rgba(0, 0, 0, 0.35);
|
||||
|
||||
--color-ad: #2c323a;
|
||||
--color-ad: #1f324a;
|
||||
--color-ad-raised: #2e4057;
|
||||
|
||||
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
|
||||
--shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
|
||||
|
||||
@ -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>
|
||||
1
generated/state.json
Normal file
1
generated/state.json
Normal file
File diff suppressed because one or more lines are too long
@ -284,7 +284,6 @@
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
<CookieConsent :mobile-menu-open="isBrowseMenuOpen" />
|
||||
<notifications
|
||||
group="main"
|
||||
position="bottom right"
|
||||
@ -338,10 +337,6 @@
|
||||
<a target="_blank" href="https://docs.modrinth.com">Docs</a>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<nuxt-link to="/settings/privacy" class="iconified-button">
|
||||
<ShieldIcon aria-hidden="true" />
|
||||
Privacy settings
|
||||
</nuxt-link>
|
||||
<button class="iconified-button" @click="changeTheme">
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
|
||||
<SunIcon v-else aria-hidden="true" />
|
||||
@ -362,7 +357,6 @@ import CrossIcon from '~/assets/images/utils/x.svg?inline'
|
||||
|
||||
import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
|
||||
import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
|
||||
import ShieldIcon from '~/assets/images/utils/shield.svg?inline'
|
||||
import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
|
||||
import HomeIcon from '~/assets/images/sidebar/home.svg?inline'
|
||||
|
||||
@ -375,8 +369,6 @@ import HeartIcon from '~/assets/images/utils/heart.svg?inline'
|
||||
|
||||
import GitHubIcon from '~/assets/images/utils/github.svg?inline'
|
||||
|
||||
import CookieConsent from '~/components/ads/CookieConsent'
|
||||
|
||||
const overflowStyle = 'scroll'
|
||||
|
||||
export default {
|
||||
@ -390,9 +382,7 @@ export default {
|
||||
HomeIcon,
|
||||
CrossIcon,
|
||||
HamburgerIcon,
|
||||
CookieConsent,
|
||||
SettingsIcon,
|
||||
ShieldIcon,
|
||||
ModerationIcon,
|
||||
PlusIcon,
|
||||
DropdownIcon,
|
||||
|
||||
@ -123,7 +123,6 @@ export default {
|
||||
title: 'Modrinth mods',
|
||||
},
|
||||
],
|
||||
script: [],
|
||||
},
|
||||
|
||||
vue: {
|
||||
|
||||
@ -461,12 +461,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Advertisement
|
||||
v-if="project.status === 'approved' || project.status === 'unlisted'"
|
||||
class="small-advertisement"
|
||||
type="square"
|
||||
small-screen="destroy"
|
||||
/>
|
||||
<div class="content">
|
||||
<div class="project-main">
|
||||
<div
|
||||
@ -515,6 +509,15 @@
|
||||
>, <a href="https://multimc.org/" target="_blank">MultiMC</a>, and
|
||||
<a href="https://polymc.org/" target="_blank">PolyMC</a>.
|
||||
</div>
|
||||
<Advertisement
|
||||
v-if="
|
||||
project.status === 'approved' || project.status === 'unlisted'
|
||||
"
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div class="card styled-tabs">
|
||||
<nuxt-link
|
||||
:to="`/${project.project_type}/${
|
||||
@ -562,15 +565,6 @@
|
||||
<span>Settings</span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<Advertisement
|
||||
v-if="
|
||||
project.status === 'approved' || project.status === 'unlisted'
|
||||
"
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div class="project-content">
|
||||
<NuxtChild
|
||||
:project.sync="project"
|
||||
@ -892,7 +886,6 @@ export default {
|
||||
'project-status'
|
||||
'content'
|
||||
'extra-info'
|
||||
'small-advert'
|
||||
/ 100%;
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
@ -900,7 +893,6 @@ export default {
|
||||
'header content' auto
|
||||
'project-status content' auto
|
||||
'extra-info content' auto
|
||||
'small-advert content' auto
|
||||
'dummy content' 1fr
|
||||
/ 20rem calc(100% - 20rem);
|
||||
|
||||
@ -909,7 +901,6 @@ export default {
|
||||
'content header' auto
|
||||
'content project-status' auto
|
||||
'content extra-info' auto
|
||||
'content small-advert' auto
|
||||
'content dummy' 1fr
|
||||
/ 1fr 20rem;
|
||||
}
|
||||
@ -1013,10 +1004,6 @@ export default {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
|
||||
.small-advertisement {
|
||||
grid-area: small-advert;
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
@ -235,6 +235,12 @@
|
||||
<a href="https://discord.gg/EUHuJHt" target="_blank">Discord</a>
|
||||
for support.
|
||||
</div>
|
||||
<Advertisement
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div class="card search-controls">
|
||||
<div class="iconified-input">
|
||||
<label class="hidden" for="search">Search</label>
|
||||
@ -292,12 +298,6 @@
|
||||
@switch-page="onSearchChange"
|
||||
></pagination>
|
||||
<div>
|
||||
<Advertisement
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div v-if="$fetchState.pending" class="no-results">
|
||||
<LogoAnimated aria-hidden="true" />
|
||||
<p>Loading...</p>
|
||||
|
||||
@ -14,9 +14,6 @@
|
||||
<nuxt-link v-if="$auth.user" class="tab" to="/settings/security">
|
||||
<span>Security</span>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="tab" to="/settings/privacy">
|
||||
<span>Privacy</span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<NuxtChild />
|
||||
</div>
|
||||
|
||||
@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="rows card">
|
||||
<div class="header">
|
||||
<h2 class="title">Privacy settings</h2>
|
||||
<div class="controls">
|
||||
<button class="iconified-button" @click="toggleAll(false)">
|
||||
<DenyIcon />
|
||||
Deny all
|
||||
</button>
|
||||
<button class="iconified-button" @click="toggleAll(true)">
|
||||
<AllowIcon />
|
||||
Allow all
|
||||
</button>
|
||||
<button
|
||||
class="brand-button-colors iconified-button"
|
||||
title="Confirm privacy settings"
|
||||
@click="confirm()"
|
||||
>
|
||||
<SaveIcon />
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="privacy-settings-container">
|
||||
<div>
|
||||
Modrinth relies on different providers and in-house tools to allow us to
|
||||
provide custom-tailored experiences and personalized advertising. You
|
||||
can change your privacy settings at any time by going to this settings
|
||||
page or via the footer of any page.
|
||||
</div>
|
||||
<br class="divider" />
|
||||
<div class="toggles">
|
||||
<div v-for="(scope, id) in scopes" :key="id" class="toggle">
|
||||
<div class="toggle-text">
|
||||
<div class="title">{{ scope.title }}</div>
|
||||
<div class="contents">
|
||||
{{ scope.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="toggle-action">
|
||||
<label :for="id"></label>
|
||||
<input
|
||||
:id="id"
|
||||
ref="toggles"
|
||||
v-model="scopes[id].value"
|
||||
type="checkbox"
|
||||
class="switch stylized-toggle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import toggles from '@/privacy-toggles'
|
||||
import DenyIcon from '~/assets/images/utils/clear.svg?inline'
|
||||
import AllowIcon from '~/assets/images/utils/check-circle.svg?inline'
|
||||
import SaveIcon from '~/assets/images/utils/save.svg?inline'
|
||||
|
||||
export default {
|
||||
auth: false,
|
||||
name: 'Privacy',
|
||||
components: {
|
||||
DenyIcon,
|
||||
AllowIcon,
|
||||
SaveIcon,
|
||||
},
|
||||
data: () => {
|
||||
const settings = toggles.settings
|
||||
return {
|
||||
scopes: settings,
|
||||
}
|
||||
},
|
||||
fetch() {
|
||||
this.$store.dispatch('consent/loadFromCookies', this.$cookies)
|
||||
if (this.$store.state.consent.is_consent_given) {
|
||||
Object.keys(toggles.settings).forEach((key) => {
|
||||
toggles.settings[key].value = false
|
||||
})
|
||||
// Load the allowed scopes from the store
|
||||
this.$store.state.consent.scopes_allowed.forEach((scope) => {
|
||||
if (this.scopes[scope] != null)
|
||||
this.$set(this.scopes[scope], 'value', true)
|
||||
})
|
||||
} else {
|
||||
Object.keys(toggles.settings).forEach((key) => {
|
||||
toggles.settings[key].value = toggles.settings[key].default
|
||||
})
|
||||
}
|
||||
},
|
||||
head: {
|
||||
title: 'Privacy Settings - Modrinth',
|
||||
},
|
||||
options: {
|
||||
auth: false,
|
||||
},
|
||||
methods: {
|
||||
toggleAll(value) {
|
||||
for (const elem in this.scopes) {
|
||||
this.scopes[elem].value = value
|
||||
this.$set(this.scopes[elem], 'value', value)
|
||||
}
|
||||
|
||||
this.$forceUpdate()
|
||||
this.confirm()
|
||||
},
|
||||
confirm() {
|
||||
this.$store.commit('consent/set_consent', true)
|
||||
for (const elem in this.scopes) {
|
||||
if (this.scopes[elem].value === true) {
|
||||
this.$store.commit('consent/add_scope', elem)
|
||||
} else {
|
||||
this.$store.commit('consent/remove_scope', elem)
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('consent/save', this.$cookies)
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'Saved',
|
||||
text: 'Your preferences have been saved successfully.',
|
||||
type: 'success',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.spacer {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
margin-right: -0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
button {
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-settings-container {
|
||||
.divider {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.toggles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.toggle-text {
|
||||
.title {
|
||||
color: var(--color-text-dark);
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contents {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.toggle-action {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
grid-area: header;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -69,6 +69,7 @@
|
||||
</aside>
|
||||
</div>
|
||||
<div class="normal-page__content">
|
||||
<Advertisement />
|
||||
<nav class="card user-navigation">
|
||||
<ThisOrThat v-model="selectedProjectType" :items="projectTypes" />
|
||||
<nuxt-link
|
||||
@ -80,12 +81,6 @@
|
||||
Create a project
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<Advertisement
|
||||
type="banner"
|
||||
small-screen="square"
|
||||
ethical-ads-small
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div v-if="projects.length > 0">
|
||||
<ProjectCard
|
||||
v-for="project in selectedProjectType !== 'all'
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
export default {
|
||||
settings: {
|
||||
ads: {
|
||||
title: 'Personalized ads',
|
||||
description: `Marketing and target cookies are usually used to show you advertisements that meet your interests.
|
||||
When you visit another website, your browser's cookie is recognized and selected ads are displayed to you based
|
||||
on the information stored in this cookie.`,
|
||||
default: true,
|
||||
},
|
||||
analytics: {
|
||||
title: 'Analytics',
|
||||
description: `Modrinth uses in-house tools that allow us to get insights into how each user is using the platform
|
||||
in order to improve the experience for everyone.\n By enabling this toggle, you allow us to gather information
|
||||
across requests. Disabling this toggle will simply remove all Personal Identifying Information from now on.`,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
const VERSION = 1
|
||||
const parameters = {
|
||||
maxAge: 60 * 60 * 24 * 365 * 10, // Ten years
|
||||
sameSite: 'Strict',
|
||||
secure: true,
|
||||
httpOnly: false,
|
||||
path: '/',
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
is_consent_given: false,
|
||||
scopes_allowed: [],
|
||||
loaded: false,
|
||||
})
|
||||
export const mutations = {
|
||||
loaded(state) {
|
||||
state.loaded = true
|
||||
},
|
||||
set_consent(state, val) {
|
||||
state.is_consent_given = val
|
||||
},
|
||||
add_scope(state, val) {
|
||||
// Check if the scope is not already provided
|
||||
if (state.scopes_allowed.includes(val)) return
|
||||
state.scopes_allowed.push(val)
|
||||
},
|
||||
remove_scope(state, val) {
|
||||
const pos = state.scopes_allowed.findIndex((el) => el === val)
|
||||
if (pos >= 0) state.scopes_allowed.splice(pos, 1)
|
||||
},
|
||||
}
|
||||
export const actions = {
|
||||
loadFromCookies(state, $cookies) {
|
||||
if (state.state.loaded) {
|
||||
return
|
||||
}
|
||||
state.commit('set_consent', $cookies.get('modrinth-consent') === true)
|
||||
const scopes = $cookies.get('modrinth-scopes')
|
||||
if (!scopes) return
|
||||
scopes.split(',').forEach((elem) => {
|
||||
state.commit('add_scope', elem)
|
||||
})
|
||||
state.commit('loaded')
|
||||
},
|
||||
save(state, $cookies) {
|
||||
$cookies.set('modrinth-consent', state.state.is_consent_given, parameters)
|
||||
$cookies.set('modrinth-version', VERSION, parameters)
|
||||
$cookies.set(
|
||||
'modrinth-scopes',
|
||||
state.state.scopes_allowed.join(','),
|
||||
parameters
|
||||
)
|
||||
},
|
||||
}
|
||||
export const getters = {
|
||||
is_scope_allowed: (state) => (id) => {
|
||||
return state.scopes_allowed.contains(id)
|
||||
},
|
||||
}
|
||||
@ -9,6 +9,7 @@ const parameters = {
|
||||
export const state = () => ({
|
||||
searchLayout: false,
|
||||
projectLayout: false,
|
||||
notUsingBlockers: false,
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
@ -18,6 +19,9 @@ export const mutations = {
|
||||
SET_PROJECT_LAYOUT(state, projectLayout) {
|
||||
state.projectLayout = projectLayout
|
||||
},
|
||||
SET_NOT_USING_BLOCKERS(state, notUsingBlockers) {
|
||||
state.notUsingBlockers = notUsingBlockers
|
||||
},
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user