New design
This commit is contained in:
254
resources/views/livewire/person/show-skeleton.blade.php
Normal file
254
resources/views/livewire/person/show-skeleton.blade.php
Normal file
@@ -0,0 +1,254 @@
|
||||
{{-- Skeleton loading placeholder for person show page --}}
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 animate-pulse">
|
||||
<div class="container mx-auto py-12 px-4">
|
||||
<!-- Breadcrumb Navigation Skeleton -->
|
||||
<nav class="mb-8">
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 px-4 py-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="h-4 bg-gray-200 rounded w-12"></div>
|
||||
<div class="w-4 h-4 bg-gray-200 rounded"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-20"></div>
|
||||
<div class="w-4 h-4 bg-gray-200 rounded"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-24"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Profile Card Skeleton -->
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-8 mb-8">
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
{{-- Profile image skeleton --}}
|
||||
<div class="md:w-48">
|
||||
<div class="w-full h-64 md:w-48 bg-gray-300 rounded-lg border border-gray-200"></div>
|
||||
</div>
|
||||
|
||||
{{-- Main content skeleton --}}
|
||||
<div class="flex-1">
|
||||
<div class="mb-6">
|
||||
{{-- Name skeleton --}}
|
||||
<div class="h-10 bg-gray-300 rounded mb-2 w-3/4"></div>
|
||||
<div class="flex flex-wrap items-center gap-4 mb-4">
|
||||
<div class="h-6 bg-gray-200 rounded-full w-16"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Info grid skeleton --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-3 bg-gray-300 rounded mb-1 w-12"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-16"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-3 bg-gray-300 rounded mb-1 w-8"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-3 bg-gray-300 rounded mb-1 w-12"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-24"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-3 bg-gray-300 rounded mb-1 w-12"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Action button skeleton --}}
|
||||
<div class="h-10 bg-gray-200 rounded-lg w-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assignments Card Skeleton -->
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
|
||||
<div class="h-8 bg-gray-300 rounded w-24"></div>
|
||||
</div>
|
||||
|
||||
{{-- Uppdrag tabs skeleton --}}
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<div class="py-3 px-1 border-b-2 border-blue-500">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-gray-200 rounded mr-2"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-20"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-3 px-1">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-gray-200 rounded mr-2"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{{-- Uppdrag cards skeleton --}}
|
||||
<div class="space-y-4">
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="h-5 bg-gray-300 rounded mb-2 w-2/3"></div>
|
||||
<div class="h-4 bg-gray-200 rounded mb-1 w-1/2"></div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="h-4 bg-gray-200 rounded mb-1 w-16"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="h-5 bg-gray-300 rounded mb-2 w-3/4"></div>
|
||||
<div class="h-4 bg-gray-200 rounded mb-1 w-1/3"></div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="h-4 bg-gray-200 rounded mb-1 w-16"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Biography Card Skeleton -->
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
|
||||
<div class="h-8 bg-gray-300 rounded w-24"></div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-5 bg-gray-300 rounded mb-2 w-24"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-5 bg-gray-300 rounded mb-2 w-20"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="h-5 bg-gray-300 rounded mb-2 w-28"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Voting Section Card Skeleton -->
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-10 h-10 bg-gray-200 rounded-lg mr-3"></div>
|
||||
<div class="h-8 bg-gray-300 rounded w-24"></div>
|
||||
</div>
|
||||
|
||||
{{-- Year tabs skeleton --}}
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<div class="py-3 px-1 border-b-2 border-blue-500">
|
||||
<div class="h-5 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
<div class="py-3 px-1">
|
||||
<div class="h-5 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
<div class="py-3 px-1">
|
||||
<div class="h-5 bg-gray-200 rounded w-12"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{{-- Voting statistics chart skeleton --}}
|
||||
<div class="bg-white rounded-lg border border-gray-200 p-6 mb-8">
|
||||
<div class="h-6 bg-gray-300 rounded mb-4 w-1/3"></div>
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<div class="lg:w-1/2">
|
||||
{{-- Chart placeholder --}}
|
||||
<div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<div class="w-32 h-32 bg-gray-300 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/2">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<div class="h-5 bg-gray-300 rounded w-16"></div>
|
||||
<div class="h-5 bg-gray-300 rounded w-8"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<div class="h-5 bg-gray-300 rounded w-12"></div>
|
||||
<div class="h-5 bg-gray-300 rounded w-8"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<div class="h-5 bg-gray-300 rounded w-20"></div>
|
||||
<div class="h-5 bg-gray-300 rounded w-8"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-blue-50 rounded border-t-2 border-blue-500">
|
||||
<div class="h-5 bg-gray-300 rounded w-32"></div>
|
||||
<div class="h-5 bg-gray-300 rounded w-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Voting table skeleton --}}
|
||||
<div class="overflow-x-auto">
|
||||
<div class="min-w-full bg-white border border-gray-200 rounded-lg">
|
||||
{{-- Table header skeleton --}}
|
||||
<div class="bg-gray-50 border-b border-gray-200 rounded-t-lg">
|
||||
<div class="flex">
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-16"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-20"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-12"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-10"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-16"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-300 rounded w-18"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Table rows skeleton --}}
|
||||
@for($i = 0; $i < 5; $i++)
|
||||
<div class="border-b border-gray-100">
|
||||
<div class="flex">
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-200 rounded w-20"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-200 rounded w-16"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-200 rounded w-8"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-6 bg-gray-200 rounded-full w-12"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-200 rounded w-14"></div>
|
||||
</div>
|
||||
<div class="px-4 py-3 flex-1">
|
||||
<div class="h-4 bg-gray-200 rounded w-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Skeleton -->
|
||||
<div class="text-center mt-8">
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 px-6 py-4">
|
||||
<div class="h-4 bg-gray-200 rounded w-48 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user