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

Extract Message banner component (#1105)

Browse Source
This commit is contained in:
falseresync 2023-08-23 17:40:16 +03:00 committed by GitHub
parent 66b47c08e6
commit 06cc40055a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/styles/components.scss
View File

@ -186,29 +186,6 @@
z-index: 2;
}
&:where(&.warning, &.information) {
padding: 1.5rem;
line-height: 1.5;
min-height: 0;
a {
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
}
}
&.warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
&.information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
&.moderation-card {
background-color: var(--color-warning-banner-bg);
}
@ -1255,29 +1232,6 @@ tr.button-transparent {
grid-gap: 0.5rem;
z-index: 2;
}
&:where(&.warning, &.information) {
padding: 1.5rem;
line-height: 1.5;
min-height: 0;
a {
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
}
}
&.warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
&.information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
}
.card-divider {

57
components/ui/MessageBanner.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="message-banner">
<div class="message-banner__content" :class="cardClassByType" :aria-label="ariaLabelByType">
<slot></slot>
</div>
</div>
</template>
<script lang="ts" setup>
type MessageType = 'information' | 'warning'
const props = withDefaults(defineProps<{ messageType?: MessageType }>(), {
messageType: 'information',
})
const cardClassByType = computed(() => `message-banner__content_${props.messageType}`)
const ariaLabelByType = computed(() => `Banner with ${props.messageType} message`)
</script>
<style lang="css" scoped>
.message-banner {
position: relative;
min-height: var(--font-size-2xl);
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
overflow: hidden;
outline: 2px solid transparent;
margin-bottom: var(--spacing-card-md);
box-shadow: var(--shadow-card);
line-height: 1.5;
min-height: 0;
}
:slotted(a) {
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
}
.message-banner__content {
padding: var(--spacing-card-md) var(--spacing-card-lg);
}
.message-banner__content_warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
.message-banner__content_information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
</style>

17
pages/[type]/[id].vue
View File

@ -365,26 +365,22 @@
:auth="auth"
:tags="tags"
/>
<div v-else-if="project.status === 'withheld'" class="card warning" aria-label="Warning">
<MessageBanner v-else-if="project.status === 'withheld'" message-type="warning">
{{ project.title }} has been removed from search by Modrinth's moderators. Please use
{{ project.title }} at your own risk.
</div>
<div v-if="project.status === 'archived'" class="card warning" aria-label="Warning">
</MessageBanner>
<MessageBanner v-if="project.status === 'archived'" message-type="warning">
{{ project.title }} has been archived. {{ project.title }} will not receive any further
updates unless the author decides to unarchive the project.
</div>
<div
v-if="project.project_type === 'modpack'"
class="card information"
aria-label="Information"
>
</MessageBanner>
<MessageBanner v-if="project.project_type === 'modpack'" message-type="information">
To install {{ project.title }}, download
<nuxt-link to="/app">the Modrinth App</nuxt-link>. For instructions with other launchers,
please see
<a href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/" :target="$external()"
>our documentation</a
>.
</div>
</MessageBanner>
<Promotion v-if="tags.approvedStatuses.includes(project.status)" />
<div class="navigation-card">
<NavRow
@ -725,6 +721,7 @@ import Avatar from '~/components/ui/Avatar.vue'
import NavStack from '~/components/ui/NavStack.vue'
import NavStackItem from '~/components/ui/NavStackItem.vue'
import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
import MessageBanner from '~/components/ui/MessageBanner.vue'
import SettingsIcon from '~/assets/images/utils/settings.svg'
import UsersIcon from '~/assets/images/utils/users.svg'
import CategoriesIcon from '~/assets/images/utils/tags.svg'