From d23a210a430636a41eb1dde1c5345660fa7fa2aa Mon Sep 17 00:00:00 2001
From: blavenie <benoit.lavenier@e-is.pro>
Date: Wed, 4 Mar 2020 20:22:31 +0100
Subject: [PATCH] [fix] Home: add animation and fix CSS of feed
---
scss/ionic.app.scss | 19 ++++++--
www/feed.json | 2 +-
www/js/controllers/app-controllers.js | 1 +
www/templates/home/home.html | 68 ++++++++++++++-------------
4 files changed, 53 insertions(+), 37 deletions(-)
diff --git a/scss/ionic.app.scss b/scss/ionic.app.scss
index b4146080..4ab2de62 100644
--- a/scss/ionic.app.scss
+++ b/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;
+ }
+ }
}
diff --git a/www/feed.json b/www/feed.json
index 9c71e682..91288145 100644
--- a/www/feed.json
+++ b/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": [
{
diff --git a/www/js/controllers/app-controllers.js b/www/js/controllers/app-controllers.js
index f0e6a97c..aca8492f 100644
--- a/www/js/controllers/app-controllers.js
+++ b/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) {
diff --git a/www/templates/home/home.html b/www/templates/home/home.html
index 946ed0ff..85811da2 100644
--- a/www/templates/home/home.html
+++ b/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> {{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> {{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>
--
GitLab