fix: timeline display (#74)

code4romania · Nov 23, 2024 · dc65f05 · dc65f05
1 parent 478f6c2
commit dc65f05
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 14 deletions.
diff --git a/app/View/Components/Timeline.php b/app/View/Components/Timeline.php
@@ -49,4 +49,11 @@ public function isActiveElection(Election $election): bool
     {
         return $this->election?->is($election);
     }
+
+    public function isLiveElectionGroup(Collection $elections): bool
+    {
+        return $elections->contains(
+            fn (Election $election) => $election->is_live
+        );
+    }
 }
diff --git a/resources/views/components/timeline/index.blade.php b/resources/views/components/timeline/index.blade.php
@@ -71,24 +71,33 @@ class="text-xl font-bold text-slate-900"
                                     :url="$elections->first()->getDefaultUrl()"
                                     :label="$type" />
                             @else
+                                @php
+                                    $isLiveGroup = $isLiveElectionGroup($elections);
+                                @endphp
+
                                 <li x-data="{ open: @js($isActiveElectionType($type)) }">
                                     <button
                                         type="button"
-                                        class="flex items-center justify-between"
-                                        ::class="{ '-rotate-90': open }"
+                                        class="flex gap-1 justify-between text-left w-full"
                                         @@click="open = !open">
-                                        <span>{{ $type }}</span>
 
-                                        <x-ri-arrow-down-s-fill
-                                            class="w-4 h-4 text-slate-500"
+                                        <x-ri-arrow-right-s-fill
+                                            class="w-4 h-6 -ml-5 text-slate-500"
+                                            ::class="{ 'rotate-90': open }"
                                             x-cloak />
+
+                                        <span class="flex-1">{{ $type }}</span>
+
+                                        @if ($isLiveGroup)
+                                            <x-timeline.live />
+                                        @endif
                                     </button>
 
-                                    <ul class="pl-4">
+                                    <ul class="pl-4" x-show="open">
                                         @foreach ($elections as $election)
                                             <x-timeline.item
                                                 :isActive="$isActiveElection($election)"
-                                                :isLive="$election->is_live"
+                                                :isLive="!$isLiveGroup && $election->is_live"
                                                 :election="$election"
                                                 :url="$election->getDefaultUrl()"
                                                 :label="$election->title" />

diff --git a/resources/views/components/timeline/item.blade.php b/resources/views/components/timeline/item.blade.php
@@ -15,15 +15,11 @@
         href="{{ $url }}"
         @if ($election->is_visible) wire:navigate
         @else target="_blank" rel="noopener noreferrer" @endif
-        class="flex gap-1">
-        <span @class(['font-semibold' => $isActive])>{{ $label }}</span>
+        class="flex w-full gap-1">
+        <span @class(['flex-1', 'font-semibold' => $isActive])>{{ $label }}</span>
 
         @if ($isLive)
-            <span class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5">
-                <x-icon-dot class="h-1.5 w-1.5 fill-white animate-pulse" />
-
-                <span class="text-xs font-bold text-red-50">LIVE</span>
-            </span>
+            <x-timeline.live />
         @endif
     </a>
 

diff --git a/resources/views/components/timeline/live.blade.php b/resources/views/components/timeline/live.blade.php
@@ -0,0 +1,7 @@
+<div class="flex items-center h-6 shrink-0">
+    <span class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5">
+        <x-icon-dot class="h-1.5 w-1.5 fill-white animate-pulse" />
+
+        <span class="text-xs font-bold text-red-50">LIVE</span>
+    </span>
+</div>