Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve badges and work on a more unified color scheme for random colors (#756)

Browse Source
This commit is contained in:
Prospector 2022-11-20 13:57:44 -08:00 committed by GitHub
parent 9849bc055c
commit 88fa103acb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 148 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/images/utils/archive.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="4" width="20" height="5" rx="2"></rect>
<path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"></path>
<path d="M10 13h4"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 335 B

6
assets/images/utils/box.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.29 7 12 12 20.71 7"></polyline>
<line x1="12" y1="22" x2="12" y2="12"></line>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

39
assets/styles/components.scss
View File

@ -27,35 +27,6 @@
}
}
.badge {
max-height: 1rem;
border-radius: 1rem;
font-size: var(--font-size-xs);
font-weight: bold;
letter-spacing: 0.02rem;
padding: 0.25rem 0.5rem;
&.gray {
background-color: var(--color-badge-gray-bg);
color: var(--color-badge-gray-text);
}
&.red {
background-color: var(--color-badge-red-bg);
color: var(--color-badge-red-text);
}
&.green {
background-color: var(--color-badge-green-bg);
color: var(--color-badge-green-text);
}
&.yellow {
background-color: var(--color-badge-yellow-bg);
color: var(--color-badge-yellow-text);
}
}
.text-link {
color: var(--color-link);
text-decoration: underline;
@ -532,7 +503,7 @@ tr.button-transparent {
}
.danger-button {
--background-color: var(--color-badge-red-bg);
--background-color: var(--color-special-red);
--text-color: var(--color-brand-inverted);
}
@ -554,7 +525,7 @@ tr.button-transparent {
}
.known-error .multiselect__tags {
border-color: var(--color-badge-red-bg) !important;
border-color: var(--color-special-red) !important;
background-color: var(--color-warning-bg) !important;
&::placeholder {
@ -898,7 +869,7 @@ tr.button-transparent {
.text-input-wrapper.known-error,
input.known-error,
textarea.known-error {
outline: 2px solid var(--color-badge-red-bg);
outline: 2px solid var(--color-special-red);
background-color: var(--color-warning-bg) !important;
&::placeholder {
@ -907,7 +878,7 @@ textarea.known-error {
}
.known-errors {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
ul {
margin: 0;
@ -1017,7 +988,7 @@ h1 {
font-weight: bold;
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
}
.label__description {

36
assets/styles/global.scss
View File

@ -19,7 +19,8 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #00af5c;
--color-brand-green: #00af5c;
--color-brand: var(--color-brand-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
--color-brand-inverted: #ffffff;
@ -56,14 +57,12 @@ html {
--color-link-hover: #1a76e7;
--color-link-active: #146fd7;
--color-badge-gray-text: #646161;
--color-badge-gray-bg: #c8c1c1;
--color-badge-red-text: #6e1931;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #184e38;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920;
--color-badge-yellow-bg: #f7bb43;
--color-special-red: #cb2245;
--color-special-orange: #e08325;
--color-special-green: var(--color-brand-green);
--color-special-blue: #1f68c0;
--color-special-purple: #8e32F3;
--color-special-gray: #595B61;
--color-warning-bg: hsl(355, 70%, 88%);
--color-warning-text: hsl(342, 70%, 35%);
@ -107,7 +106,15 @@ html {
--color-text-inverted: var(--color-bg);
--color-bg-inverted: var(--color-text);
--color-brand: #1bd96a;
--color-special-red: #ff496e;
--color-special-orange: #ffa347;
--color-special-green: var(--color-brand-green);
--color-special-blue: #4F9CFF;
--color-special-purple: #C78AFF;
--color-special-gray: #9FA4B3;
--color-brand-green: #1bd96a;
--color-brand: var(--color-brand-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
--color-brand-inverted: #000;
@ -141,15 +148,6 @@ html {
--color-link-hover: #92c0f5;
--color-link-active: #b5d5fd;
--color-badge-gray-bg: #646161;
--color-badge-gray-text: #c8c1c1;
--color-badge-red-text: #bd1a48;
--color-badge-red-bg: #db3162;
--color-badge-green-text: #1ebb7b;
--color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #dba22d;
--color-badge-yellow-bg: #f7bb43;
--color-warning-bg: hsl(355, 70%, 20%);
--color-warning-text: hsl(342, 70%, 75%);

101
components/ui/Badge.vue
View File

@ -1,12 +1,55 @@
<template>
<span :class="'version-badge ' + color">
<span class="circle" /> {{ type }}
<span :class="'version-badge ' + color + ' type--' + type">
<template v-if="color"
><span class="circle" /> {{ $capitalizeString(type) }}</template
>
<template v-else-if="type === 'admin'"
><ModrinthIcon /> Modrinth Team</template
>
<template v-else-if="type === 'moderator'"
><ModeratorIcon /> Moderator</template
>
<template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
<template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
<template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
<template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
<template v-else-if="type === 'archived'"
><ArchiveIcon /> Archived</template
>
<template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
<template v-else-if="type === 'processing'"
><ProcessingIcon /> Under review</template
>
<template v-else
><span class="circle" /> {{ $capitalizeString(type) }}</template
>
</span>
</template>
<script>
import ModrinthIcon from '~/assets/images/logo.svg?inline'
import ModeratorIcon from '~/assets/images/sidebar/admin.svg?inline'
import CreatorIcon from '~/assets/images/utils/box.svg?inline'
import ListIcon from '~/assets/images/utils/list.svg?inline'
import EyeOffIcon from '~/assets/images/utils/eye-off.svg?inline'
import DraftIcon from '~/assets/images/utils/file-text.svg?inline'
import CrossIcon from '~/assets/images/utils/x.svg?inline'
import ArchiveIcon from '~/assets/images/utils/archive.svg?inline'
import ProcessingIcon from '~/assets/images/utils/updated.svg?inline'
export default {
name: 'Badge',
components: {
ModrinthIcon,
ListIcon,
DraftIcon,
EyeOffIcon,
ModeratorIcon,
CreatorIcon,
CrossIcon,
ArchiveIcon,
ProcessingIcon,
},
props: {
type: {
type: String,
@ -14,7 +57,7 @@ export default {
},
color: {
type: String,
required: true,
default: '',
},
},
}
@ -25,7 +68,9 @@ export default {
display: flex;
align-items: center;
font-weight: bold;
text-transform: capitalize;
width: fit-content;
--badge-color: var(--color-special-gray);
color: var(--badge-color);
.circle {
width: 0.5rem;
@ -33,46 +78,42 @@ export default {
border-radius: 50%;
display: inline-block;
margin-right: 0.25rem;
background-color: var(--badge-color);
}
&.custom-circle {
@media screen and (min-width: 560px) {
.circle {
margin-left: auto;
}
}
svg {
margin-right: 0.25rem;
}
&.type--rejected,
&.red {
color: var(--color-badge-red-text);
.circle {
background-color: var(--color-badge-red-bg);
}
--badge-color: var(--color-special-red);
}
&.type--moderator,
&.type--processing,
&.orange {
--badge-color: var(--color-special-orange);
}
&.type--admin,
&.green {
color: var(--color-badge-green-text);
.circle {
background-color: var(--color-brand);
}
--badge-color: var(--color-special-green);
}
&.yellow {
color: var(--color-badge-yellow-text);
&.type--creator,
&.type--approved,
&.blue {
color: var(--color-special-blue);
}
.circle {
background-color: var(--color-badge-yellow-bg);
}
&.type--unlisted,
&.purple {
color: var(--color-special-purple);
}
&.gray {
color: var(--color-badge-gray-text);
.circle {
background-color: var(--color-badge-gray-bg);
}
--badge-color: var(--color-special-gray);
}
}
</style>

4
components/ui/FileInput.vue
View File

@ -99,11 +99,11 @@ input {
}
.known-error label {
border-color: var(--color-badge-red-bg) !important;
border-color: var(--color-special-red) !important;
background-color: var(--color-warning-bg) !important;
span {
border-color: var(--color-badge-red-bg);
border-color: var(--color-special-red);
}
&::placeholder {

2
components/ui/ModalTransfer.vue
View File

@ -211,7 +211,7 @@ export default {
}
.invalid {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
.confirm-text {

19
components/ui/ProjectCard.vue
View File

@ -134,22 +134,7 @@
</div>
</div>
<div v-if="status" class="status">
<Badge
v-if="status === 'approved'"
color="green custom-circle"
:type="status"
/>
<Badge
v-else-if="status === 'processing' || status === 'archived'"
color="yellow custom-circle"
:type="status"
/>
<Badge
v-else-if="status === 'rejected'"
color="red custom-circle"
:type="status"
/>
<Badge v-else color="gray custom-circle" :type="status" />
<Badge :type="status" />
</div>
<div class="buttons">
<slot />
@ -402,6 +387,8 @@ export default {
}
.status {
display: flex;
justify-content: right;
margin-bottom: 0.5rem;
}

8
layouts/default.vue
View File

@ -622,14 +622,6 @@ export default {
width: auto;
}
.badge {
margin-left: 0.25rem;
display: none;
@media screen and (min-width: 430px) {
display: unset;
}
}
button {
background: none;
border: none;

39
pages/_type/_id.vue
View File

@ -179,24 +179,7 @@
<div class="status-info"></div>
<p>
Your project is currently:
<VersionBadge
v-if="project.status === 'approved'"
color="green"
:type="project.status"
/>
<VersionBadge
v-else-if="
project.status === 'processing' || project.status === 'archived'
"
color="yellow"
:type="project.status"
/>
<VersionBadge
v-else-if="project.status === 'rejected'"
color="red"
:type="project.status"
/>
<VersionBadge v-else color="gray" :type="project.status" />
<Badge :type="project.status" />
</p>
<div class="message">
<p v-if="project.status === 'rejected'">
@ -435,17 +418,17 @@
}}
{{ $formatVersion(version.game_versions) }}
</div>
<VersionBadge
<Badge
v-if="version.version_type === 'release'"
type="release"
color="green"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'alpha'"
type="alpha"
color="red"
@ -778,17 +761,17 @@
}}
{{ $formatVersion(version.game_versions) }}
</div>
<VersionBadge
<Badge
v-if="version.version_type === 'release'"
type="release"
color="green"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'alpha'"
type="alpha"
color="red"
@ -892,7 +875,7 @@ import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg?inli
import UnknownIcon from '~/assets/images/utils/unknown-donation.svg?inline'
import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
import Advertisement from '~/components/ads/Advertisement'
import VersionBadge from '~/components/ui/Badge'
import Badge from '~/components/ui/Badge'
import Categories from '~/components/ui/search/Categories'
import ModalReport from '~/components/ui/ModalReport'
import NavRow from '~/components/ui/NavRow'
@ -904,7 +887,7 @@ export default {
Avatar,
CopyCode,
NavRow,
VersionBadge,
Badge,
Advertisement,
ModalReport,
IssuesIcon,

8
pages/_type/_id/changelog.vue
View File

@ -182,18 +182,18 @@ export default {
padding-left: 1.8rem;
.changelog-bar {
--color: var(--color-badge-green-bg);
--color: var(--color-special-green);
&.alpha {
--color: var(--color-badge-red-bg);
--color: var(--color-special-red);
}
&.release {
--color: var(--color-badge-green-bg);
--color: var(--color-special-green);
}
&.beta {
--color: var(--color-badge-yellow-bg);
--color: var(--color-special-orange);
}
left: 0;

2
pages/_type/_id/edit.vue
View File

@ -952,7 +952,7 @@ section.donations {
}
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
.vertical-input {

2
pages/_type/_id/settings.vue
View File

@ -95,7 +95,7 @@
</div>
<div class="side-buttons">
<Badge v-if="member.accepted" type="accepted" color="green" />
<Badge v-else type="pending" color="yellow" />
<Badge v-else type="pending" color="orange" />
<button
class="dropdown-icon"
@click="

4
pages/_type/_id/version.vue
View File

@ -234,7 +234,7 @@
v-else-if="version.version_type === 'beta'"
class="value"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
v-else-if="version.version_type === 'alpha'"
@ -1125,7 +1125,7 @@ export default {
}
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
.version-header {

2
pages/_type/_id/versions.vue
View File

@ -55,7 +55,7 @@
<VersionBadge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
v-else-if="version.version_type === 'alpha'"

6
pages/index.vue
View File

@ -359,13 +359,13 @@ export default {
&.completed {
svg {
color: var(--color-brand);
color: var(--color-special-green);
}
}
&.in-progress {
svg {
color: var(--color-badge-yellow-bg);
color: var(--color-special-orange);
}
}
@ -373,7 +373,7 @@ export default {
p {
user-select: none;
color: transparent;
text-shadow: 0 0 12px var(--color-badge-yellow-bg);
text-shadow: 0 0 12px var(--color-special-orange);
}
}
}

23
pages/moderation.vue
View File

@ -9,26 +9,7 @@
</p>
<div class="status">
<span>New project status: </span>
<Badge
v-if="currentProject.newStatus === 'approved'"
color="green"
:type="currentProject.newStatus"
/>
<Badge
v-else-if="
currentProject.newStatus === 'processing' ||
currentProject.newStatus === 'unlisted' ||
currentProject.newStatus === 'archived'
"
color="yellow"
:type="currentProject.newStatus"
/>
<Badge
v-else-if="currentProject.newStatus === 'rejected'"
color="red"
:type="currentProject.newStatus"
/>
<Badge v-else color="gray" :type="currentProject.newStatus" />
<Badge :type="currentProject.newStatus" />
</div>
<input
v-model="currentProject.moderation_message"
@ -155,7 +136,7 @@
class="markdown-body"
v-html="$xss($md.render(item.body))"
/>
<Badge :type="`Marked as ${item.report_type}`" color="yellow" />
<Badge :type="`Marked as ${item.report_type}`" color="orange" />
</div>
<div class="actions">
<button class="iconified-button" @click="deleteReport(index)">

8
pages/user/_id.vue
View File

@ -92,13 +92,11 @@
</template>
<template v-else>
<div class="sidebar__item">
<Badge v-if="user.role === 'admin'" type="admin" color="red" />
<Badge
v-else-if="user.role === 'moderator'"
type="moderator"
color="yellow"
v-if="user.role === 'admin' || user.role === 'moderator'"
:type="user.role"
/>
<Badge v-else type="developer" color="green" />
<Badge v-else-if="projects.length > 0" type="creator" />
</div>
<span v-if="user.bio" class="sidebar__item bio">{{
user.bio

13
plugins/shorthands.js
View File

@ -17,6 +17,7 @@ export default (ctx, inject) => {
return obj
})
inject('formatNumber', formatNumber)
inject('capitalizeString', capitalizeString)
inject('formatMoney', (number) => '$' + formatNumber(number.toFixed(2)))
inject('formatVersion', (versionsArray) =>
formatVersions(versionsArray, ctx.store)
@ -199,18 +200,22 @@ export const formatBytes = (bytes, decimals = 2) => {
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
export const capitalizeString = (name) => {
return name.charAt(0).toUpperCase() + name.slice(1)
}
export const formatWallet = (name) => {
if (name === 'paypal') {
return 'PayPal'
}
return name.charAt(0).toUpperCase() + name.slice(1)
return capitalizeString(name)
}
export const formatProjectType = (name) => {
if (name === 'resourcepack') {
return 'Resource Pack'
}
return name.charAt(0).toUpperCase() + name.slice(1)
return capitalizeString(name)
}
export const formatCategory = (name) => {
@ -235,11 +240,11 @@ export const formatCategory = (name) => {
} else if (name === 'kitchen-sink') {
return 'Kitchen Sink'
}
return name.charAt(0).toUpperCase() + name.slice(1)
return capitalizeString(name)
}
export const formatCategoryHeader = (name) => {
return name.charAt(0).toUpperCase() + name.slice(1)
return capitalizeString(name)
}
export const formatVersions = (versionArray, store) => {