feat: update layout and fix bugs in election related pages

This commit includes various updates to improve the layout and user experience on election related pages. It includes changes in grid layout for better responsiveness, updates to text sizing and wrapping for better readability, and fixes bugs related to null values and unique key generation.
This commit is contained in:
fsociety
2024-09-29 22:27:07 +02:00
parent 8b87669eb6
commit 5623671bad
4 changed files with 33 additions and 24 deletions

View File

@@ -163,11 +163,11 @@ $signEvent = function ($event) {
$profile = \App\Models\Profile::query() $profile = \App\Models\Profile::query()
->where('pubkey', $event['pubkey']) ->where('pubkey', $event['pubkey'])
->first() ->first()
->toArray(); ?->toArray();
$votedFor = \App\Models\Profile::query() $votedFor = \App\Models\Profile::query()
->where('pubkey', str($event['content'])->before(',')->toString()) ->where('pubkey', str($event['content'])->before(',')->toString())
->first() ->first()
->toArray(); ?->toArray();
return [ return [
'id' => $event['id'], 'id' => $event['id'],
@@ -182,9 +182,7 @@ $signEvent = function ($event) {
]; ];
}) })
->sortByDesc('created_at') ->sortByDesc('created_at')
->unique(function ($event) { ->unique(fn ($event) => $event['pubkey'] . $event['type'])
return $event['pubkey'] . $event['type'];
})
->values(); ->values();
@endphp @endphp
@@ -361,7 +359,7 @@ $signEvent = function ($event) {
<div class="sticky top-16"> <div class="sticky top-16">
<div <div
class="flex items-center justify-between before:absolute before:inset-0 before:backdrop-blur-md before:bg-gray-50/90 dark:before:bg-[#1B1B1B]/90 before:-z-10 border-b border-gray-200 dark:border-gray-700/60 px-4 sm:px-6 md:px-5 h-16"> class="flex items-center justify-between before:absolute before:inset-0 before:backdrop-blur-md before:bg-gray-50/90 dark:before:bg-[#1B1B1B]/90 before:-z-10 border-b border-gray-200 dark:border-gray-700/60 px-4 sm:px-6 md:px-5 h-16">
<div class="flex justify-between items-center w-full"> <div class="flex flex-col space-y-2 sm:space-y-0 sm:flex-row justify-between items-center w-full">
<div> <div>
@if($isNotClosed) @if($isNotClosed)
<x-badge success <x-badge success
@@ -421,14 +419,14 @@ $signEvent = function ($event) {
$votedResult = $loadedEvents->filter(fn ($event) => $event['pubkey'] === $currentPubkey)->firstWhere('type', $type); $votedResult = $loadedEvents->filter(fn ($event) => $event['pubkey'] === $currentPubkey)->firstWhere('type', $type);
@endphp @endphp
@if($votedResult) @if($votedResult)
<span>Du hast "{{ $votedResult['votedFor']['name'] }}" gewählt</span> <span>Du hast "{{ $votedResult['votedFor']['name'] ?? 'error' }}" gewählt</span>
@else @else
<span>Klicke auf den Kandidaten, den du wählen möchtest.</span> <span>Klicke auf den Kandidaten, den du wählen möchtest.</span>
@endif @endif
</div> </div>
</div> </div>
<footer class="mt-5"> <footer class="mt-5">
<div class="grid grid-cols-2 gap-y-2"> <div class="grid sm:grid-cols-2 gap-y-2">
@foreach($electionConfig->firstWhere('type', $type)['candidates'] as $c) @foreach($electionConfig->firstWhere('type', $type)['candidates'] as $c)
<div <div
@if($isNotClosed)wire:click="vote('{{ $c['pubkey'] }}', '{{ $type }}')" @if($isNotClosed)wire:click="vote('{{ $c['pubkey'] }}', '{{ $type }}')"
@@ -511,7 +509,7 @@ $signEvent = function ($event) {
<div>{{ $event['created_at'] }}</div> <div>{{ $event['created_at'] }}</div>
</td> </td>
<td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap"> <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div>{{ $event['votedFor']['name'] }}</div> <div>{{ $event['votedFor']['name'] ?? 'error' }}</div>
</td> </td>
<td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap"> <td class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div>{{ $event['type'] }}</div> <div>{{ $event['type'] }}</div>

View File

@@ -177,7 +177,7 @@ $loadEvents = function () {
</div> </div>
<!-- Cards --> <!-- Cards -->
<div class="grid grid-cols-12 gap-6"> <div class="grid grid-cols-3 gap-6">
@foreach($positions as $key => $position) @foreach($positions as $key => $position)
<div wire:key="pos_{{ $key }}" wire:ignore <div wire:key="pos_{{ $key }}" wire:ignore

View File

@@ -37,7 +37,7 @@ $saveElection = function ($index) {
@volt @volt
<div class="relative flex h-full"> <div class="relative flex h-full">
@foreach($elections as $election) @foreach($elections as $election)
<div class="w-1/3 p-4"> <div class="w-full sm:w-1/3 p-4">
<div class="shadow-lg rounded-lg overflow-hidden"> <div class="shadow-lg rounded-lg overflow-hidden">
{{ $election['year'] }} {{ $election['year'] }}
</div> </div>

View File

@@ -109,11 +109,11 @@ $save = function ($type) {
<!-- Panel body --> <!-- Panel body -->
<div class="p-6 space-y-6"> <div class="p-6 space-y-6">
<h2 class="text-2xl text-[#1B1B1B] dark:text-gray-100 font-bold mb-5">Aktueller Status</h2> <h2 class="sm:text-2xl text-[#1B1B1B] dark:text-gray-100 font-bold mb-5">Aktueller Status</h2>
<!-- Picture --> <!-- Picture -->
<section> <section>
<div class="flex items-center justify-between"> <div class="flex flex-wrap space-y-2 sm:space-y-0 items-center justify-between">
<x-button label="Mit Nostr verbinden" @click="openNostrLogin" <x-button label="Mit Nostr verbinden" @click="openNostrLogin"
x-show="!$store.nostr.user"/> x-show="!$store.nostr.user"/>
<template x-if="$store.nostr.user"> <template x-if="$store.nostr.user">
@@ -122,10 +122,11 @@ $save = function ($type) {
x-bind:src="$store.nostr.user.picture" x-bind:src="$store.nostr.user.picture"
alt=""> alt="">
<div class="ml-4"> <div class="ml-4">
<h3 class="text-lg leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold" <h3 class="w-48 sm:w-full truncate text-lg leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold"
x-text="$store.nostr.user.nip05"></h3> x-text="$store.nostr.user.nip05"></h3>
<div class="text-sm text-gray-500 dark:text-gray-400" <div
x-text="$store.nostr.user.nip05"></div> class="tw-48 sm:w-full truncate text-sm text-gray-500 dark:text-gray-400"
x-text="$store.nostr.user.nip05"></div>
</div> </div>
</div> </div>
</template> </template>
@@ -194,14 +195,19 @@ $save = function ($type) {
<section> <section>
@if($currentPubkey && $currentPleb->application_for) @if($currentPubkey && $currentPleb->application_for)
<div class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400"> <div
class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" height="16" viewBox="0 0 16 16"> <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path> height="16" viewBox="0 0 16 16">
<path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
</svg> </svg>
<div> <div>
<div class="font-medium text-gray-800 dark:text-gray-100 mb-1">Du hast dich erfolgreich mit folgendem Grund beworben:</div> <div class="font-medium text-gray-800 dark:text-gray-100 mb-1">Du hast
dich erfolgreich mit folgendem Grund beworben:
</div>
<div>{{ $currentPleb->application_text }}</div> <div>{{ $currentPleb->application_text }}</div>
</div> </div>
</div> </div>
@@ -212,14 +218,19 @@ $save = function ($type) {
<section> <section>
@if($currentPleb && $currentPleb->association_status->value > 1) @if($currentPleb && $currentPleb->association_status->value > 1)
<div class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400"> <div
class="inline-flex flex-col w-full max-w-lg px-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700/60 text-gray-600 dark:text-gray-400">
<div class="flex w-full justify-between items-start"> <div class="flex w-full justify-between items-start">
<div class="flex"> <div class="flex">
<svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" height="16" viewBox="0 0 16 16"> <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path> height="16" viewBox="0 0 16 16">
<path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
</svg> </svg>
<div> <div>
<div class="font-medium text-gray-800 dark:text-gray-100 mb-1">Dein aktueller Status: {{ $currentPleb->association_status->label() }}</div> <div class="font-medium text-gray-800 dark:text-gray-100 mb-1">Dein
aktueller
Status: {{ $currentPleb->association_status->label() }}</div>
</div> </div>
</div> </div>
</div> </div>