sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

design: make avatar not jump on load

Browse source
This commit is contained in:
Peter Steinberger 2025-06-24 23:48:39 +02:00
parent a507376596
commit 7d4300c3e3
1 changed files with 48 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
web/src/client/components/auth-login.ts
View file

@ -193,25 +193,32 @@ export class AuthLogin extends LitElement {
? html` ? html`
<!-- Password Login Section (Primary) --> <!-- Password Login Section (Primary) -->
<div class="p-8"> <div class="p-8">
${ <div class="flex flex-col items-center mb-6">
this.userAvatar <div class="w-20 h-20 rounded-full mb-3 overflow-hidden" style="box-shadow: 0 0 20px rgba(124, 230, 161, 0.3);">
? html` ${
<div class="flex flex-col items-center mb-6"> this.userAvatar
<img ? html`
src="${this.userAvatar}" <img
alt="User Avatar" src="${this.userAvatar}"
class="w-20 h-20 rounded-full mb-3 block" alt="User Avatar"
style="box-shadow: 0 0 20px rgba(124, 230, 161, 0.3); aspect-ratio: 1;" class="w-full h-full object-cover"
width="80" width="80"
height="80" height="80"
/> />
<p class="text-dark-text text-lg font-medium"> `
Welcome back, ${this.currentUserId} : html`
</p> <div class="w-full h-full bg-dark-bg-secondary flex items-center justify-center">
</div> <svg class="w-10 h-10 text-dark-text-muted" fill="currentColor" viewBox="0 0 20 20">
` <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
: '' </svg>
} </div>
`
}
</div>
<p class="text-dark-text text-lg font-medium">
Welcome back, ${this.currentUserId || '...'}
</p>
</div>
<form @submit=${this.handlePasswordLogin} class="space-y-4"> <form @submit=${this.handlePasswordLogin} class="space-y-4">
<div> <div>
<label class="form-label text-xs mb-2">Password</label> <label class="form-label text-xs mb-2">Password</label>
@ -242,16 +249,32 @@ export class AuthLogin extends LitElement {
: '' : ''
} }
${ ${
this.authConfig.disallowUserPassword && this.userAvatar this.authConfig.disallowUserPassword
? html` ? html`
<!-- Avatar for SSH-only mode --> <!-- Avatar for SSH-only mode -->
<div class="ssh-key-item"> <div class="ssh-key-item">
<div class="flex flex-col items-center mb-6"> <div class="flex flex-col items-center mb-6">
<img <div class="w-20 h-20 rounded-full mb-3 overflow-hidden border-2 border-dark-border">
src="${this.userAvatar}" ${
alt="User Avatar" this.userAvatar
class="w-20 h-20 rounded-full border-2 border-dark-border mb-3" ? html`
/> <img
src="${this.userAvatar}"
alt="User Avatar"
class="w-full h-full object-cover"
width="80"
height="80"
/>
`
: html`
<div class="w-full h-full bg-dark-bg-secondary flex items-center justify-center">
<svg class="w-10 h-10 text-dark-text-muted" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
</svg>
</div>
`
}
</div>
<p class="text-dark-text text-sm"> <p class="text-dark-text text-sm">
${ ${
this.currentUserId this.currentUserId