🎨 Refactor project card component: adjust responsive layout, enhance button grouping, improve badge usage, and streamline footer structure for better readability and consistency.

This commit is contained in:
HolgerHatGarKeineNode
2026-01-20 16:51:48 +01:00
parent 8b78a85646
commit 631e19b64a

View File

@@ -19,9 +19,9 @@
@if($shouldDisplay) @if($shouldDisplay)
<flux:card class="flex overflow-hidden" wire:key="project_{{ $project->id }}"> <flux:card class="flex flex-col sm:flex-row overflow-hidden" wire:key="project_{{ $project->id }}">
@if(!$project->sats_paid) @if(!$project->sats_paid)
<a class="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" <a class="relative block w-full h-48 sm:w-56 sm:h-auto xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0 sm:shrink-0"
href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}"> href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}">
<img class="absolute object-cover object-center w-full h-full" <img class="absolute object-cover object-center w-full h-full"
src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01"> src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01">
@@ -33,7 +33,7 @@
</button> </button>
</a> </a>
@else @else
<a class="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" <a class="relative block w-full h-48 sm:w-56 sm:h-auto xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0 sm:shrink-0"
href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}"> href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}">
<img class="absolute object-cover object-center w-full h-full" <img class="absolute object-cover object-center w-full h-full"
src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01"> src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01">
@@ -57,29 +57,27 @@
{{ $project->name }} {{ $project->name }}
</h3> </h3>
</div> </div>
<div class="text-sm line-clamp-1 sm:line-clamp-3">
{!! strip_tags($project->description) !!}
</div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="flex justify-between items-center mt-3"> <div class="mt-3 space-y-3">
<!-- Tag --> <!-- First row: Sats, Website, Supporters -->
<div class="flex flex-wrap items-center gap-2">
<flux:badge color="amber">{{ number_format($project->support_in_sats, 0, ',', '.') }} Sats</flux:badge> <flux:badge color="amber">{{ number_format($project->support_in_sats, 0, ',', '.') }} Sats</flux:badge>
<div <flux:link
class="text-xs inline-flex items-center font-bold border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-200 rounded-full text-center px-2.5 py-1"> href="{{ $project->website }}"
<flux:link href="{{ $project->website }}" target="_blank">Webseite</flux:link> target="_blank"
</div> class="text-xs font-bold border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-200 rounded-full px-2.5 py-1">
<!-- Avatars --> Webseite
</flux:link>
@if($project->votes->where('value', true)->count() > 0) @if($project->votes->where('value', true)->count() > 0)
<div class="hidden sm:flex items-center space-x-2"> <flux:badge color="blue">
<flux:badge> +{{ $project->votes->where('value', true)->count() }} Unterstützer
Anzahl der Unterstützer: +{{ $project->votes->where('value', true)->count() }}
</flux:badge> </flux:badge>
</div>
@endif @endif
</div> </div>
<div
class="flex flex-col sm:flex-row justify-between items-center mt-3 space-y-2 sm:space-y-0"> <!-- Second row: Action buttons -->
<div class="flex flex-wrap gap-2">
@if( @if(
($currentPleb && $currentPleb->id === $project->einundzwanzig_pleb_id) ($currentPleb && $currentPleb->id === $project->einundzwanzig_pleb_id)
|| ($currentPleb && in_array($currentPleb->npub, config('einundzwanzig.config.current_board'), true)) || ($currentPleb && in_array($currentPleb->npub, config('einundzwanzig.config.current_board'), true))
@@ -108,11 +106,14 @@
</flux:button> </flux:button>
@endif @endif
</div> </div>
</div>
<div class="py-2"> <div class="py-2">
@if($project->sats_paid) @if($project->sats_paid)
<div class="inline-block">
<flux:badge color="green">Wurde mit {{ number_format($project->sats_paid, 0, ',', '.') }} Sats <flux:badge color="green">Wurde mit {{ number_format($project->sats_paid, 0, ',', '.') }} Sats
unterstützt unterstützt
</flux:badge> </flux:badge>
</div>
@endif @endif
</div> </div>
</div> </div>