diff --git a/modules/core/client/directives/torrent-image-list.client.directive.js b/modules/core/client/directives/torrent-image-list.client.directive.js index 15215366..890fa78b 100644 --- a/modules/core/client/directives/torrent-image-list.client.directive.js +++ b/modules/core/client/directives/torrent-image-list.client.directive.js @@ -17,7 +17,7 @@ function link(scope, element, attrs) { scope.$watch(attrs.torrentImageList, function (til) { - hideImage(); + organizeImage(); var targetNode = document.getElementById(attrs.torrentImageList); @@ -26,7 +26,7 @@ var callback = function (mutationsList) { for (var mutation of mutationsList) { if (mutation.type === 'childList') { - hideImage(); + organizeImage(); } } }; @@ -36,9 +36,14 @@ //observer.disconnect(); - function hideImage() { + /** + * organizeImage + */ + function organizeImage() { var imgs = element[0].querySelectorAll('img:not(.emoji)'); console.log(imgs); + + //remove angular.forEach(imgs, function (i) { if (i.previousSibling && i.previousSibling.tagName.toUpperCase() === 'BR') { i.previousSibling.remove(); @@ -49,6 +54,22 @@ angular.element(i).remove(); } }); + //reorganize + if (imgs.length > 0) { + var imgDiv = angular.element('.torrent-img-list'); + imgDiv.remove(); + + var imgCap = angular.element('
{{}}
'); + var imgList = angular.element('
'); + + angular.forEach(imgs, function (i) { + var item = angular.element(i); + item.addClass('img-item'); + imgList.append(item); + }); + + element.after(imgList); + } } }); } diff --git a/modules/torrents/client/img/film-strip-black.png b/modules/torrents/client/img/film-strip-black.png new file mode 100644 index 00000000..bd4e701e Binary files /dev/null and b/modules/torrents/client/img/film-strip-black.png differ diff --git a/modules/torrents/client/img/film-strip.png b/modules/torrents/client/img/film-strip.png new file mode 100644 index 00000000..a058511c Binary files /dev/null and b/modules/torrents/client/img/film-strip.png differ diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less index 7a0c0bd0..321c060f 100644 --- a/modules/torrents/client/less/torrents.less +++ b/modules/torrents/client/less/torrents.less @@ -45,4 +45,52 @@ border-radius: 5px; border: solid 1px #efefef; padding: 10px; +} + +.torrent-img-list { + margin-top: 30px; + overflow-x: auto; + height: auto; + display: inline-flex; + width: 100% !important; + .img-item { + max-height: 160px; + cursor: pointer; + opacity: 0.8; + margin-left: 8px !important; + width: auto !important; + &:hover { + opacity: 1; + } + } +} + +.film-strip { + border-top: solid 26px; + border-bottom: solid 26px; + border-left: none; + border-right: none; + border-image: url("../img/film-strip-black.png") 42 30; + border-image-repeat: repeat; + background-color: #2a2a2a; + background-color: rgba(0, 0, 0, 0.5); + padding-bottom: 1px; + &:hover { + &::-webkit-scrollbar-track { + background-color: darken(@brand-primary, 30%); + } + &::-webkit-scrollbar-thumb { + background-color: @brand-primary; + } + } + &::-webkit-scrollbar { + height: 5px; + } + &::-webkit-scrollbar-track { + background-color: #333; + background-color: rgba(0, 0, 0, 0.5); + } + &::-webkit-scrollbar-thumb { + background-color: #444; + } } \ No newline at end of file diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html index 67f1c42f..ab4f389e 100644 --- a/modules/torrents/client/views/view-torrent.client.view.html +++ b/modules/torrents/client/views/view-torrent.client.view.html @@ -2,7 +2,7 @@
-
+