You've already forked AstralRinth
forked from didirus/AstralRinth
Tooltips, alternate ad text, better error messages
This commit is contained in:
Jai A
@@ -1,10 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="ethical-ad"
|
||||
data-ea-publisher="modrinth-com"
|
||||
:data-ea-type="type"
|
||||
data-ea-manual="true"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
v-if="!showAlt"
|
||||
class="ethical-ad"
|
||||
data-ea-publisher="modrinth-com"
|
||||
:data-ea-type="type"
|
||||
data-ea-manual="true"
|
||||
/>
|
||||
<div v-else class="alt">
|
||||
<p>
|
||||
A privacy-focused ad used to fund this site used to be here. Please
|
||||
disable your content blocker to support Modrinth and it's authors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -16,13 +25,35 @@ export default {
|
||||
default: 'text',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAlt: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
try {
|
||||
// eslint-disable-next-line no-undef
|
||||
ethicalads.load()
|
||||
if (typeof ethicalads === 'undefined') {
|
||||
this.$notify({
|
||||
group: 'ads',
|
||||
title: 'Please disable your Content Blocker',
|
||||
text:
|
||||
'Modrinth uses privacy-focused ads, from EthicalAds. Ads are the only way that our site is able to pay modders and support itself. Our ads are non-intrusive and minimal, and we only have one per page. We can assure you that none of your data is sold or used for tracking purposes.',
|
||||
type: 'error',
|
||||
})
|
||||
|
||||
const element = document.getElementsByClassName('ethical-ad')
|
||||
element[0].className = 'ethical-ad loaded ' + this.$colorMode.preference
|
||||
this.showAlt = true
|
||||
} else {
|
||||
const element = document.getElementsByClassName('ethical-ad')[0]
|
||||
|
||||
element.className = 'ethical-ad'
|
||||
element.innerHTML = ''
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
ethicalads.load()
|
||||
|
||||
element.className = 'ethical-ad loaded ' + this.$colorMode.preference
|
||||
}
|
||||
} catch (err) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(err)
|
||||
@@ -31,7 +62,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
[data-ea-type='text'] {
|
||||
min-height: 70px;
|
||||
}
|
||||
@@ -39,4 +70,13 @@ export default {
|
||||
margin: auto 10px;
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.alt {
|
||||
font-size: 14px;
|
||||
border-radius: var(--size-rounded-sm);
|
||||
background-color: var(--color-grey-1);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
padding: 0.7em 1em;
|
||||
margin: 1em 1em 2em 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,78 +57,83 @@
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
<section class="mod-info">
|
||||
<div class="mod-stats">
|
||||
<h3>Info</h3>
|
||||
<p>{{ mod.downloads }} Downloads</p>
|
||||
<p>Created {{ $dayjs(mod.published).fromNow() }}</p>
|
||||
<p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Members</h3>
|
||||
<div
|
||||
v-for="member in members"
|
||||
:key="member.user_id"
|
||||
class="team-member columns"
|
||||
>
|
||||
<img :src="member.avatar_url" alt="profile-picture" />
|
||||
<div class="member-info">
|
||||
<nuxt-link :to="'/user/' + member.user_id">
|
||||
<h4>{{ member.name }}</h4>
|
||||
<div>
|
||||
<section class="mod-info">
|
||||
<div class="mod-stats">
|
||||
<h3>Info</h3>
|
||||
<p>{{ mod.downloads }} Downloads</p>
|
||||
<p>Created {{ $dayjs(mod.published).fromNow() }}</p>
|
||||
<p>Updated {{ $dayjs(mod.updated).fromNow() }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Members</h3>
|
||||
<div
|
||||
v-for="member in members"
|
||||
:key="member.user_id"
|
||||
class="team-member columns"
|
||||
>
|
||||
<img :src="member.avatar_url" alt="profile-picture" />
|
||||
<div class="member-info">
|
||||
<nuxt-link :to="'/user/' + member.user_id">
|
||||
<h4>{{ member.name }}</h4>
|
||||
</nuxt-link>
|
||||
<p>{{ member.role }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="versions.length > 0">
|
||||
<h3>Featured Versions</h3>
|
||||
<div
|
||||
v-for="version in versions"
|
||||
:key="version.id"
|
||||
class="featured-version columns"
|
||||
>
|
||||
<div class="version-info">
|
||||
<div class="columns">
|
||||
<h4 class="limit-text-width">
|
||||
{{ version.name }}
|
||||
</h4>
|
||||
<p
|
||||
v-if="version.version_type === 'release'"
|
||||
class="badge green"
|
||||
>
|
||||
Release
|
||||
</p>
|
||||
<p v-if="version.version_type === 'beta'" class="badge yellow">
|
||||
Beta
|
||||
</p>
|
||||
<p v-if="version.version_type === 'alpha'" class="badge red">
|
||||
Alpha
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns info-2">
|
||||
<p class="version-number limit-text-width">
|
||||
{{ version.version_number }}
|
||||
</p>
|
||||
<FabricIcon
|
||||
v-if="version.loaders.includes('fabric')"
|
||||
stroke="#AC6C3A"
|
||||
/>
|
||||
<ForgeIcon
|
||||
v-if="version.loaders.includes('forge')"
|
||||
stroke="#8B81E6"
|
||||
/>
|
||||
<p
|
||||
v-if="version.game_versions.length > 0"
|
||||
class="game-version limit-text-width"
|
||||
>
|
||||
{{ version.game_versions[0] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
|
||||
<DownloadIcon />
|
||||
</nuxt-link>
|
||||
<p>{{ member.role }}</p>
|
||||
</div>
|
||||
<EthicalAd type="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="versions.length > 0">
|
||||
<h3>Featured Versions</h3>
|
||||
<div
|
||||
v-for="version in versions"
|
||||
:key="version.id"
|
||||
class="featured-version columns"
|
||||
>
|
||||
<div class="version-info">
|
||||
<div class="columns">
|
||||
<h4 class="limit-text-width">
|
||||
{{ version.name }}
|
||||
</h4>
|
||||
<p v-if="version.version_type === 'release'" class="badge green">
|
||||
Release
|
||||
</p>
|
||||
<p v-if="version.version_type === 'beta'" class="badge yellow">
|
||||
Beta
|
||||
</p>
|
||||
<p v-if="version.version_type === 'alpha'" class="badge red">
|
||||
Alpha
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns info-2">
|
||||
<p class="version-number limit-text-width">
|
||||
{{ version.version_number }}
|
||||
</p>
|
||||
<FabricIcon
|
||||
v-if="version.loaders.includes('fabric')"
|
||||
stroke="#AC6C3A"
|
||||
/>
|
||||
<ForgeIcon
|
||||
v-if="version.loaders.includes('forge')"
|
||||
stroke="#8B81E6"
|
||||
/>
|
||||
<p
|
||||
v-if="version.game_versions.length > 0"
|
||||
class="game-version limit-text-width"
|
||||
>
|
||||
{{ version.game_versions[0] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<nuxt-link :to="'/mod/' + mod.id + '/version/' + version.id">
|
||||
<DownloadIcon />
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<EthicalAd type="image" />
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -243,7 +248,6 @@ export default {
|
||||
|
||||
.mod-info {
|
||||
top: 1rem;
|
||||
max-height: calc(100vh - 3rem);
|
||||
position: sticky;
|
||||
min-width: 270px;
|
||||
max-width: 270px;
|
||||
|
||||
@@ -21,11 +21,22 @@
|
||||
<DownloadIcon stroke="#3cdb36" />
|
||||
<p>{{ formatNumber(downloads) }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<div
|
||||
v-tooltip="
|
||||
$dayjs(createdAt).format('[Created on] YYYY-MM-DD [at] HH:mm A')
|
||||
"
|
||||
class="result-image columns"
|
||||
>
|
||||
<CalendarIcon fill="#099fef" />
|
||||
<p>{{ $dayjs(createdAt).fromNow() }}</p>
|
||||
</div>
|
||||
<div v-if="updatedAt" class="result-image columns">
|
||||
<div
|
||||
v-if="updatedAt"
|
||||
v-tooltip="
|
||||
$dayjs(updatedAt).format('[Updated on] YYYY-MM-DD [at] HH:mm A')
|
||||
"
|
||||
class="result-image columns"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
|
||||
Reference in New Issue
Block a user