mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-01 22:20:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(NotificationItem): icon & text alignment in header

Browse Source
This commit is contained in:
Pujit Mehrotra
2024-10-14 13:27:20 -04:00
parent c240fab58a
commit 2c79ccc883
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/Notifications/Item.vue
View File

@@ -36,13 +36,14 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
<template>
<div class="group/item relative w-full py-4 pl-1 flex flex-col gap-2">
<header class="w-full flex flex-row items-start justify-between gap-2">
<h3 class="text-muted-foreground text-[0.875rem] tracking-wide flex flex-row items-center gap-2 uppercase">
<component :is="icon.component" v-if="icon" class="size-6 shrink-0" :class="icon.color" />
<header class="w-full flex flex-row items-baseline justify-between gap-2 -translate-y-1 group-hover/item:font-medium group-focus/item:font-medium">
<h3 class="text-muted-foreground text-[0.875rem] tracking-wide flex flex-row items-baseline gap-2 uppercase">
<!-- the `translate` compensates for extra space added by the `svg` element when rendered -->
<component :is="icon.component" v-if="icon" class="size-5 shrink-0 translate-y-1.5" :class="icon.color" />
<span>{{ title }}</span>
</h3>
<div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
<div class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1">
<p class="text-12px opacity-75">{{ timestamp }}</p>
</div>
</header>