forked from AkkomaGang/akkoma-fe
fixed some issues related to user avatar
This commit is contained in:
parent
7de78b1401
commit
815f230ac7
7 changed files with 17 additions and 16 deletions
|
@ -60,6 +60,7 @@
|
|||
@click="openModal"
|
||||
>
|
||||
<StillImage
|
||||
class="image"
|
||||
:referrerpolicy="referrerpolicy"
|
||||
:mimetype="attachment.mimetype"
|
||||
:src="attachment.large_thumb_url || attachment.url"
|
||||
|
@ -281,8 +282,11 @@
|
|||
}
|
||||
|
||||
.image-attachment {
|
||||
&,
|
||||
& .image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.avatar.still-image {
|
||||
.Avatar {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.still-image.avatar {
|
||||
.Avatar {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
margin-right: 0.5em;
|
||||
|
|
|
@ -6,7 +6,7 @@ $status-margin: 0.75em;
|
|||
.Status {
|
||||
min-width: 0;
|
||||
|
||||
&:hover .avatar {
|
||||
&:hover {
|
||||
--still-image-img: visible;
|
||||
--still-image-canvas: hidden;
|
||||
}
|
||||
|
|
|
@ -30,8 +30,6 @@
|
|||
position: relative;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
@ -68,6 +66,7 @@
|
|||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
z-index: 2;
|
||||
visibility: var(--still-image-label-visibility, visible);
|
||||
}
|
||||
|
||||
&:hover canvas {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<StillImage
|
||||
class="avatar"
|
||||
class="Avatar"
|
||||
:alt="user.screen_name"
|
||||
:title="user.screen_name"
|
||||
:src="imgSrc(user.profile_image_url_original)"
|
||||
|
@ -13,7 +13,9 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.avatar.still-image {
|
||||
.Avatar {
|
||||
--still-image-label-visibility: hidden;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
box-shadow: var(--avatarStatusShadow);
|
||||
|
|
|
@ -364,13 +364,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover .animated.avatar {
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
visibility: visible;
|
||||
}
|
||||
&:hover .avatar {
|
||||
--still-image-img: visible;
|
||||
--still-image-canvas: hidden;
|
||||
}
|
||||
|
||||
&-avatar-link {
|
||||
|
|
Loading…
Reference in a new issue