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/TeamCard.vue
+38 -35
View File
@@ -1,5 +1,6 @@
<script setup>
import { RouterLink } from 'vue-router'
import Card from './Card.vue'
import Avatar from './Avatar.vue'
import { formatNumber, slugify } from '../composables/formatters'
@@ -14,43 +15,45 @@ defineProps({
<template>
<RouterLink
:to="`/teams/${slugify(team.name)}`"
class="card hover:shadow-lg transition group"
class="block group"
>
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-primary-500 transition">
{{ team.name }}
</h3>
<span
class="w-3 h-3 rounded-full"
:style="{ backgroundColor: team.color || '#8b5cf6' }"
></span>
</div>
<div class="flex items-center space-x-2 mb-4">
<template v-for="(member, i) in (team.members || []).slice(0, 5)" :key="member">
<Avatar :name="member" size="sm" />
</template>
<span
v-if="(team.members?.length || 0) > 5"
class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300 text-xs font-bold"
>
+{{ team.members.length - 5 }}
</span>
</div>
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<div class="text-lg font-semibold gradient-text">
{{ formatNumber(team.total_score) }}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Total Score</div>
<Card hover>
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 transition">
{{ team.name }}
</h3>
<span
class="w-3 h-3 rounded-full"
:style="{ backgroundColor: team.color || '#8b5cf6' }"
></span>
</div>
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-white">
{{ team.members?.length || 0 }}
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Members</div>
<div class="flex items-center space-x-2 mb-4">
<template v-for="(member, i) in (team.members || []).slice(0, 5)" :key="member">
<Avatar :name="member" size="sm" />
</template>
<span
v-if="(team.members?.length || 0) > 5"
class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300 text-xs font-bold"
>
+{{ team.members.length - 5 }}
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<div class="text-lg font-semibold bg-gradient-to-r from-primary-600 to-accent-600 dark:from-primary-400 dark:to-accent-400 bg-clip-text text-transparent">
{{ formatNumber(team.total_score) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">Total Score</div>
</div>
<div>
<div class="text-lg font-semibold text-gray-900 dark:text-white">
{{ team.members?.length || 0 }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">Members</div>
</div>
</div>
</Card>
</RouterLink>
</template>