Tooltips, alternate ad text, better error messages

This commit is contained in:
Jai A
2020-11-03 21:29:45 -07:00
parent 5b77e78662
commit 7445f43b1b
15 changed files with 302 additions and 115 deletions

View File

@@ -112,3 +112,96 @@
color: var(--color-grey-2);
}
}
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: var(--color-grey-2);
color: var(--color-text);
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: var(--color-grey-2);
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}

View File

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

View File

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

View File

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

View File

@@ -222,6 +222,13 @@
</nav>
</aside>
<main>
<notifications group="main" position="bottom right" />
<notifications
group="ads"
position="bottom right"
:duration="-1"
:ignore-duplicates="true"
/>
<div class="alpha-alert">
Modrinth is in early alpha. You can join our
<a href="https://discord.gg/gFRbNQ2">discord</a> for updates!
@@ -610,7 +617,8 @@ export default {
background-color: var(--color-grey-1);
a {
color: var(--color-grey-3);
text-decoration: underline;
color: var(--color-grey-5);
}
}

View File

@@ -23,13 +23,13 @@
<h4 class="pages">Pages</h4>
<nuxt-link to="/">Home</nuxt-link>
<nuxt-link to="/mods">Mods</nuxt-link>
<nuxt-link to="/packs">Packs</nuxt-link>
<nuxt-link to="/modpacks">Packs</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<nuxt-link to="/guides">Guides</nuxt-link>
</div>
<div class="column">
<h4 class="developers">Developers</h4>
<nuxt-link to="/developers">Documentation</nuxt-link>
<nuxt-link to="/documentation">Documentation</nuxt-link>
<a href="https://github.com/modrinth">Open Source</a>
<a href="https://github.com/modrinth/knossos/issues">Issues</a>
</div>

View File

@@ -93,7 +93,7 @@ export default {
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [],
plugins: ['~/plugins/vue-tooltip.js', '~/plugins/vue-notification.js'],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
@@ -159,7 +159,9 @@ export default {
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {},
build: {
transpile: ['vue-tooltip', 'vue-notification'],
},
loading: {
color: 'green',
height: '5px',

25
package-lock.json generated
View File

@@ -9452,6 +9452,11 @@
"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
"dev": true
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -12680,6 +12685,16 @@
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
},
"v-tooltip": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
"integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
"requires": {
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"vue-resize": "^0.4.5"
}
},
"v8-compile-cache": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
@@ -12815,6 +12830,16 @@
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
},
"vue-notification": {
"version": "1.3.20",
"resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
"integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ=="
},
"vue-resize": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
},
"vue-router": {
"version": "3.4.7",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.7.tgz",

View File

@@ -19,7 +19,9 @@
"@nuxtjs/sitemap": "^2.4.0",
"marked": "^1.2.0",
"nuxt": "^2.14.7",
"v-tooltip": "^2.0.3",
"vue-multiselect": "^2.1.6",
"vue-notification": "^1.3.20",
"xss": "^1.0.8"
},
"devDependencies": {

View File

@@ -54,10 +54,6 @@
</div>
<Popup :show-popup="showPopup">
<h3 class="popup-title">Upload Files</h3>
<div v-if="currentError" class="error">
<h4>Error</h4>
<p>{{ currentError }}</p>
</div>
<FileInput
input-id="version-files"
input-accept="application/*"
@@ -157,7 +153,6 @@ export default {
data() {
return {
showPopup: false,
currentError: null,
filesToUpload: [],
}
},
@@ -173,7 +168,6 @@ export default {
},
async uploadFiles() {
this.$nuxt.$loading.start()
this.currentError = null
const formData = new FormData()
@@ -200,7 +194,12 @@ export default {
await this.$router.go(null)
} catch (err) {
this.currentError = err.response.data.description
this.$notify({
group: 'main',
title: 'An Error Occurred',
text: err.response.data.description,
type: 'error',
})
window.scrollTo({ top: 0, behavior: 'smooth' })
}
@@ -394,10 +393,4 @@ export default {
background-color: var(--color-bg);
}
}
.error {
margin: 20px 0;
border-left: #e04e3e 7px solid;
padding: 5px 20px 20px 20px;
}
</style>

View File

@@ -261,7 +261,6 @@ export default {
data() {
return {
showPopup: false,
currentError: null,
createdVersion: {},
}
},
@@ -278,7 +277,6 @@ export default {
},
async createVersion() {
this.$nuxt.$loading.start()
this.currentError = null
const formData = new FormData()
@@ -310,7 +308,12 @@ export default {
await this.$router.go(null)
} catch (err) {
this.currentError = err.response.data.description
this.$notify({
group: 'main',
title: 'An Error Occurred',
text: err.response.data.description,
type: 'error',
})
window.scrollTo({ top: 0, behavior: 'smooth' })
}

View File

@@ -1,10 +1,6 @@
<template>
<div class="content">
<h2>Create Mod</h2>
<section v-if="currentError" class="error">
<h3>Error</h3>
<p>{{ currentError }}</p>
</section>
<section>
<h3>Initial Data</h3>
<div class="initial">
@@ -315,7 +311,6 @@ export default {
data() {
return {
previewImage: null,
currentError: null,
compiledBody: '',
releaseChannels: ['beta', 'alpha', 'release'],
currentVersionIndex: -1,
@@ -334,7 +329,6 @@ export default {
methods: {
async createMod() {
this.$nuxt.$loading.start()
this.currentError = null
const formData = new FormData()
@@ -386,7 +380,13 @@ export default {
await this.$router.replace('/dashboard/projects')
} catch (err) {
this.currentError = err.response.data.description
this.$notify({
group: 'main',
title: 'An Error Occurred',
text: err.response.data.description,
type: 'error',
})
window.scrollTo({ top: 0, behavior: 'smooth' })
}
@@ -438,10 +438,6 @@ export default {
</script>
<style lang="scss" scoped>
.error {
border-left: #e04e3e 7px solid;
}
section {
box-shadow: 0 2px 3px 1px var(--color-grey-2);
margin: 50px 25px;

View File

@@ -11,7 +11,7 @@
<p v-if="user.role === 'developer'" class="badge green">Developer</p>
</div>
</div>
<div data-ea-publisher="modrinth-com" data-ea-type="text" />
<EthicalAd />
<div class="user-mods">
<SearchResult
v-for="result in mods"
@@ -35,10 +35,12 @@
<script>
import axios from 'axios'
import SearchResult from '@/components/ModResult'
import EthicalAd from '@/components/EthicalAd'
export default {
auth: false,
components: {
EthicalAd,
SearchResult,
},
async asyncData(data) {

View File

@@ -0,0 +1,4 @@
import Vue from 'vue'
import Notifications from 'vue-notification/dist/ssr.js'
Vue.use(Notifications)

4
plugins/vue-tooltip.js Normal file
View File

@@ -0,0 +1,4 @@
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)