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.

background.html

@@ -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>

js/views/message_view.js

@@ -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');
             }
         },

stylesheets/_hourglass.scss

@@ -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%);
     }
   }
 }

stylesheets/manifest.css

@@ -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; }