feat(home): improve mobile claims ux (#1720)

* feat(home): improve mobile claims ux

* feat: add timestamp tooltip to claim table rows

* fix: add cursor-help class for title attrs

resources/views/community/components/claims/claim-mobile-block.blade.php

@@ -0,0 +1,39 @@
+<?php
+use App\Community\Enums\ClaimSetType;
+use App\Community\Enums\ClaimStatus;
+use Illuminate\Support\Carbon;
+
+$claimSetTypeCopy = ClaimSetType::toString(ClaimSetType::NewSet);
+if ($claim['SetType'] !== ClaimSetType::NewSet) {
+ $claimSetTypeCopy = ClaimSetType::toString(ClaimSetType::Revision);
+}
+
+$targetTimestamp = $claim['Status'] === ClaimStatus::Active ? $claim['Created'] : $claim['DoneTime'];
+$timeAgo = Carbon::createFromFormat("Y-m-d H:i:s", $targetTimestamp)->diffForHumans();
+
+$gameSystemIconSrc = getSystemIconUrl($claim['ConsoleID']);
+?>
+
+<div class="rounded p-2 bg-embed w-full">
+ <div class="flex items-center gap-x-2.5">
+ {!! gameAvatar($claim, label: false, iconSize: 48, iconClass: 'border-0 rounded-sm badgeimg') !!}
+
+ <div class="flex flex-col gap-y-0.5 w-full">
+ <a class="leading-4 cursor-pointer">
+ {!! renderGameTitle($claim['GameTitle']) !!}
+ </a>
+
+ <div class="flex justify-between w-full text-xs tracking-tighter">
+ <div>
+ <img src="{{ $gameSystemIconSrc }}" width="18" height="18" alt="{{ $claim['ConsoleName'] }} console icon">
+ <span>{{ $claim['ConsoleName'] }}</span>
+ </div>
+ </div>
+
+ <div class="text-xs flex justify-between">
+ {!! userAvatar($claim['User'], iconSize: 14) !!}
+ <span class="text-xs tracking-tighter">{{ $claimSetTypeCopy }}, {{ $timeAgo }}</span>
+ </div>
+ </div>
+ </div>
+</div>

resources/views/community/components/claims/finished-claim-table-row.blade.php → resources/views/community/components/claims/claim-table-row.blade.php

@@ -1,14 +1,15 @@
 <?php
-
 use App\Community\Enums\ClaimSetType;
+use App\Community\Enums\ClaimStatus;
 use Illuminate\Support\Carbon;
 
 $claimSetTypeCopy = ClaimSetType::toString(ClaimSetType::NewSet);
 if ($claim['SetType'] !== ClaimSetType::NewSet) {
  $claimSetTypeCopy = ClaimSetType::toString(ClaimSetType::Revision);
 }
 
-$finishedTimeAgo = Carbon::createFromFormat("Y-m-d H:i:s", $claim['DoneTime'])->diffForHumans();
+$targetTimestamp = $claim['Status'] === ClaimStatus::Active ? $claim['Created'] : $claim['DoneTime'];
+$timeAgo = Carbon::createFromFormat("Y-m-d H:i:s", $targetTimestamp)->diffForHumans();
 ?>
 
 <tr>
@@ -24,5 +25,10 @@
 
  <td class="pr-0">{!! userAvatar($claim['User']) !!}</td>
  <td>{{ $claimSetTypeCopy }}</td>
- <td class="smalldate">{{ $finishedTimeAgo }}</td>
+ <td 
+ class="smalldate cursor-help" 
+ title="{{ getNiceDate(strtotime($targetTimestamp)) }}"
+ >
+ {{ $timeAgo }}
+ </td>
 </tr>

resources/views/community/components/claims/finished-claims.blade.php

@@ -114,7 +114,13 @@
  <p>Couldn't find any new sets/revisions.</p>
  </div>
  @else
- <div class="overflow-x-auto sm:overflow-x-hidden">
+ <div class="flex flex-col gap-y-1 sm:hidden">
+ @foreach($claimData as $claim)
+ <x-claims.claim-mobile-block :claim="$claim" />
+ @endforeach
+ </div>
+
+ <div class="hidden sm:block overflow-x-hidden">
  <table class="table-highlight mb-1">
  <thead>
  <tr class="do-not-highlight">
@@ -127,7 +133,7 @@
 
  <tbody>
  @foreach($claimData as $claim)
- <x-claims.finished-claim-table-row :claim="$claim" />
+ <x-claims.claim-table-row :claim="$claim" />
  @endforeach
  </tbody>
  </table>

resources/views/community/components/claims/new-claims.blade.php

@@ -17,19 +17,26 @@
  <p>Couldn't find any sets in progress.</p>
  </div>
  @else
- <div class="overflow-x-auto sm:overflow-x-hidden">
+ <div class="flex flex-col gap-y-1 sm:hidden">
+ @foreach($claimData as $claim)
+ <x-claims.claim-mobile-block :claim="$claim" />
+ @endforeach
+ </div>
+
+ <div class="hidden sm:block">
  <table class="table-highlight mb-1">
  <thead>
  <tr class="do-not-highlight">
  <th>Game</th>
  <th>Dev</th>
+ <th>Type</th>
  <th class="whitespace-nowrap">Started</th>
  </tr>
  </thead>
 
  <tbody>
  @foreach($claimData as $claim)
- <x-claims.new-claim-table-row :claim="$claim" />
+ <x-claims.claim-table-row :claim="$claim" />
  @endforeach
  </tbody>
  </table>