Hourglass can start at any percentage
This breaks the css-purity of our mixin but is necessary in order to apply the initial offset of the hourglass animation dynamically, since jquery can't manipulate arbitrary css on psuedo elements.
This commit is contained in:
parent
5f92ccd524
commit
bd713352e3
4 changed files with 19 additions and 20 deletions
|
@ -157,7 +157,7 @@
|
|||
<div class='meta'>
|
||||
<span class='timestamp' data-timestamp={{ timestamp }}></span>
|
||||
<span class='status hide'></span>
|
||||
<span class='timer hourglass'></span>
|
||||
<span class='timer hourglass'><span class='sand'></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
@ -135,7 +135,11 @@
|
|||
},
|
||||
renderExpiring: function() {
|
||||
if (this.model.isExpiring()) {
|
||||
this.$('.hourglass').css('animation-duration', this.model.msTilExpire()*0.001 + 's');
|
||||
var totalTime = this.model.get('expireTimer') * 1000;
|
||||
var remainingTime = this.model.msTilExpire();
|
||||
this.$('.hourglass .sand')
|
||||
.css('animation-duration', remainingTime*0.001 + 's')
|
||||
.css('transform', 'translateY(' + 100*(1 - (remainingTime / totalTime)) + '%)');
|
||||
this.$el.addClass('expiring');
|
||||
}
|
||||
},
|
||||
|
|
|
@ -5,32 +5,28 @@
|
|||
@include color-svg('/images/hourglass_full.svg', transparent);
|
||||
background-size: 100%;
|
||||
|
||||
&, &:before, &:after {
|
||||
&, .sand, &:before, &:after {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
&:before, &:after {
|
||||
.sand, &:before, &:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:before {
|
||||
.sand {
|
||||
background: $color;
|
||||
animation: moveDown 5s linear;
|
||||
animation-duration: inherit;
|
||||
animation: moveDown linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&:after {
|
||||
@include color-svg('/images/hourglass_empty.svg', $color);
|
||||
}
|
||||
@keyframes moveDown {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY($height);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1234,13 +1234,15 @@ li.entry .error-icon-container {
|
|||
-webkit-mask-size: 100%;
|
||||
background-color: transparent;
|
||||
background-size: 100%; }
|
||||
.message-container .expiring .timer, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
|
||||
.message-container .expiring .timer, .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
|
||||
.message-list .expiring .timer,
|
||||
.message-list .expiring .timer .sand,
|
||||
.message-list .expiring .timer:before,
|
||||
.message-list .expiring .timer:after {
|
||||
width: 13px;
|
||||
height: 11px; }
|
||||
.message-container .expiring .timer:before, .message-container .expiring .timer:after,
|
||||
.message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
|
||||
.message-list .expiring .timer .sand,
|
||||
.message-list .expiring .timer:before,
|
||||
.message-list .expiring .timer:after {
|
||||
content: '';
|
||||
|
@ -1248,11 +1250,10 @@ li.entry .error-icon-container {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.message-container .expiring .timer:before,
|
||||
.message-list .expiring .timer:before {
|
||||
.message-container .expiring .timer .sand,
|
||||
.message-list .expiring .timer .sand {
|
||||
background: #999;
|
||||
animation: moveDown 5s linear;
|
||||
animation-duration: inherit;
|
||||
animation: moveDown linear;
|
||||
animation-fill-mode: forwards; }
|
||||
.message-container .expiring .timer:after,
|
||||
.message-list .expiring .timer:after {
|
||||
|
@ -1260,10 +1261,8 @@ li.entry .error-icon-container {
|
|||
-webkit-mask-size: 100%;
|
||||
background-color: #999; }
|
||||
@keyframes moveDown {
|
||||
from {
|
||||
transform: translateY(0); }
|
||||
to {
|
||||
transform: translateY(11px); } }
|
||||
transform: translateY(100%); } }
|
||||
.message-container .control .bubble .content,
|
||||
.message-list .control .bubble .content {
|
||||
font-style: italic; }
|
||||
|
|
Loading…
Reference in a new issue