[fix] Home: add animation and fix CSS of feed

scss/ionic.app.scss

@@ -2550,7 +2550,10 @@ div[dropzone]:hover {
   pointer-events: none;
 }
 
-/* -- feed (home page) -- */
+/**********
+  feed (home page)
+**********/
+
 .feed {
   .card {
     background-color: rgba(0,0,0,0.3);
@@ -2565,13 +2568,16 @@ div[dropzone]:hover {
     list-style: unset;
     padding-left: 40px;
   }
+  a  {
+    color: inherit;
+  }
 
   .feed_header,
   .card .header {
     height: 25px;
     color: grey !important;
-    a  {
-      color: inherit;
+    a:hover {
+      color: $positive !important;
     }
     .avatar {
       margin-top: -6px;
@@ -2599,6 +2605,11 @@ div[dropzone]:hover {
     text-align: start;
     color: lightgrey !important;
   }
-
+  .feed-footer,
+  .card .footer {
+    a:hover {
+      color: $positive !important;
+    }
+  }
 }
 

www/feed.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Benoit Lavenier",
     "url": "@BenoitLavenier",
-    "avatar": "http://localhost:9200/user/profile/38MEAZN68Pz1DTvT3tqgxx4yQP6snJCQhPqEFxbDk4aE/_image/avatar.png"
+    "avatar": "https://g1.data.duniter.fr/user/profile/38MEAZN68Pz1DTvT3tqgxx4yQP6snJCQhPqEFxbDk4aE/_image/avatar.png"
   },
   "items": [
     {

www/js/controllers/app-controllers.js

@@ -606,6 +606,7 @@ function HomeController($scope, $state, $timeout, $ionicHistory, $translate, $ht
 
           return res.concat(item);
         }, []);
+
         $scope.feed = feed;
       })
       .error(function(data, status) {

www/templates/home/home.html

@@ -43,7 +43,7 @@
           </div>
         </div>
 
-        <div class="center animate-fade-in animate-show-hide ng-hide" ng-show="!loading && !error">
+        <div class="center animate-show-hide ng-hide" ng-show="!loading && !error">
 
           <!-- Help tour (NOT ready yet for small device) -->
           <button type="button"
@@ -125,38 +125,42 @@
           </h3>
 
           <!-- feed items -->
-          <div ng-repeat="item in feed.items"
-             class="card padding">
-
-            <div class="header ">
-              <!-- author -->
-              <i ng-if="item.author.avatar" class="avatar" style="background-image: url({{item.author.avatar}});"></i>
-              <a ng-class="{'avatar-left-padding': item.author.avatar}" class="author"
-                 ng-click="item.author.url && openLink($event, item.author.url)">
-                {{item.author.name}}
-              </a>
-
-              <!-- time -->
-              <a ng-if="item.time"
-                 title="{{item.time|formatDate}}"
-                 ng-click="openLink($event, item.url)"
-                 class="item-note">
-                <small><i class="icon ion-clock"></i>&nbsp;{{item.time|formatFromNow}}</small>
-              </a>
+          <div class="animate-show-hide ng-hide" ng-show="feed">
+            <div ng-repeat="item in feed.items"
+               class="card padding ">
+
+              <div class="header ">
+                <!-- author -->
+                <i ng-if="item.author.avatar" class="avatar" style="background-image: url({{item.author.avatar}});"></i>
+                <a ng-class="{'avatar-left-padding': item.author.avatar}" class="author"
+                   ng-click="item.author.url && openLink($event, item.author.url)">
+                  {{item.author.name}}
+                </a>
+
+                <!-- time -->
+                <a ng-if="item.time"
+                   title="{{item.time|formatDate}}"
+                   ng-click="openLink($event, item.url)"
+                   class="item-note ">
+                  <small><i class="icon ion-clock"></i>&nbsp;{{item.time|formatFromNow}}</small>
+                </a>
+              </div>
+              <!-- title -->
+              <h2 class="title feed-title">
+                <a ng-click="openLink($event, item.url)">{{item.title}}</a></h2>
+              <div ng-if="item.content"
+                   class="content feed-content"
+                   trust-as-html="item.content"></div>
+
+              <!-- footer -->
+              <h4 class="card-footer feed-footer text-right positive-100">
+                <a ng-click="openLink($event, item.url)">
+                  <span ng-if="item.truncated" translate>HOME.READ_MORE</span>
+                  <span ng-if="!item.truncated" translate>COMMON.BTN_SHOW</span>
+                  <i class="icon ion-chevron-right"></i>
+                </a>
+              </h4>
             </div>
-            <!-- title -->
-            <h2 class="title feed-title">
-              <a ng-click="openLink($event, item.url)">{{item.title}}</a></h2>
-            <div ng-if="item.content"
-                 class="content feed-content"
-                 trust-as-html="item.content"></div>
-            <h4 class="card-footer feed-footer text-right positive-100">
-              <a ng-click="openLink($event, item.url)">
-                <span ng-if="item.truncated" translate>HOME.READ_MORE</span>
-                <span ng-if="!item.truncated" translate>COMMON.BTN_SHOW</span>
-                <i class="icon ion-chevron-right"></i>
-              </a>
-            </h4>
           </div>
         </div>
       </div>