Initial work on better admin page styling

public/assets/css/app.css

@@ -1,2 +1,2 @@
-@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:2/3}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}}
+@layer reset{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}}@layer base{:root{color-scheme:light dark;--primary-hue:307;--clr-text:light-dark(oklch(5% .1 var(--primary-hue)),oklch(100% .1 var(--primary-hue)));--clr-background:light-dark(oklch(100% .1 var(--primary-hue)),oklch(15% .15 var(--primary-hue)));--clr-border:light-dark(oklch(90% .2 var(--primary-hue)),oklch(25% .1 var(--primary-hue)));--clr-snow-fall:light-dark(oklch(25% .15 var(--primary-hue)),oklch(85% .2 var(--primary-hue)))}body{background-color:var(--clr-background);color:var(--clr-text)}:root{--border-radius:8px}html{font-size:125%}body{grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr min(80ch,80vw) 1fr;padding-inline:4vw;display:grid;&>header{grid-column:1/-1}&>main{grid-column:2/3}&>footer{grid-column:1/-1;margin-block-start:2ex;& search form{flex-direction:row;align-items:center;gap:1ex;display:flex;& input{min-width:0}}}}.h-feed{flex-direction:column;gap:2ex;display:flex}}@layer components{.h-entry{& pre{padding:1rem}}body>header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1rem;display:grid;& a{text-decoration:none}& h1{text-wrap:nowrap;margin:0}& nav{flex-direction:row;gap:.5rem;display:flex;@media screen and (width<=1100px){flex-wrap:wrap;grid-area:2/1/auto/span 3}}}.note{border:1px solid var(--clr-border);border-radius:var(--border-radius);flex-direction:column;padding:1ex 2ex;display:flex;& .e-content{&>p:first-child{margin-block-start:0}& .u-photo{width:100%;height:auto}}& .syndication-links{flex-direction:row;gap:1ex;display:flex;& svg{border-radius:4px;width:auto;height:1lh}}}.reply-to{border:1px solid var(--clr-border);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);border-bottom:none;margin-inline:2ex;padding-inline:1ex;font-size:85%}.pagination{flex-direction:row;justify-content:center;align-items:center;display:flex;& div{flex-direction:row;gap:1ex;display:flex}}#theme-selector{& button{appearance:none;background:0 0;border:none;&:hover{cursor:pointer}}& #theme-selector-dropdown{position-area:block-end span-inline-start;border:2px solid var(--clr-border);background-color:var(--clr-background);color:var(--clr-text);margin:0;position:absolute;& fieldset{border:0;flex-direction:row;gap:1ch;display:flex;& input{display:none}}}@media (prefers-reduced-motion:no-preference){& #theme-selector-dropdown{&:popover-open{opacity:1;transform:translateY(0)scale(1);@starting-style{opacity:0;transform:translateY(30px)scale(0)}}opacity:0;transition:transform, opacity, display allow-discrete, overlay allow-discrete;transform-origin:100% 0;transition-duration:.5s;transform:translateY(0)scale(0)}}}::view-transition-group(changing-theme){animation-duration:1.25s}::view-transition-new(changing-theme),::view-transition-old(changing-theme){mix-blend-mode:normal}::view-transition-new(changing-theme){animation-name:reveal}::view-transition-old(changing-theme){animation:none}@keyframes reveal{0%{clip-path:polygon(-30% 0,-30% 0,-15% 100%,-10% 115%)}to{clip-path:polygon(-30% 0,130% 0,115% 100%,-10% 115%)}}.token-list{border-collapse:collapse;width:100%;margin-block-start:1em;& th,& td{text-align:left;border-bottom:1px solid var(--clr-border);vertical-align:middle;padding:.6em .8em}& th{text-transform:uppercase;letter-spacing:.03em;opacity:.7;font-size:.85em}& tr.is-revoked{opacity:.6}& a{word-break:break-all}}.badge,.token-list button.revoke{white-space:nowrap;border-radius:999px;padding:.2em .7em;font-size:.85em;line-height:1.5;display:inline-block}.badge{background:0 0;border:1px solid}.badge-active{color:light-dark(oklch(35% .16 145),oklch(75% .16 145))}.badge-revoked{color:var(--clr-text)}.token-list button.revoke{color:light-dark(oklch(30% .15 25),oklch(92% .12 25));cursor:pointer;background:light-dark(oklch(92% .15 25),oklch(30% .12 25));border:1px solid #0000;transition:background-color .15s}.token-list button.revoke:hover{background:light-dark(oklch(80% .2 25),oklch(45% .18 25))}}
 /*# sourceMappingURL=/assets/css/app.css.map */

resources/css/admin-tokens.css

@@ -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));
+  }
+}

resources/css/app.css

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

resources/views/admin/tokens/index.blade.php

@@ -7,21 +7,41 @@
     @if($tokens->isEmpty())
         <p>No tokens have been issued.</p>
     @else
-        <ul>
+        <table class="token-list">
-        @foreach($tokens as $token)
+            <thead>
-            <li>
+                <tr>
-                {{ $token->client_id }} — scope: {{ $token->scope }} — issued {{ $token->created_at->diffForHumans() }}
+                    <th scope="col">Client</th>
-                @if($token->isRevoked)
+                    <th scope="col">Scope</th>
-                    — revoked {{ $token->revoked_at->diffForHumans() }}
+                    <th scope="col">Issued</th>
-                @else
+                    <th scope="col">Status</th>
-                    <form action="/admin/tokens/{{ $token->id }}/revoke" method="post">
+                    <th scope="col">Action</th>
-                        {{ csrf_field() }}
+                </tr>
-                        {{ method_field('PUT') }}
+            </thead>
-                        <button type="submit" name="revoke">Revoke</button>
+            <tbody>
-                    </form>
+            @foreach($tokens as $token)
-                @endif
+                <tr class="{{ $token->isRevoked ? 'is-revoked' : '' }}">
-            </li>
+                    <td><a href="{{ $token->client_id }}" rel="noopener">{{ $token->client_id }}</a></td>
-        @endforeach
+                    <td>{{ $token->scope }}</td>
-        </ul>
+                    <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