bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Handle autoPlayGif for avatars and banners

Browse source
This commit is contained in:
Bárbara de Castro Fernandes 2020-06-10 10:30:33 -03:00
parent e19f350111
commit 52f3f8ce8d
9 changed files with 36 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/avatar.js
View file

Binary file not shown.

BIN
app/soapbox/components/avatar_composite.js
View file

Binary file not shown.

BIN
app/soapbox/components/avatar_overlay.js
View file

Binary file not shown.

BIN
app/soapbox/components/still_image.js
View file

Binary file not shown.

BIN
app/soapbox/features/account/components/header.js
View file

Binary file not shown.

BIN
app/soapbox/features/edit_profile/components/profile_preview.js
View file

Binary file not shown.

BIN
app/soapbox/features/ui/components/user_panel.js
View file

Binary file not shown.

4
app/styles/accounts.scss
View file

@ -24,7 +24,7 @@
background: var(--background-color);
border-radius: 4px 4px 0 0;
img {
.still-image {
display: block;
width: 100%;
height: 100%;
@ -61,7 +61,7 @@
height: 48px;
padding-top: 2px;
img {
.still-image {
width: 100%;
height: 100%;
display: block;

35
app/styles/components/account-header.scss
View file

@ -21,7 +21,6 @@
background: var(--accent-color--med);
@media screen and (max-width: 895px) {height: 225px;}
&--none {height: 125px;}
img {
object-fit: cover;
display: block;
@ -29,6 +28,23 @@
height: 100%;
margin: 0;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
top: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
}
}
&__bar {
@ -58,6 +74,23 @@
background-size: 200px 200px;
}
.still-image--play-on-hover::before {
content: 'GIF';
position: absolute;
color: var(--primary-text-color);
background: var(--foreground-color);
bottom: 15%;
left: 15%;
padding: 1px 4px;
border-radius: 2px;
font-size: 8px;
font-weight: 600;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 13px;
}
@media screen and (max-width: 895px) {
top: -45px;
left: 10px;