jonny/jonnybarnes.uk
Watch
1
0
Fork
You've already forked jonnybarnes.uk
 0
Code Issues 7 Pull requests Projects Releases 33 Packages Wiki Activity Actions

Restyle the Micropub tokens admin table

Browse source 
Breaks the table out of the centred content column to full page
width via a subgrid on <main> (adds a reusable .full-bleed utility),
and reworks the table itself to match a Claude Design mockup: a
rounded card wrapper, scope values as pill chips, a dotted status
pill, and proportional column widths. Colours use the site's
existing --primary-hue/light-dark() tokens so it stays correct in
both themes. The card scrolls horizontally on narrow viewports
instead of clipping content.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHN7V9kyZxrsxaspMSqoGJ
This commit is contained in:
Jonny Barnes 2026-08-21 16:05:48 +01:00
commit 6a0bb623fc
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
7 changed files with 135 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

80
resources/views/admin/tokens/index.blade.php
View file

@ -7,41 +7,49 @@
@if($tokens->isEmpty())
<p>No tokens have been issued.</p>
@else
<table class="token-list">
<thead>
<tr>
<th scope="col">Client</th>
<th scope="col">Scope</th>
<th scope="col">Issued</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach($tokens as $token)
<tr class="{{ $token->isRevoked ? 'is-revoked' : '' }}">
<td><a href="{{ $token->client_id }}" rel="noopener">{{ $token->client_id }}</a></td>
<td>{{ $token->scope }}</td>
<td><time datetime="{{ $token->created_at->toIso8601String() }}" title="{{ $token->created_at }}">{{ $token->created_at->diffForHumans() }}</time></td>
<td>
@if($token->isRevoked)
<span class="badge badge-revoked">Revoked {{ $token->revoked_at->diffForHumans() }}</span>
@else
<span class="badge badge-active">Active</span>
@endif
</td>
<td>
@unless($token->isRevoked)
<form action="/admin/tokens/{{ $token->id }}/revoke" method="post" onsubmit="return confirm('Revoke this token? This cannot be undone.')">
{{ csrf_field() }}
{{ method_field('PUT') }}
<button type="submit" class="revoke" name="revoke">Revoke</button>
</form>
@endunless
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="full-bleed token-list-wrapper">
<table class="token-list">
<thead>
<tr>
<th scope="col">Client</th>
<th scope="col">Scope</th>
<th scope="col">Issued</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach($tokens as $token)
<tr class="{{ $token->isRevoked ? 'is-revoked' : '' }}">
<td><a href="{{ $token->client_id }}" rel="noopener">{{ $token->client_id }}</a></td>
<td>
<span class="scope-chips">
@foreach(explode(' ', $token->scope) as $scope)
<span class="scope-chip">{{ $scope }}</span>
@endforeach
</span>
</td>
<td><time datetime="{{ $token->created_at->toIso8601String() }}" title="{{ $token->created_at }}">{{ $token->created_at->diffForHumans() }}</time></td>
<td>
@if($token->isRevoked)
<span class="badge badge-revoked">Revoked {{ $token->revoked_at->diffForHumans() }}</span>
@else
<span class="badge badge-active"><span class="dot"></span>Active</span>
@endif
</td>
<td>
@unless($token->isRevoked)
<form action="/admin/tokens/{{ $token->id }}/revoke" method="post" onsubmit="return confirm('Revoke this token? This cannot be undone.')">
{{ csrf_field() }}
{{ method_field('PUT') }}
<button type="submit" class="revoke" name="revoke">Revoke</button>
</form>
@endunless
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
@stop