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

Initial work on better admin page styling

Browse source
This commit is contained in:
Jonny Barnes 2026-08-21 15:26:01 +01:00
commit 30ec2ec0e8
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
7 changed files with 104 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

65
resources/css/admin-tokens.css Normal file
View file

@ -0,0 +1,65 @@
@layer components {
.token-list {
width: 100%;
border-collapse: collapse;
margin-block-start: 1em;
th,
td {
text-align: left;
padding: 0.6em 0.8em;
border-bottom: 1px solid var(--clr-border);
vertical-align: middle;
}
th {
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.03em;
opacity: 0.7;
}
tr.is-revoked {
opacity: 0.6;
}
a {
word-break: break-all;
}
}
.badge,
.token-list button.revoke {
display: inline-block;
padding: 0.2em 0.7em;
border-radius: 999px;
font-size: 0.85em;
line-height: 1.5;
white-space: nowrap;
}
.badge {
background: transparent;
border: 1px solid currentcolor;
}
.badge-active {
color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));
}
.badge-revoked {
color: var(--clr-text);
}
.token-list button.revoke {
background: light-dark(oklch(92% 0.15 25deg), oklch(30% 0.12 25deg));
color: light-dark(oklch(30% 0.15 25deg), oklch(92% 0.12 25deg));
border: 1px solid transparent;
cursor: pointer;
transition: background-color 150ms ease;
}
.token-list button.revoke:hover {
background: light-dark(oklch(80% 0.2 25deg), oklch(45% 0.18 25deg));
}
}

1
resources/css/app.css
View file

@ -8,3 +8,4 @@
@import url('notes.css');
@import url('pagination.css');
@import url('theme-selector.css');
@import url('admin-tokens.css');

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

@ -7,21 +7,41 @@
@if($tokens->isEmpty())
<p>No tokens have been issued.</p>
@else
<ul>
@foreach($tokens as $token)
<li>
{{ $token->client_id }} — scope: {{ $token->scope }} — issued {{ $token->created_at->diffForHumans() }}
@if($token->isRevoked)
— revoked {{ $token->revoked_at->diffForHumans() }}
@else
<form action="/admin/tokens/{{ $token->id }}/revoke" method="post">
{{ csrf_field() }}
{{ method_field('PUT') }}
<button type="submit" name="revoke">Revoke</button>
</form>
@endif
</li>
@endforeach
</ul>
<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>
@endif
@stop