mirror of
https://github.com/lukaszraczylo/git-velocity.git
synced 2026-06-19 03:51:45 +00:00
Fix styling
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { inject, computed, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import Card from '../components/Card.vue'
|
||||
import StatCard from '../components/StatCard.vue'
|
||||
import ContributorCard from '../components/ContributorCard.vue'
|
||||
import RepoCard from '../components/RepoCard.vue'
|
||||
@@ -24,15 +25,15 @@ const showScoreInChart = ref(false)
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<header class="py-10 sm:py-16 px-4">
|
||||
<div class="container mx-auto text-center animate-fade-in-up">
|
||||
<div class="container mx-auto text-center animate-[fadeInUp_0.6s_ease-out]">
|
||||
<h1 class="text-3xl sm:text-4xl md:text-6xl font-bold mb-3 sm:mb-4">
|
||||
<span class="gradient-text">Git Velocity</span>
|
||||
<span class="bg-gradient-to-r from-primary-600 to-accent-600 dark:from-primary-400 dark:to-accent-400 bg-clip-text text-transparent">Git Velocity</span>
|
||||
</h1>
|
||||
<p class="text-base sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto px-2">
|
||||
Celebrate your team's achievements and contributions with beautiful insights.
|
||||
</p>
|
||||
<!-- Period and Generation Info -->
|
||||
<div class="flex flex-col items-center space-y-2 mt-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex flex-col items-center space-y-2 mt-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
<p v-if="metrics.period?.start || metrics.period?.end">
|
||||
<i class="fas fa-calendar-alt mr-1 text-primary-500"></i>
|
||||
<span class="font-medium">Period:</span>
|
||||
@@ -51,14 +52,14 @@ const showScoreInChart = ref(false)
|
||||
<!-- Velocity Timeline Chart -->
|
||||
<section v-if="velocityTimeline" class="py-6 sm:py-8 px-4">
|
||||
<div class="container mx-auto">
|
||||
<div class="card">
|
||||
<Card>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4 sm:mb-6">
|
||||
<SectionHeader title="Velocity Timeline" icon="fas fa-chart-line" icon-color="text-primary-500" />
|
||||
<label class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
|
||||
<label class="flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-400 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showScoreInChart"
|
||||
class="rounded border-gray-300 text-primary-500 focus:ring-primary-500"
|
||||
class="rounded border-gray-300 dark:border-gray-600 text-primary-500 focus:ring-primary-500"
|
||||
/>
|
||||
<span>Show Score</span>
|
||||
</label>
|
||||
@@ -66,7 +67,7 @@ const showScoreInChart = ref(false)
|
||||
<div class="h-[200px] sm:h-[280px] md:h-[320px]">
|
||||
<VelocityChart :timeline="velocityTimeline" :show-score="showScoreInChart" height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -126,7 +127,7 @@ const showScoreInChart = ref(false)
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<RouterLink to="/leaderboard" class="btn-primary">
|
||||
<RouterLink to="/leaderboard" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary-500 to-accent-500 text-white font-medium rounded-lg shadow-lg hover:from-primary-600 hover:to-accent-600 transition-all">
|
||||
View Full Leaderboard
|
||||
<i class="fas fa-arrow-right ml-2"></i>
|
||||
</RouterLink>
|
||||
|
||||
Reference in New Issue
Block a user