GE monogram avatar fallback + per-page document titles

Users without a profile photo show the GE monogram (sidebar, employee
detail, directory thumbs). Document titles become
'<Facility> ShopDB - <Page>' so copied links and tabs identify the
page.
This commit is contained in:
2026-07-17 11:31:39 -04:00
parent 9ba20100de
commit c89f4d398b
4 changed files with 65 additions and 7 deletions

View File

@@ -42,7 +42,8 @@
<div class="user-menu">
<template v-if="authStore.isAuthenticated">
<div class="user-identity">
<img v-if="authStore.avatarUrl" :src="authStore.avatarUrl" class="user-avatar"
<img :src="authStore.avatarUrl || fallbackAvatar" class="user-avatar"
:class="{ 'ge-avatar-fallback': !authStore.avatarUrl }"
:alt="authStore.displayName" @error="onAvatarError" />
<div class="user-ident">
<div class="username">{{ authStore.displayName }}</div>
@@ -245,9 +246,12 @@ async function handleLogout() {
router.push('/login')
}
// Hide a broken avatar (photo filename set but file missing).
const fallbackAvatar = withBase('/ge-monogram.svg')
// A broken avatar (photo set but file missing) degrades to the GE monogram.
function onAvatarError(event) {
event.target.style.display = 'none'
event.target.src = fallbackAvatar
event.target.classList.add('ge-avatar-fallback')
}
</script>
@@ -257,6 +261,7 @@ function onAvatarError(event) {
.user-menu { display: flex; flex-direction: column; gap: 0.6rem; }
.user-identity { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.ge-avatar-fallback { object-fit: contain; padding: 4px; background: #fff; }
.user-ident { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.user-ident .username { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-sso { font-size: 0.72rem; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }