From 40ba60576cc18afc67e38d600e4f217b02b81932 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Fri, 25 May 2018 02:40:21 +0800
Subject: [PATCH] fix(core): fixed album css issue

---
 .../album-view.client.controller.js           |  2 +-
 .../controllers/albums.client.controller.js   | 22 +++++-------
 modules/albums/client/less/albums.less        | 12 +++----
 .../collections.client.controller.js          | 21 ++++-------
 .../collections/client/less/collections.less  |  5 ++-
 .../controllers/header.client.controller.js   |  4 +++
 .../controllers/home.client.controller.js     | 36 +++++++++++--------
 .../align-middle-parent.client.directive.js   |  5 ++-
 .../core/client/views/home.client.view.html   |  8 ++---
 9 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/modules/albums/client/controllers/album-view.client.controller.js b/modules/albums/client/controllers/album-view.client.controller.js
index 37293865..1a51da72 100644
--- a/modules/albums/client/controllers/album-view.client.controller.js
+++ b/modules/albums/client/controllers/album-view.client.controller.js
@@ -62,7 +62,7 @@
      * figureOutItemsToDisplay
      */
     vm.figureOutItemsToDisplay = function (callback) {
-      vm.filteredItems = vm.album.torrents;
+      vm.filteredItems = vm.album.torrents.reverse();
       vm.filterLength = vm.filteredItems.length;
       var begin = ((vm.currentPage - 1) * vm.itemsPerPage);
       var end = begin + vm.itemsPerPage;
diff --git a/modules/albums/client/controllers/albums.client.controller.js b/modules/albums/client/controllers/albums.client.controller.js
index 5c58e8b7..ecb4ac20 100644
--- a/modules/albums/client/controllers/albums.client.controller.js
+++ b/modules/albums/client/controllers/albums.client.controller.js
@@ -14,19 +14,17 @@
     vm.torrentTypeConfig = MeanTorrentConfig.meanTorrentConfig.torrentType;
     vm.tmdbConfig = MeanTorrentConfig.meanTorrentConfig.tmdbConfig;
 
-    /**
-     * window.resize()
-     */
-    $(window).resize(function () {
-      vm.setAlbumItemHeight();
-    });
 
     /**
-     * setAlbumItemHeight
+     * $scope.$watch($('#nav-top-menu').width())
      */
-    vm.setAlbumItemHeight = function () {
-      $('.albums-item').height($('.albums-item').width() / 1.772);
-    };
+    $scope.$watch(function () {
+      return $('.albums-item').width();
+    }, function (newVal, oldVal) {
+      if (newVal) {
+        $('.albums-item').height($('.albums-item').width() / 1.772);
+      }
+    });
 
     /**
      * getAlbumsList
@@ -36,10 +34,6 @@
         vm.albumsList = data;
         vm.getAlbumsTypeList(data);
         mtDebug.info(data);
-
-        $timeout(function () {
-          vm.setAlbumItemHeight();
-        }, 10);
       });
     };
 
diff --git a/modules/albums/client/less/albums.less b/modules/albums/client/less/albums.less
index 10157b41..4882a143 100644
--- a/modules/albums/client/less/albums.less
+++ b/modules/albums/client/less/albums.less
@@ -3,17 +3,17 @@
 .albums-list {
     legend {
         padding-bottom: 5px;
+        margin-bottom: 0;
     }
     .albums-items {
         text-align: -webkit-center;
         .albums-item {
             cursor: pointer;
             position: relative;
-            margin: 10px 0 0 0;
+            margin: 20px 0 0 0;
             overflow: hidden;
             border-radius: 8px;
             max-width: 400px;
-            border: solid 1px #666;
             min-height: 160px;
             max-height: 226px;
             z-index: 1;
@@ -41,8 +41,8 @@
                 left: 0;
                 right: 0;
                 padding: 20px 10px;
-                background-color: #333;
-                background-color: rgba(0, 0, 0, 0.3);
+                background-color: #2a2a2a;
+                background-color: rgba(0, 0, 0, 0.4);
                 .name {
                     margin-bottom: 2px;
                     font-size: 1.5em;
@@ -67,8 +67,8 @@
                     color: @mt-base-color !important;
                 }
                 .item-info {
-                    background-color: #333;
-                    background-color: rgba(0, 0, 0, 0.1);
+                    background-color: #2a2a2a;
+                    background-color: rgba(0, 0, 0, 0.2);
                     color: #fff;
                 }
             }
diff --git a/modules/collections/client/controllers/collections.client.controller.js b/modules/collections/client/controllers/collections.client.controller.js
index c84bd03c..43ca2f8f 100644
--- a/modules/collections/client/controllers/collections.client.controller.js
+++ b/modules/collections/client/controllers/collections.client.controller.js
@@ -17,19 +17,16 @@
     vm.tmdbConfig = MeanTorrentConfig.meanTorrentConfig.tmdbConfig;
 
     /**
-     * window.resize()
+     * $scope.$watch($('#nav-top-menu').width())
      */
-    $(window).resize(function () {
-      vm.setAlbumItemHeight();
+    $scope.$watch(function () {
+      return $('.albums-item').width();
+    }, function (newVal, oldVal) {
+      if (newVal) {
+        $('.albums-item').height($('.albums-item').width() / 1.772);
+      }
     });
 
-    /**
-     * setAlbumItemHeight
-     */
-    vm.setAlbumItemHeight = function () {
-      $('.collection-item').height($('.collection-item').width() / 1.772);
-    };
-
     /**
      * buildPager
      */
@@ -50,10 +47,6 @@
         vm.filterLength = items.total;
         vm.pagedItems = items.rows;
 
-        $timeout(function () {
-          vm.setAlbumItemHeight();
-        }, 10);
-
         if (callback) callback();
       });
     };
diff --git a/modules/collections/client/less/collections.less b/modules/collections/client/less/collections.less
index c5febf56..cba09c1f 100644
--- a/modules/collections/client/less/collections.less
+++ b/modules/collections/client/less/collections.less
@@ -65,7 +65,6 @@
             overflow: hidden;
             border-radius: 8px;
             max-width: 400px;
-            border: solid 1px #666;
             min-height: 160px;
             z-index: 1;
             box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
@@ -93,7 +92,7 @@
                 right: 0;
                 padding: 20px 10px;
                 background-color: #333;
-                background-color: rgba(0, 0, 0, 0.3);
+                background-color: rgba(0, 0, 0, 0.4);
                 .name {
                     margin-bottom: 2px;
                     font-size: 1.5em;
@@ -123,7 +122,7 @@
                 }
                 .item-info {
                     background-color: #333;
-                    background-color: rgba(0, 0, 0, 0.1);
+                    background-color: rgba(0, 0, 0, 0.2);
                     color: #fff;
                 }
             }
diff --git a/modules/core/client/controllers/header.client.controller.js b/modules/core/client/controllers/header.client.controller.js
index 1ecac2d9..f41ce0b9 100644
--- a/modules/core/client/controllers/header.client.controller.js
+++ b/modules/core/client/controllers/header.client.controller.js
@@ -102,6 +102,9 @@
       }
     };
 
+    /**
+     * $scope.$watch($('#nav-top-menu').width())
+     */
     $scope.$watch(function () {
       return $('#nav-top-menu').width();
     }, function (newVal, oldVal) {
@@ -119,6 +122,7 @@
         }
       }
     });
+
     /**
      * auth-user-changed
      */
diff --git a/modules/core/client/controllers/home.client.controller.js b/modules/core/client/controllers/home.client.controller.js
index 23feb71d..28e6e878 100644
--- a/modules/core/client/controllers/home.client.controller.js
+++ b/modules/core/client/controllers/home.client.controller.js
@@ -29,13 +29,6 @@
     vm.searchType = 'torrents';
     vm.checkData = undefined;
 
-    /**
-     * window.resize()
-     */
-    $(window).resize(function () {
-      vm.setAlbumItemHeight();
-    });
-
     /**
      * initBodyBackground
      */
@@ -77,11 +70,15 @@
     };
 
     /**
-     * setAlbumItemHeight
+     * $scope.$watch($('#nav-top-menu').width())
      */
-    vm.setAlbumItemHeight = function () {
-      $('.albums-item').height($('.albums-item').width() / 1.772);
-    };
+    $scope.$watch(function () {
+      return $('.albums-item').width();
+    }, function (newVal, oldVal) {
+      if (newVal) {
+        $('.albums-item').height($('.albums-item').width() / 1.772);
+      }
+    });
 
     /**
      * getCollectionsList
@@ -92,11 +89,9 @@
       }, function (data) {
         vm.albumsList = data;
         mtDebug.info(data);
-
-        $timeout(function () {
-          vm.setAlbumItemHeight();
-        }, 10);
       });
+
+      vm.openAlbum();
     };
 
     /**
@@ -453,5 +448,16 @@
       }, 300);
     };
 
+    /**
+     * openCheckTooltip
+     */
+    vm.openAlbum = function () {
+      var e = $('.albums-list');
+
+      $timeout(function () {
+        e.slideDown(300);
+      }, 50);
+    };
+
   }
 }());
diff --git a/modules/core/client/directives/align-middle-parent.client.directive.js b/modules/core/client/directives/align-middle-parent.client.directive.js
index a139bce7..72eccc8b 100644
--- a/modules/core/client/directives/align-middle-parent.client.directive.js
+++ b/modules/core/client/directives/align-middle-parent.client.directive.js
@@ -17,12 +17,15 @@
     function link(scope, element, attrs) {
       element.on('load', function (event) {
         $timeout(function () {
+          console.log('image load in directive');
+          // element.parent().height(element.parent().width() / 1.772);
+
           if (element.height() > element.parent().height()) {
             element.css('margin-top', -(element.height() - element.parent().height()) / 2);
           } else {
             element.css('margin-top', (element.parent().height() - element.height()) / 2);
           }
-        }, 10);
+        }, 0);
       });
     }
   }
diff --git a/modules/core/client/views/home.client.view.html b/modules/core/client/views/home.client.view.html
index 6c19a170..369b8d9a 100644
--- a/modules/core/client/views/home.client.view.html
+++ b/modules/core/client/views/home.client.view.html
@@ -162,14 +162,14 @@
             </div>
         </div>
 
-        <div ng-init="vm.getAlbumsList()">
-            <div class="filter-albums albums-list" ng-if="vm.homeConfig.showAlbumsList && vm.albumsList.length>0">
-                <div class="container padding-top-20 padding-bottom-30">
+        <div class="filter-albums albums-list" ng-init="vm.getAlbumsList()" style="display: none">
+            <div ng-if="vm.homeConfig.showAlbumsList && vm.albumsList.length>0">
+                <div class="container padding-top-10 padding-bottom-30">
                     <div class="row">
                         <div class="albums-items">
                             <div ng-repeat="m in vm.albumsList | filter: tp.type">
                                 <div data-ng-if="$index != 0 && $index % 2 == 0" class="clearfix visible-sm-block"></div>
-                                <div data-ng-if="$index != 0 && $index % 4 == 0" class="clearfix visible-md-block visible-lg-block"></div>
+                                <div data-ng-if="$index != 0 && $index % 3 == 0" class="clearfix visible-md-block visible-lg-block"></div>
                                 <div class="col-sm-6 col-md-4">
                                     <a ui-sref="albums.view({ albumId: m._id })">
                                         <div class="albums-item">