From 46f23b7de7a5e27dd4f9f13f063d263fbb1ec85d Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 13 Nov 2017 01:06:48 +0200
Subject: Add an option to automatically show new posts when scrolled to the
 top, also add fade-in animation for posts.

---
 src/components/status/status.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cc315a90..33851b6c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -14,7 +14,7 @@
     </div>
     <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
   </div>
-  <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background base03-border status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -226,6 +226,20 @@
      }
  }
 
+ .status-fadein {
+   animation-duration: 0.5s;
+   animation-name: fadein;
+ }
+
+ @keyframes fadein {
+   from {
+     opacity: 0;
+   }
+   to {
+     opacity: 1;
+   }
+ }
+
  .greentext {
      color: green;
  }
-- 
cgit v1.2.3-70-g09d2