Refactor Blade template: replace custom button with Flux component, improve layout consistency, and enhance voting section structure for better readability and maintainability.

This commit is contained in:
HolgerHatGarKeineNode
2026-01-19 23:46:59 +01:00
parent 714de411a6
commit 28b755575f

View File

@@ -81,17 +81,12 @@ new class extends Component {
<div> <div>
@if($projectProposal->accepted || $isAllowed) @if($projectProposal->accepted || $isAllowed)
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full"> <div class="px-4 sm:px-6 lg:px-8 py-8 w-full">
<div class="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16"> <div class="mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-12">
<div> <div class="flex-1">
<div class="mb-6"> <div class="mb-6">
<a class="text-sm px-3 py-1 border border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-300" <flux:button :href="route('association.projectSupport')" variant="primary" size="sm" icon="chevron-left">
href="{{ route('association.projectSupport') }}"> Zurück zur Übersicht
<svg class="fill-current text-gray-400 dark:text-gray-500 mr-2" width="7" height="12" </flux:button>
viewBox="0 0 7 12">
<path d="M5.4.6 6.8 2l-4 4 4 4-1.4 1.4L0 6z"></path>
</svg>
<span>Zurück zur Übersicht</span>
</a>
</div> </div>
<div class="text-sm font-semibold text-violet-500 uppercase mb-2"> <div class="text-sm font-semibold text-violet-500 uppercase mb-2">
{{ $projectProposal->created_at->translatedFormat('d.m.Y') }} {{ $projectProposal->created_at->translatedFormat('d.m.Y') }}
@@ -134,58 +129,58 @@ new class extends Component {
</figure> </figure>
<hr class="my-6 border-t border-gray-100 dark:border-gray-700/60"> <hr class="my-6 border-t border-gray-100 dark:border-gray-700/60">
</div>
@if($isAllowed && !$projectProposal->accepted) @if($isAllowed && !$projectProposal->accepted)
<div class="space-y-4"> <div class="lg:w-80 xl:w-96 shrink-0 space-y-4">
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80"> <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl">
@if(!$ownVoteExists) @if(!$ownVoteExists)
<div class="space-y-2"> <div class="space-y-2">
<flux:button wire:click="handleApprove" class="w-full"> <flux:button wire:click="handleApprove" class="w-full">
<i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-up mr-2"></i> <i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-up mr-2"></i>
Zustimmen Zustimmen
</flux:button> </flux:button>
<flux:button wire:click="handleNotApprove" variant="danger" class="w-full"> <flux:button wire:click="handleNotApprove" variant="danger" class="w-full">
<i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-down mr-2"></i> <i class="fill-current shrink-0 fa-sharp-duotone fa-solid fa-thumbs-down mr-2"></i>
Ablehnen Ablehnen
</flux:button> </flux:button>
</div>
@else
<p class="text-sm text-gray-700 dark:text-gray-300">Du hast bereits abgestimmt.</p>
@endif
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Zustimmungen des Vorstands ({{ count($this->boardVotes->where('value', 1)) }})
</div> </div>
</div> @else
<p class="text-sm text-gray-700 dark:text-gray-300">Du hast bereits abgestimmt.</p>
@endif
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80"> <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2"> <div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Ablehnungen des Vorstands ({{ count($this->boardVotes->where('value', 0)) }}) Zustimmungen des Vorstands ({{ count($this->boardVotes->where('value', 1)) }})
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Zustimmungen der übrigen Mitglieder
({{ count($this->otherVotes->where('value', 1)) }})
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl lg:w-72 xl:w-80">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Ablehnungen der übrigen Mitglieder
({{ count($this->otherVotes->where('value', 0)) }})
</div>
</div> </div>
</div> </div>
@endif
</div> <div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Ablehnungen des Vorstands ({{ count($this->boardVotes->where('value', 0)) }})
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Zustimmungen der übrigen Mitglieder
({{ count($this->otherVotes->where('value', 1)) }})
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-5 shadow-sm rounded-xl">
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
Ablehnungen der übrigen Mitglieder
({{ count($this->otherVotes->where('value', 0)) }})
</div>
</div>
</div>
@endif
</div> </div>
</div> </div>
@else @else
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto"> <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
<flux:callout variant="warning" icon="exclamation-circle"> <flux:callout variant="warning" icon="exclamation-circle">
<flux:heading>Zugriff auf Projektförderung nicht möglich</flux:heading> <flux:heading>Zugriff auf Projektförderung nicht möglich</flux:heading>
<p> <p>