LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

simplify placeholder animation

Browse source
This commit is contained in:
Sean Yesmunt 2019-01-08 11:58:05 -05:00
parent cac767a3b8
commit 076f8a116b
3 changed files with 9 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/component/fileCard/view.jsx
View file

@ -76,7 +76,7 @@ class FileCard extends React.PureComponent<Props> {
if ((!claim && !pending) || placeholder) {
return (
<li className="media-card media--placeholder small">
<li className="media-card media--placeholder">
<div className="media__thumb media__thumb--placeholder" />
<div className="media__title media__title--placeholder" />
<div className="media__channel media__channel--placeholder" />

6
src/renderer/scss/component/_media.scss
View file

@ -374,10 +374,14 @@
@include thumbnail;
&:not(.media__thumb--nsfw):not(.media__thumb--placeholder) {
background-color: $lbry-black;
background-color: $lbry-gray-2;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
html[data-theme='dark'] & {
background-color: rgba($lbry-white, 0.1);
}
}
}

18
src/renderer/scss/init/_mixins.scss
View file

@ -33,23 +33,11 @@
}
@mixin placeholder {
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: loading-animation;
animation-timing-function: linear;
background-color: transparent;
background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%);
background-repeat: repeat;
background-size: 500px;
animation: pulse 2s infinite ease-in-out;
background-color: $lbry-gray-2;
html[data-theme='dark'] & {
background-image: linear-gradient(
to right,
rgba($lbry-white, 0.1) 10%,
transparent 80%,
rgba($lbry-white, 0.1) 100%
);
background-color: rgba($lbry-white, 0.1);
}
}