77 lines
3.2 KiB
PHP
77 lines
3.2 KiB
PHP
<div
|
|
x-data
|
|
x-show="$store.hovercard.start"
|
|
x-cloak
|
|
class="hovercard-overlay hovercard"
|
|
:style="{ left: $store.hovercard.x + 'px', top: $store.hovercard.y + 'px' }"
|
|
@mouseleave="$store.hovercard.close()"
|
|
@keydown.escape.window="$store.hovercard.close()"
|
|
>
|
|
|
|
<template x-if="$store.hovercard.loading">
|
|
<div class="hovercard-overlay-loading">
|
|
<i data-lucide="loader-2" class="spin"></i>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="$store.hovercard.error">
|
|
<div class="hovercard-overlay-error">
|
|
<i data-lucide="alert-circle"></i>
|
|
<p>Failed to load profile.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="$store.hovercard.data && !$store.hovercard.loading && !$store.hovercard.error">
|
|
<div>
|
|
<div class="hovercard-header">
|
|
<div
|
|
class="hovercard-avatar"
|
|
:style="$store.hovercard.data.avatar_url === null
|
|
? { background: $store.hovercard.data.avatar_color }
|
|
: {}"
|
|
>
|
|
<template x-if="$store.hovercard.data.avatar_url !== null">
|
|
<img :src="$store.hovercard.data.avatar_url" alt="avatar">
|
|
</template>
|
|
<template x-if="$store.hovercard.data.avatar_url === null">
|
|
<span x-text="$store.hovercard.data.avatar_letter"></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hovercard-body">
|
|
<div class="hovercard-username" x-text="$store.hovercard.data.username"></div>
|
|
<div class="hovercard-title" x-text="$store.hovercard.data.group_name"></div>
|
|
|
|
<div class="hovercard-stats">
|
|
<div class="hovercard-stat">
|
|
<span class="stat-value" x-text="$store.hovercard.data.message_count"></span>
|
|
<span class="stat-label">Messages</span>
|
|
</div>
|
|
<div class="hovercard-stat">
|
|
<span class="stat-value" x-text="$store.hovercard.data.reaction_score"></span>
|
|
<span class="stat-label">Reactions</span>
|
|
</div>
|
|
<div class="hovercard-stat">
|
|
<span class="stat-value" x-text="$store.hovercard.data.trophy_points"></span>
|
|
<span class="stat-label">Points</span>
|
|
</div>
|
|
<div class="hovercard-stat">
|
|
<span class="stat-value" x-text="$store.hovercard.data.entries_count"></span>
|
|
<span class="stat-label">Entries</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hovercard-actions">
|
|
<a :href="`{{ xfRoute('members') }}/${$store.hovercard.data.user_id}/`" class="btn" title="View profile">
|
|
<i data-lucide="user" size="14"></i>
|
|
</a>
|
|
<a :href="`{{ xfRoute('direct-messages/add') }}?to=${$store.hovercard.data.username.replace(' ', '+')}`" class="btn" title="Send message">
|
|
<i data-lucide="mail" size="14"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|