fix: improve profile avatar alignment and styling
- Add left margin to inset avatar from banner edge - Use dark background color for avatar - Add object-fit: cover to prevent image stretching - Add profile-avatar CSS class with border and shadow 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a21b5289c1
commit
0d945d5bfd
2 changed files with 13 additions and 6 deletions
|
|
@ -155,19 +155,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Profile Section -->
|
<!-- Profile Section -->
|
||||||
<q-card-section class="q-pt-none" style="margin-top: -50px">
|
<q-card-section class="q-pt-none q-ml-md" style="margin-top: -50px">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Profile Image -->
|
<!-- Profile Image -->
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<q-avatar
|
<q-avatar size="100px" color="dark" class="profile-avatar">
|
||||||
size="100px"
|
|
||||||
style="border: 4px solid white; background: white"
|
|
||||||
class="flex flex-center"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
v-if="merchantConfig && merchantConfig.picture"
|
v-if="merchantConfig && merchantConfig.picture"
|
||||||
:src="merchantConfig.picture"
|
:src="merchantConfig.picture"
|
||||||
@error="handleImageError"
|
@error="handleImageError"
|
||||||
|
style="object-fit: cover"
|
||||||
/>
|
/>
|
||||||
<q-icon
|
<q-icon
|
||||||
v-else
|
v-else
|
||||||
|
|
|
||||||
|
|
@ -424,6 +424,16 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-avatar {
|
||||||
|
border: 3px solid var(--q-dark-page);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-avatar .q-avatar__content {
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template id="nostr-keys-dialog"
|
<template id="nostr-keys-dialog"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue