mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2025-12-13 05:26:47 +00:00
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
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user