natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Make UserCardMini clickable

This commit is contained in:
Freeplay 2023-05-19 14:45:29 -04:00
parent 5db7460a82
commit f573f93d16
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/components/MkUserCardMini.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div <MkA
class="user-card-mini" class="user-card-mini"
:class="[ :class="[
$style.root, $style.root,
{ yellow: user.isSilenced, red: user.isSuspended, gray: false }, { yellow: user.isSilenced, red: user.isSuspended, gray: false },
]" ]"
:to="userPage(user)"
> >
<MkAvatar <MkAvatar
class="avatar" class="avatar"
@ -19,14 +20,14 @@
> >
</div> </div>
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" /> <MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
</div> </MkA>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as misskey from "calckey-js"; import * as misskey from "calckey-js";
import MkMiniChart from "@/components/MkMiniChart.vue"; import MkMiniChart from "@/components/MkMiniChart.vue";
import * as os from "@/os"; import * as os from "@/os";
import { acct } from "@/filters/user"; import { acct, userPage } from "@/filters/user";
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
user: misskey.entities.User; user: misskey.entities.User;
@ -62,6 +63,7 @@ if (props.withChart) {
padding: 16px; padding: 16px;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: 8px;
transition: background .2s;
> :global(.avatar) { > :global(.avatar) {
display: block; display: block;
@ -102,6 +104,10 @@ if (props.withChart) {
height: 30px; height: 30px;
} }
&:hover, &:focus {
background: var(--panelHighlight);
}
&:global(.yellow) { &:global(.yellow) {
--c: rgb(255 196 0 / 15%); --c: rgb(255 196 0 / 15%);
background-image: linear-gradient( background-image: linear-gradient(