mirror of
https://github.com/modrinth/code.git
synced 2026-08-25 00:55:25 +00:00
Prospectorandcoolbot100s
0ffdabb2a3
* feat: new proj moderation page * make requested changes * add boolean for showing delay message * fix server icon + shortened code * fix server icon * refactor admonitions * msg correction. * correction + change spam-notice * Separate status info from instruction details * Tweak timing delay msg, thread activity warning, and refer to moderation with consistent terms. * Whoops, actually updated msgs correctly now. * prepr + margin * split out strings, simplify code again * fix: a few more moderation fixes (#6048) * fix: move tooltip to button * fix: lock status buttons after pressing * fix: unlisted/withheld icon on legacy badge * prepprrr * fix banners, add some extra dev mode stuff * fix thread id copy padding * tweak: adjust some of the status change messages (#6041) * update messages & bunch of other stuff * rename toggle * change hover to 2.5, fix error size * private msg overlay --------- Co-authored-by: coolbot100s <76798835+coolbot100s@users.noreply.github.com>
106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
'banner-grid relative border-b-2 border-solid border-0 z-10',
|
|
containerClasses[variant],
|
|
{ 'no-actions': !$slots.actions, slim: slim },
|
|
]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'grid-area-[title] flex items-center gap-2 font-bold text-[var(--font-size-md)]',
|
|
iconClasses[variant],
|
|
]"
|
|
>
|
|
<component :is="getSeverityIcon(variant)" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
|
|
<slot name="title" />
|
|
</div>
|
|
|
|
<div class="grid-area-[description] flex flex-col gap-[var(--gap-md)]">
|
|
<slot name="description" />
|
|
</div>
|
|
|
|
<div v-if="$slots.actions" class="grid-area-[actions] flex items-center gap-2">
|
|
<slot name="actions" />
|
|
</div>
|
|
|
|
<div
|
|
v-if="$slots.actions_right || $slots.actions_top_right"
|
|
class="grid-area-[actions_right] flex flex-col gap-2 items-end"
|
|
>
|
|
<div v-if="$slots.actions_top_right" class="flex items-center gap-2 justify-end">
|
|
<slot name="actions_top_right" />
|
|
</div>
|
|
<div v-if="$slots.actions_right" class="flex items-center gap-2 justify-end my-auto">
|
|
<slot name="actions_right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getSeverityIcon } from '../../utils'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
variant: 'error' | 'warning' | 'info'
|
|
slim?: boolean
|
|
}>(),
|
|
{
|
|
slim: false,
|
|
},
|
|
)
|
|
|
|
const containerClasses = {
|
|
error: 'bg-banners-error-bg text-banners-error-text border-banners-error-border',
|
|
warning: 'bg-banners-warning-bg text-banners-warning-text border-banners-warning-border',
|
|
info: 'bg-banners-info-bg text-banners-info-text border-banners-info-border',
|
|
}
|
|
|
|
const iconClasses = {
|
|
error: 'text-brand-red',
|
|
warning: 'text-brand-orange',
|
|
info: 'text-brand-blue',
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-grid {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
grid-template-areas:
|
|
'title actions_right'
|
|
'description actions_right'
|
|
'actions actions_right';
|
|
padding-block: var(--gap-xl);
|
|
padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
|
|
}
|
|
|
|
.banner-grid.no-actions {
|
|
grid-template-areas:
|
|
'title actions_right'
|
|
'description actions_right';
|
|
}
|
|
|
|
.banner-grid.slim {
|
|
@apply flex py-4 gap-2 items-center;
|
|
}
|
|
|
|
.grid-area-\[title\] {
|
|
grid-area: title;
|
|
}
|
|
.grid-area-\[description\] {
|
|
grid-area: description;
|
|
}
|
|
.grid-area-\[actions\] {
|
|
grid-area: actions;
|
|
}
|
|
.grid-area-\[actions_right\] {
|
|
grid-area: actions_right;
|
|
}
|
|
|
|
.banner-grid a {
|
|
@apply underline text-current;
|
|
}
|
|
</style>
|