Massively improved moderator message visibility (#754)

Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
triphora 2022-11-20 15:49:29 -05:00 committed by GitHub
parent aafd7ed21f
commit e297dff0d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 28 deletions

View File

@ -12,8 +12,16 @@
<h2 class="title">
<nuxt-link
:to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
>{{ name }}</nuxt-link
>
<IssuesIcon
v-if="hasModMessage"
v-tooltip="
'Project has a message from the moderators. View the project to see more.'
"
aria-label="Project has a message from the moderators. View the project to see more."
/>
{{ name }}
</nuxt-link>
</h2>
<p v-if="author" class="author">
by
@ -155,6 +163,7 @@ import Categories from '~/components/ui/search/Categories'
import Badge from '~/components/ui/Badge'
import InfoIcon from '~/assets/images/utils/info.svg?inline'
import IssuesIcon from '~/assets/images/utils/issues.svg?inline'
import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
import EditIcon from '~/assets/images/utils/updated.svg?inline'
import DownloadIcon from '~/assets/images/utils/download.svg?inline'
@ -168,6 +177,7 @@ export default {
Categories,
Badge,
InfoIcon,
IssuesIcon,
CalendarIcon,
EditIcon,
DownloadIcon,
@ -227,6 +237,10 @@ export default {
type: String,
default: null,
},
hasModMessage: {
type: Boolean,
default: false,
},
serverSide: {
type: String,
required: false,
@ -301,6 +315,13 @@ export default {
color: var(--color-text-dark);
font-size: var(--font-size-xl);
word-wrap: break-word;
svg {
width: auto;
color: var(--color-badge-yellow-text);
height: 1.5rem;
margin-bottom: -0.25rem;
}
}
.author {

View File

@ -199,28 +199,53 @@
<VersionBadge v-else color="gray" :type="project.status" />
</p>
<div class="message">
<p v-if="project.status === 'rejected'">
Your project has been rejected by Modrinth's staff. In most cases,
you can resubmit for review after addressing the staff's message,
which is below. Do not resubmit until you've addressed the message
from the moderators!
</p>
<p v-if="project.status === 'processing'">
Your project is currently not viewable by people who are not part
of your team. Please wait for our moderators to manually review
your project to see if it abides by our
<nuxt-link to="/legal/rules">content rules!</nuxt-link>
<nuxt-link class="text-link" to="/legal/rules"
>content rules!
</nuxt-link>
</p>
<p v-if="project.status === 'draft'">
Your project is currently not viewable by people who are not part
of your team. If your project is ready for review, click the
button below to make your mod public!
of your team. If you would like to publish your project, click the
button below to send your project in for review.
</p>
<p v-if="project.moderator_message">
{{ project.moderator_message.message }}
</p>
<div
v-if="project.moderator_message && project.moderator_message.body"
v-highlightjs
class="markdown-body"
v-html="$xss($md.render(project.moderator_message.body))"
></div>
<div v-if="project.moderator_message">
<hr class="card-divider" />
<div v-if="project.moderator_message.body">
<h3 class="card-header">
Message from the Modrinth moderators:
</h3>
<p
v-if="project.moderator_message.message"
class="mod-message__title"
>
{{ project.moderator_message.message }}
</p>
<div
v-highlightjs
class="markdown-body"
v-html="$xss($md.render(project.moderator_message.body))"
/>
</div>
<div v-else>
<h3 class="card-header">
Message from the Modrinth moderators:
</h3>
<p>{{ project.moderator_message.message }}</p>
</div>
<hr class="card-divider" />
</div>
</div>
<div class="buttons">
<div class="buttons status-buttons">
<button
v-if="
project.status === 'rejected' ||
@ -243,7 +268,7 @@
</button>
<button
v-if="project.status === 'approved'"
class="clear-mod-message iconified-button"
class="iconified-button"
@click="clearMessage"
>
<ClearIcon />
@ -261,10 +286,6 @@
</li>
</ul>
</div>
<p v-if="project.status === 'rejected'">
Do not resubmit for review until you've addressed the moderator
message!
</p>
</div>
<div class="extra-info-desktop card">
<template
@ -460,9 +481,14 @@
<div class="info">
<div class="key">License</div>
<div class="value uppercase">
<a class="text-link" :href="project.license.url || null">{{
project.license.id
}}</a>
<a
v-if="project.license.url"
class="text-link"
:href="project.license.url"
>
{{ project.license.id }}
</a>
<span v-else>{{ project.license.id }}</span>
</div>
</div>
<div
@ -798,9 +824,14 @@
<div class="info">
<div class="key">License</div>
<div class="value uppercase">
<a class="text-link" :href="project.license.url || null">{{
project.license.id
}}</a>
<a
v-if="project.license.url"
class="text-link"
:href="project.license.url"
>
{{ project.license.id }}
</a>
<span v-else>{{ project.license.id }}</span>
</div>
</div>
<div
@ -1403,7 +1434,13 @@ export default {
}
}
.clear-mod-message {
.status-buttons {
margin-top: var(--spacing-card-sm);
}
.mod-message__title {
font-weight: bold;
margin-bottom: var(--spacing-card-xs);
font-size: 1.125rem;
}
</style>

View File

@ -197,11 +197,13 @@
:client-side="project.client_side"
:server-side="project.server_side"
:status="
$auth.user &&
($auth.user.role === 'admin' || $auth.user.role === 'moderator')
($auth.user && $auth.user.id === user.id) ||
$auth.user.role === 'admin' ||
$auth.user.role === 'moderator'
? project.status
: null
"
:has-mod-message="project.moderator_message"
:type="project.project_type"
>
<nuxt-link