lukaszraczylo/git-velocity
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/git-velocity.git synced 2026-06-18 03:43:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling

Browse Source
This commit is contained in:
Lukasz Raczylo
2025-12-12 22:41:21 +00:00
parent a5b522c996
commit a5d69ccb86
29 changed files with 610 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/MemberCard.vue
+53 -50
View File
@@ -1,5 +1,6 @@
<script setup>
import { RouterLink } from 'vue-router'
import Card from './Card.vue'
import Avatar from './Avatar.vue'
import AchievementBadge from './AchievementBadge.vue'
import { formatNumber } from '../composables/formatters'
@@ -20,60 +21,62 @@ defineProps({
<component
:is="linkToProfile ? RouterLink : 'div'"
:to="linkToProfile ? { name: 'contributor', params: { login: member.login } } : undefined"
class="card block"
:class="{ 'hover:shadow-lg transition cursor-pointer': linkToProfile }"
class="block"
:class="{ 'group': linkToProfile }"
>
<div class="flex items-center space-x-4 mb-4">
<Avatar :src="member.avatar_url" :name="member.login" size="lg" />
<div>
<h3 class="font-semibold text-gray-800 dark:text-white">
{{ member.name || member.login }}
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">@{{ member.login }}</p>
</div>
</div>
<div class="grid grid-cols-3 gap-4 text-center mb-4">
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-white">
{{ formatNumber(member.commit_count) }}
<Card :hover="linkToProfile" :class="{ 'cursor-pointer': linkToProfile }">
<div class="flex items-center space-x-4 mb-4">
<Avatar :src="member.avatar_url" :name="member.login" size="lg" />
<div>
<h3 class="font-semibold text-gray-900 dark:text-white">
{{ member.name || member.login }}
</h3>
<p class="text-sm text-gray-800 dark:text-gray-400">@{{ member.login }}</p>
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Commits</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-white">
{{ formatNumber(member.prs_opened) }}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">PRs</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-white">
{{ formatNumber(member.reviews_given) }}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Reviews</div>
</div>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">Score</span>
<span class="text-xl font-bold gradient-text">
{{ formatNumber(member.score?.total || 0) }}
</span>
</div>
<div class="grid grid-cols-3 gap-4 text-center mb-4">
<div>
<div class="text-lg font-semibold text-gray-900 dark:text-white">
{{ formatNumber(member.commit_count) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">Commits</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-900 dark:text-white">
{{ formatNumber(member.prs_opened) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">PRs</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-900 dark:text-white">
{{ formatNumber(member.reviews_given) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">Reviews</div>
</div>
</div>
<div v-if="member.achievements?.length" class="mt-4 flex flex-wrap gap-2">
<AchievementBadge
v-for="achievement in member.achievements.slice(0, 4)"
:key="achievement"
:achievement-id="achievement"
size="sm"
/>
<span
v-if="member.achievements.length > 4"
class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold"
>
+{{ member.achievements.length - 4 }}
</span>
</div>
<div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-600 dark:text-gray-400">Score</span>
<span class="text-xl font-bold bg-gradient-to-r from-primary-600 to-accent-600 dark:from-primary-400 dark:to-accent-400 bg-clip-text text-transparent">
{{ formatNumber(member.score?.total || 0) }}
</span>
</div>
<div v-if="member.achievements?.length" class="mt-4 flex flex-wrap gap-2">
<AchievementBadge
v-for="achievement in member.achievements.slice(0, 4)"
:key="achievement"
:achievement-id="achievement"
size="sm"
/>
<span
v-if="member.achievements.length > 4"
class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold"
>
+{{ member.achievements.length - 4 }}
</span>
</div>
</Card>
</component>
</template>