From 5623671bada1674ce2243ca6375726bee3dd7d12 Mon Sep 17 00:00:00 2001
From: fsociety <fsociety.mp3@pm.me>
Date: Sun, 29 Sep 2024 22:27:07 +0200
Subject: [PATCH] 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.
---
 .../election/[Election:year].blade.php        | 16 ++++----
 .../election/admin/[Election:year].blade.php  |  2 +-
 .../association/election/index.blade.php      |  2 +-
 .../views/pages/association/profile.blade.php | 37 ++++++++++++-------
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/resources/views/pages/association/election/[Election:year].blade.php b/resources/views/pages/association/election/[Election:year].blade.php
index 35531ae..73a4db3 100644
--- a/resources/views/pages/association/election/[Election:year].blade.php
+++ b/resources/views/pages/association/election/[Election:year].blade.php
@@ -163,11 +163,11 @@ $signEvent = function ($event) {
                     $profile = \App\Models\Profile::query()
                         ->where('pubkey', $event['pubkey'])
                         ->first()
-                        ->toArray();
+                        ?->toArray();
                     $votedFor = \App\Models\Profile::query()
                         ->where('pubkey', str($event['content'])->before(',')->toString())
                         ->first()
-                        ->toArray();
+                        ?->toArray();
 
                     return [
                         'id' => $event['id'],
@@ -182,9 +182,7 @@ $signEvent = function ($event) {
                     ];
                 })
                 ->sortByDesc('created_at')
-                ->unique(function ($event) {
-                    return $event['pubkey'] . $event['type'];
-                })
+                ->unique(fn ($event) => $event['pubkey'] . $event['type'])
                 ->values();
         @endphp
 
@@ -361,7 +359,7 @@ $signEvent = function ($event) {
                 <div class="sticky top-16">
                     <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">
-                        <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>
                                 @if($isNotClosed)
                                     <x-badge success
@@ -421,14 +419,14 @@ $signEvent = function ($event) {
                                                             $votedResult = $loadedEvents->filter(fn ($event) => $event['pubkey'] === $currentPubkey)->firstWhere('type', $type);
                                                         @endphp
                                                         @if($votedResult)
-                                                            <span>Du hast "{{ $votedResult['votedFor']['name'] }}" gewählt</span>
+                                                            <span>Du hast "{{ $votedResult['votedFor']['name'] ?? 'error' }}" gewählt</span>
                                                         @else
                                                             <span>Klicke auf den Kandidaten, den du wählen möchtest.</span>
                                                         @endif
                                                     </div>
                                                 </div>
                                                 <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)
                                                             <div
                                                                 @if($isNotClosed)wire:click="vote('{{ $c['pubkey'] }}', '{{ $type }}')"
@@ -511,7 +509,7 @@ $signEvent = function ($event) {
                                                     <div>{{ $event['created_at'] }}</div>
                                                 </td>
                                                 <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 class="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                                                     <div>{{ $event['type'] }}</div>
diff --git a/resources/views/pages/association/election/admin/[Election:year].blade.php b/resources/views/pages/association/election/admin/[Election:year].blade.php
index fbe6ea0..0699904 100644
--- a/resources/views/pages/association/election/admin/[Election:year].blade.php
+++ b/resources/views/pages/association/election/admin/[Election:year].blade.php
@@ -177,7 +177,7 @@ $loadEvents = function () {
         </div>
 
         <!-- Cards -->
-        <div class="grid grid-cols-12 gap-6">
+        <div class="grid grid-cols-3 gap-6">
 
             @foreach($positions as $key => $position)
                 <div wire:key="pos_{{ $key }}" wire:ignore
diff --git a/resources/views/pages/association/election/index.blade.php b/resources/views/pages/association/election/index.blade.php
index fe6d051..0dfc2a6 100644
--- a/resources/views/pages/association/election/index.blade.php
+++ b/resources/views/pages/association/election/index.blade.php
@@ -37,7 +37,7 @@ $saveElection = function ($index) {
     @volt
     <div class="relative flex h-full">
         @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">
                     {{ $election['year'] }}
                 </div>
diff --git a/resources/views/pages/association/profile.blade.php b/resources/views/pages/association/profile.blade.php
index 8ef6836..c3ea859 100644
--- a/resources/views/pages/association/profile.blade.php
+++ b/resources/views/pages/association/profile.blade.php
@@ -109,11 +109,11 @@ $save = function ($type) {
 
                     <!-- Panel body -->
                     <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 -->
                         <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-show="!$store.nostr.user"/>
                                 <template x-if="$store.nostr.user">
@@ -122,10 +122,11 @@ $save = function ($type) {
                                              x-bind:src="$store.nostr.user.picture"
                                              alt="">
                                         <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>
-                                            <div class="text-sm text-gray-500 dark:text-gray-400"
-                                                 x-text="$store.nostr.user.nip05"></div>
+                                            <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>
                                 </template>
@@ -194,14 +195,19 @@ $save = function ($type) {
 
                         <section>
                             @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">
-                                            <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" 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 class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
+                                                 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>
                                             <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>
                                         </div>
@@ -212,14 +218,19 @@ $save = function ($type) {
 
                         <section>
                             @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">
-                                            <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16" 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 class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
+                                                 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>
                                             <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>