Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Changed post stream placeholder to animation (#7434)

This commit is contained in:
Tim Lange 2019-04-26 18:29:48 +02:00 committed by David Taylor
parent 9f07ced698
commit 1486328756
5 changed files with 69 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
View File

@ -3,21 +3,21 @@
{{#if loading}}
<div class="card-row first-row">
<div class="user-card-avatar">
<div class="card-avatar-placeholder animated-placeholder"></div>
<div class="card-avatar-placeholder animated-placeholder placeholder-animation"></div>
</div>
</div>
<div class="card-row second-row">
<div class="animated-placeholder"></div>
<div class="animated-placeholder placeholder-animation"></div>
</div>
<div class="card-row third-row">
<div class="animated-placeholder"></div>
<div class="animated-placeholder placeholder-animation"></div>
</div>
<div class="card-row fourth-row">
<div class="animated-placeholder"></div>
<div class="animated-placeholder placeholder-animation"></div>
</div>
<div class="card-row sixth-row">
<div class="animated-placeholder"></div>
<div class="animated-placeholder placeholder-animation"></div>
</div>
{{else}}
<div class="card-row first-row">

8
app/assets/javascripts/discourse/widgets/post-placeholder.js.es6
View File

@ -6,12 +6,12 @@ export default createWidget("post-placeholder", {
template: hbs`
<div class='row'>
<div class='topic-avatar'>
<div class='placeholder-avatar'></div>
<div class='placeholder-avatar placeholder-animation'></div>
</div>
<div class='topic-body'>
<div class='placeholder-text'></div>
<div class='placeholder-text'></div>
<div class='placeholder-text'></div>
<div class='placeholder-text placeholder-animation'></div>
<div class='placeholder-text placeholder-animation'></div>
<div class='placeholder-text placeholder-animation'></div>
</div>
</div>
`

25
app/assets/stylesheets/common/base/discourse.scss
View File

@ -33,6 +33,31 @@
}
}
// placeholder
@keyframes placeHolderShimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1100px 0;
}
}
.placeholder-animation {
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: $primary-very-low;
background: linear-gradient(
to right,
$primary-very-low 10%,
$primary-low 18%,
$primary-very-low 33%
);
}
// Base Elements
html {
height: 100%;

21
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1,15 +1,30 @@
.placeholder-avatar {
display: inline-block;
background-color: $primary-low;
width: 45px;
height: 45px;
border-radius: 50%;
position: relative;
overflow: hidden;
&:before {
animation: placeHolderShimmer 4s linear infinite forwards;
position: absolute;
left: 0;
content: "";
background: linear-gradient(
to right,
$primary-very-low 10%,
$primary-low 28%,
$primary-very-low 43%
);
height: 45px;
width: 700px;
}
}
.placeholder-text {
margin-left: 11px;
display: inline-block;
background-color: $primary-low;
width: 100%;
width: calc(100% - 11px);
height: 1.5em;
margin-bottom: 0.6em;
}

45
app/assets/stylesheets/common/components/user-card.scss
View File

@ -2,42 +2,31 @@ $card_width: 580px;
$avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards
// placeholder
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.animated-placeholder {
animation-duration: 1.25s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: $primary-low;
background: linear-gradient(
to right,
$primary-low 10%,
$primary-low-mid 18%,
$primary-low 33%
);
height: 20px;
position: relative;
}
.card-avatar-placeholder {
width: $avatar_width;
height: $avatar_width;
border-radius: 100%;
animation-duration: 5s;
background: linear-gradient(
to right,
$primary-low 10%,
$primary-low-mid 38%,
$primary-low 73%
);
position: relative;
overflow: hidden;
&:before {
animation: placeHolderShimmer 4s linear infinite forwards;
position: absolute;
left: 0;
content: "";
background: linear-gradient(
to right,
$primary-very-low 10%,
$primary-low 18%,
$primary-very-low 33%
);
height: $avatar_width;
width: $card_width;
}
}
// shared styles for user and group cards