eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Try CarbonAds (#629)

Browse Source 
* 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
2022-09-08 17:33:13 -07:00
committed by GitHub
parent 4bfab89292
commit cd2f2d42a3
14 changed files with 184 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
pages/_type/_id.vue
View File

@@ -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;
}

12
pages/search.vue
View File

@@ -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>

3
pages/settings.vue
View File

@@ -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>

212
pages/settings/privacy.vue
View File

@@ -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>

7
pages/user/_id.vue
View File

@@ -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'