mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-27 06:33:18 +00:00
🎨 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
@@ -19,9 +19,9 @@
|
||||
|
||||
@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)
|
||||
<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]) }}">
|
||||
<img class="absolute object-cover object-center w-full h-full"
|
||||
src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01">
|
||||
@@ -33,7 +33,7 @@
|
||||
</button>
|
||||
</a>
|
||||
@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]) }}">
|
||||
<img class="absolute object-cover object-center w-full h-full"
|
||||
src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01">
|
||||
@@ -57,62 +57,63 @@
|
||||
{{ $project->name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="text-sm line-clamp-1 sm:line-clamp-3">
|
||||
{!! strip_tags($project->description) !!}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<div class="flex justify-between items-center mt-3">
|
||||
<!-- Tag -->
|
||||
<flux:badge color="amber">{{ number_format($project->support_in_sats, 0, ',', '.') }} Sats</flux:badge>
|
||||
<div
|
||||
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">
|
||||
<flux:link href="{{ $project->website }}" target="_blank">Webseite</flux:link>
|
||||
</div>
|
||||
<!-- Avatars -->
|
||||
@if($project->votes->where('value', true)->count() > 0)
|
||||
<div class="hidden sm:flex items-center space-x-2">
|
||||
<flux:badge>
|
||||
Anzahl der Unterstützer: +{{ $project->votes->where('value', true)->count() }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row justify-between items-center mt-3 space-y-2 sm:space-y-0">
|
||||
@if(
|
||||
($currentPleb && $currentPleb->id === $project->einundzwanzig_pleb_id)
|
||||
|| ($currentPleb && in_array($currentPleb->npub, config('einundzwanzig.config.current_board'), true))
|
||||
)
|
||||
<flux:button
|
||||
icon="trash"
|
||||
size="xs"
|
||||
variant="danger"
|
||||
wire:click="$dispatch('confirmDeleteProject', { id: {{ $project->id }} })">
|
||||
Löschen
|
||||
</flux:button>
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 space-y-3">
|
||||
<!-- 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:link
|
||||
href="{{ $project->website }}"
|
||||
target="_blank"
|
||||
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">
|
||||
Webseite
|
||||
</flux:link>
|
||||
@if($project->votes->where('value', true)->count() > 0)
|
||||
<flux:badge color="blue">
|
||||
+{{ $project->votes->where('value', true)->count() }} Unterstützer
|
||||
</flux:badge>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<flux:button
|
||||
icon="pencil"
|
||||
size="xs"
|
||||
:href="route('association.projectSupport.edit', ['projectProposal' => $project])">
|
||||
Editieren
|
||||
</flux:button>
|
||||
@endif
|
||||
@if(($currentPleb && $currentPleb->association_status->value > 2) || $project->accepted)
|
||||
<flux:button
|
||||
icon="folder-open"
|
||||
size="xs"
|
||||
:href="route('association.projectSupport.item', ['projectProposal' => $project])">
|
||||
Öffnen
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Second row: Action buttons -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@if(
|
||||
($currentPleb && $currentPleb->id === $project->einundzwanzig_pleb_id)
|
||||
|| ($currentPleb && in_array($currentPleb->npub, config('einundzwanzig.config.current_board'), true))
|
||||
)
|
||||
<flux:button
|
||||
icon="trash"
|
||||
size="xs"
|
||||
variant="danger"
|
||||
wire:click="$dispatch('confirmDeleteProject', { id: {{ $project->id }} })">
|
||||
Löschen
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
icon="pencil"
|
||||
size="xs"
|
||||
:href="route('association.projectSupport.edit', ['projectProposal' => $project])">
|
||||
Editieren
|
||||
</flux:button>
|
||||
@endif
|
||||
@if(($currentPleb && $currentPleb->association_status->value > 2) || $project->accepted)
|
||||
<flux:button
|
||||
icon="folder-open"
|
||||
size="xs"
|
||||
:href="route('association.projectSupport.item', ['projectProposal' => $project])">
|
||||
Öffnen
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
@if($project->sats_paid)
|
||||
<flux:badge color="green">Wurde mit {{ number_format($project->sats_paid, 0, ',', '.') }} Sats
|
||||
unterstützt
|
||||
</flux:badge>
|
||||
<div class="inline-block">
|
||||
<flux:badge color="green">Wurde mit {{ number_format($project->sats_paid, 0, ',', '.') }} Sats
|
||||
unterstützt
|
||||
</flux:badge>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user