hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

simpligy gradient style and improve other-actions layout

Browse source
This commit is contained in:
Henry Jameson 2025-07-31 21:28:00 +03:00
commit 2008fcce22
4 changed files with 69 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/user_card/user_card.scss
View file

@ -64,40 +64,20 @@
}
.background-image {
width: calc(100% + 2.4em);
margin-left: -1.2em;
margin-right: -1.2em;
margin-top: -3.4em;
margin-bottom: -4.5em;
aspect-ratio: 3;
padding: 0;
position: absolute;
inset: 0;
mask:
linear-gradient(to top, white 0%, transparent 20%) bottom no-repeat,
linear-gradient(to top, white 0%, white 100%);
// Autoprefixer seem to ignore this one, and also syntax is different
/* stylelint-disable mask-composite */
/* stylelint-disable declaration-property-value-no-unknown */
/* stylelint-disable scss/declaration-property-value-no-unknown */
/* TODO check if this is still needed */
mask-composite: xor;
/* stylelint-enable scss/declaration-property-value-no-unknown */
/* stylelint-enable declaration-property-value-no-unknown */
/* stylelint-enable mask-composite */
mask-composite: exclude;
right: -1.2em;
left: -1.2em;
top: -1.4em;
padding: 0;
mask: linear-gradient(to top, transparent 1em, white 5em) bottom no-repeat;
background-size: cover;
mask-size: 100%;
border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
background-color: var(--profileBg);
z-index: -2;
&.hide-bio {
mask-size: 100% 40px;
}
}
&-bio {
@ -152,6 +132,7 @@
text-align: right;
.user-identity {
aspect-ratio: 3;
min-width: 0;
display: flex;
align-items: flex-end;
@ -187,6 +168,7 @@
grid-gap: 0.6em;
font-size: 110%;
z-index: 2;
align-self: start;
a, button, div {
text-align: center;
@ -235,7 +217,9 @@
}
.user-summary {
display: block;
align-self: stretch;
display: flex;
flex-direction: column;
margin-left: 0.6em;
text-align: left;
text-overflow: ellipsis;
@ -255,6 +239,7 @@
.top-line {
display: flex;
flex: 1;
// these two normalize position and height when custom emoji are used
line-height: 2;
margin-bottom: -0.2em;
@ -289,6 +274,7 @@
}
.user-name {
align-self: end;
text-overflow: ellipsis;
overflow: hidden;
flex: 1 1 auto;

88
src/components/user_card/user_card.vue
View file

@ -5,6 +5,50 @@
>
<div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
<div class="user-info">
<div class="user-identity">
<div
:class="{ 'hide-bio': hideBio }"
:style="style"
class="background-image"
/>
<a
v-if="avatarAction === 'zoom'"
class="user-info-avatar -link"
@click="zoomAvatar"
>
<UserAvatar :user="user" />
<div class="user-info-avatar -link -overlay">
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="search-plus"
/>
</div>
</a>
<UserAvatar
v-else-if="typeof avatarAction === 'function'"
class="user-info-avatar"
:user="user"
@click="avatarAction"
/>
<router-link
v-else
class="user-info-avatar"
:to="userProfileLink(user)"
>
<UserAvatar :user="user" />
</router-link>
<div class="user-summary">
<div class="top-line">
<router-link
:to="userProfileLink(user)"
class="user-name"
>
<RichContent
:title="user.name"
:html="user.name"
:emoji="user.emoji"
/>
</router-link>
<div class="other-actions">
<button
v-if="!isOtherUser && user.is_local"
@ -56,50 +100,6 @@
/>
</button>
</div>
<div
:class="{ 'hide-bio': hideBio }"
:style="style"
class="background-image"
/>
<div class="user-identity">
<a
v-if="avatarAction === 'zoom'"
class="user-info-avatar -link"
@click="zoomAvatar"
>
<UserAvatar :user="user" />
<div class="user-info-avatar -link -overlay">
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="search-plus"
/>
</div>
</a>
<UserAvatar
v-else-if="typeof avatarAction === 'function'"
class="user-info-avatar"
:user="user"
@click="avatarAction"
/>
<router-link
v-else
class="user-info-avatar"
:to="userProfileLink(user)"
>
<UserAvatar :user="user" />
</router-link>
<div class="user-summary">
<div class="top-line">
<router-link
:to="userProfileLink(user)"
class="user-name"
>
<RichContent
:title="user.name"
:html="user.name"
:emoji="user.emoji"
/>
</router-link>
</div>
<div class="bottom-line">
<div class="user-screen-name">

17
src/components/user_panel/user_panel.vue
View file

@ -28,24 +28,7 @@
backdrop-filter: var(--backdrop-filter);
}
.other-actions {
top: -0.6em;
right: -0.6em;
a, button, div {
width: 2em;
height: 2em;
line-height: 2em;
}
}
.user-info {
margin-bottom: -1em;
.background-image {
max-height: 5.6em;
margin-bottom: -4.6em;
}
.Avatar {
width: 5em;

5
src/components/user_popover/user_popover.vue
View file

@ -36,11 +36,6 @@
&.popover {
overflow: hidden;
padding: 0.6em;
.background-image {
max-height: 6em;
margin-bottom: -4.5em;
}
}
}
/* stylelint-enable block-no-empty */