moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve admin page forms for mobile

Browse source 
Stack passkey and token input forms vertically on mobile with full-width
fields and buttons. Collapse Delete/Revoke buttons to icon-only squares
on mobile, expanding to show text labels on larger screens.
This commit is contained in:
Jon Seager 2026-02-11 08:59:52 +00:00
parent 3a32d9725a
commit 76445f49ae
No known key found for this signature in database
1 changed files with 45 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
templates/pages/admin.html
View file

@ -48,10 +48,12 @@
{% if passkeys.len() > 1 %} {% if passkeys.len() > 1 %}
<button <button
type="button" type="button"
class="shrink-0 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt" class="shrink-0 inline-flex items-center justify-center rounded-md border text-accent transition hover:text-text hover:bg-surface-alt h-8 w-8 sm:h-auto sm:w-auto sm:gap-2 sm:px-4 sm:py-2 sm:text-sm sm:font-medium"
onclick="deletePasskey({{ passkey.id }}, '{{ passkey.name }}')" onclick="deletePasskey({{ passkey.id }}, '{{ passkey.name }}')"
aria-label="Delete passkey"
> >
{{ icons::delete("h-4 w-4") }} Delete {{ icons::delete("h-4 w-4") }}
<span class="hidden sm:inline">Delete</span>
</button> </button>
{% endif %} {% endif %}
</div> </div>
@ -76,8 +78,8 @@
class="mb-3 hidden rounded-md bg-error-bg border border-error-border p-2 text-sm text-error-text" class="mb-3 hidden rounded-md bg-error-bg border border-error-border p-2 text-sm text-error-text"
role="alert" role="alert"
></div> ></div>
<div class="flex items-end gap-3"> <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm sm:flex-1">
<span class="text-text">Passkey Name</span> <span class="text-text">Passkey Name</span>
<input <input
type="text" type="text"
@ -88,22 +90,24 @@
placeholder="e.g. MacBook Touch ID, iPhone" placeholder="e.g. MacBook Touch ID, iPhone"
/> />
</label> </label>
<div class="flex gap-3">
<button <button
id="add-passkey-btn" id="add-passkey-btn"
type="button" type="button"
onclick="registerPasskey()" onclick="registerPasskey()"
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" class="flex-1 inline-flex items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed sm:flex-initial"
> >
{{ icons::key("h-4 w-4") }} Register {{ icons::key("h-4 w-4") }} Register
</button> </button>
<button <button
type="button" type="button"
data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''" data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt" class="flex-1 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt sm:flex-initial"
> >
{{ icons::x_mark("h-4 w-4") }} Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
</div> </div>
</div>
<div <div
id="add-passkey-loading" id="add-passkey-loading"
class="mt-3 hidden flex items-center gap-3 text-sm text-accent" class="mt-3 hidden flex items-center gap-3 text-sm text-accent"
@ -170,10 +174,12 @@
</div> </div>
<button <button
type="button" type="button"
class="shrink-0 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt" class="shrink-0 inline-flex items-center justify-center rounded-md border text-accent transition hover:text-text hover:bg-surface-alt h-8 w-8 sm:h-auto sm:w-auto sm:gap-2 sm:px-4 sm:py-2 sm:text-sm sm:font-medium"
onclick="revokeToken({{ token.id }}, '{{ token.name }}')" onclick="revokeToken({{ token.id }}, '{{ token.name }}')"
aria-label="Revoke token"
> >
{{ icons::delete("h-4 w-4") }} Revoke {{ icons::delete("h-4 w-4") }}
<span class="hidden sm:inline">Revoke</span>
</button> </button>
</div> </div>
{% endfor %} {% endfor %}
@ -199,8 +205,8 @@
if (evt.detail.type === 'finished') { $_creatingToken = false; document.getElementById('token-name').value = '' } if (evt.detail.type === 'finished') { $_creatingToken = false; document.getElementById('token-name').value = '' }
else if (evt.detail.type === 'error') { $_creatingToken = false; $_tokenError = 'Failed to create token.' }" else if (evt.detail.type === 'error') { $_creatingToken = false; $_tokenError = 'Failed to create token.' }"
> >
<div class="flex items-end gap-3"> <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 flex flex-col gap-1 text-sm"> <label class="flex flex-col gap-1 text-sm sm:flex-1">
<span class="text-text">Token Name</span> <span class="text-text">Token Name</span>
<input <input
type="text" type="text"
@ -212,9 +218,10 @@
placeholder="e.g. laptop-cli, ci-server" placeholder="e.g. laptop-cli, ci-server"
/> />
</label> </label>
<div class="flex gap-3">
<button <button
type="submit" type="submit"
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" class="flex-1 inline-flex items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed sm:flex-initial"
data-attr:disabled="$_creatingToken" data-attr:disabled="$_creatingToken"
> >
{{ icons::plus("h-4 w-4") }} Create {{ icons::plus("h-4 w-4") }} Create
@ -222,11 +229,12 @@
<button <button
type="button" type="button"
data-on:click="$_showTokenForm = false; $_tokenError = ''" data-on:click="$_showTokenForm = false; $_tokenError = ''"
class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt" class="flex-1 inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt sm:flex-initial"
> >
{{ icons::x_mark("h-4 w-4") }} Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>