From 158cd4612be50c838278f072d221d9f2f790d5a5 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Fri, 1 Jun 2018 20:48:38 +0800
Subject: [PATCH] fix(torrents): fixed screenshots picture issue on small
 screen device

---
 .../torrent-info.client.controller.js         | 16 +++++
 modules/torrents/client/less/torrents.less    | 64 +++++++++++--------
 .../views/view-torrent.client.view.html       | 18 +++---
 3 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/modules/torrents/client/controllers/torrent-info.client.controller.js b/modules/torrents/client/controllers/torrent-info.client.controller.js
index 9dd748d5..417faff8 100644
--- a/modules/torrents/client/controllers/torrent-info.client.controller.js
+++ b/modules/torrents/client/controllers/torrent-info.client.controller.js
@@ -41,6 +41,22 @@
     vm.searchTags = [];
     vm.progress = 0;
 
+    /**
+     * window.resize()
+     */
+    $(window).resize(function () {
+      var ele = $('#popup_img_preview .img_view .img_item .img-group');
+      var img = ele.find('img');
+
+      // ele.height(img.height());
+      if ($('#popup_img_preview_wrapper') && $('#popup_img_preview_wrapper').css('display') != 'none') {
+        console.log('resize');
+        ele.css('height', '100%');
+        ele.css('padding-top', (ele.outerHeight() - img.height()) / 2 + 'px');
+        ele.find('.popup_img_preview_close').css('top', ((ele.outerHeight() - img.height()) / 2 - 10) + 'px');
+      }
+    });
+
     /**
      * remove side_overlay background
      */
diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less
index c3f4ec7f..e38571ec 100644
--- a/modules/torrents/client/less/torrents.less
+++ b/modules/torrents/client/less/torrents.less
@@ -127,6 +127,10 @@
     }
 }
 
+.text-break-all {
+    word-break: break-all;
+}
+
 .resourceScreenshots {
     .upload-image-info {
         color: #666;
@@ -274,29 +278,38 @@ pre.prettyprint {
     .popup_content {
         width: 100%;
         height: 100%;
-        padding: 30px 30px 0;
         .img_view {
-            height:  ~"calc(100% - 60px)";
+            height: ~"calc(100% - 60px)";
             position: relative;
+            padding: 30px 30px 0;
             .img_item {
-                height: 100%;
-                width: max-content;
+                height: ~"calc(100% - 10px)";
+                width: fit-content;
                 position: relative;
-                img {
-                    max-width: 100%;
-                    max-height: 100%;
-                    min-width: 300px;
-                }
-                .popup_img_preview_close {
-                    position: absolute;
-                    top: -10px;
-                    right: -7px;
-                    padding-top: 1px;
-                    cursor: pointer;
-                    color: @brand-primary;
-                    text-shadow: 0 0 1em #fff,-0 -0 0.5em #fff;
-                    &:hover {
-                        color: @brand-danger;
+                .img-group {
+                    height: max-content;
+                    position: relative;
+                    margin: 0;
+                    float: left;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                        //min-width: 300px;
+                    }
+                    .popup_img_preview_close {
+                        position: absolute;
+                        top: -10px;
+                        right: -7px;
+                        padding-top: 1px;
+                        cursor: pointer;
+                        color: @brand-primary;
+                        text-shadow: 0 0 1em #fff,-0 -0 0.5em #fff;
+                        &:hover {
+                            color: @brand-danger;
+                        }
                     }
                 }
             }
@@ -325,12 +338,13 @@ pre.prettyprint {
             padding-top: 10px;
             height: 60px;
             width: 100%;
-            background-color: transparent;
-        }
-        .img_page_info {
-            margin-right: 30px;
-            color: #ddd;
-            text-shadow: 0 0 1em @brand-primary,-0 -0 0.1em @brand-primary;
+            background-color: #2a2a2a;
+            background-color: rgba(0,0,0,0.5);
+            .img_page_info {
+                margin-right: 30px;
+                color: #ddd;
+                text-shadow: 0 0 1em @brand-primary,-0 -0 0.1em @brand-primary;
+            }
         }
     }
 }
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 81aac14b..c0696d31 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 @@
     <div class="backdrop" ng-show="vm.torrentLocalInfo">
         <div class="filter">
             <div class="container">
-                <div class="topone row">
+                <div class="topone">
                     <div class="row">
                         <div class="col-md-3 text-center">
                             <div class="topone-logo"
@@ -431,9 +431,11 @@
     <div id="popup_img_preview" class="popup_well">
         <div class="img_view">
             <div class="img_item center-block">
-                <img class="img-thumbnail img-responsive" src="" on-image-load="vm.onTmdbImageLoad()">
-                <i class="fa fa-2x fa-times-circle-o popup_img_preview_close" mt-scale-by-mouse="{scale: 1.5, duration: '.5s'}"
-                   aria-hidden="true"></i>
+                <div class="img-group">
+                    <img class="" src="" on-image-load="vm.onTmdbImageLoad()">
+                    <i class="fa fa-2x fa-times-circle-o popup_img_preview_close" mt-scale-by-mouse="{scale: 1.5, duration: '.5s'}"
+                       aria-hidden="true"></i>
+                </div>
             </div>
             <div class="mask-background"></div>
             <div class="tmdb-image-loading">
@@ -713,14 +715,14 @@
 
             <dl class="dl-horizontal" style="margin-bottom: 0;">
                 <dt class="h-line">{{ 'RESOURCE_TITLE' | translate}}：</dt>
-                <dd class="h-line">
+                <dd class="h-line text-long">
                     <span class="text-bold" editable-line readonly="!vm.canEdit() && !vm.isOwner(vm.torrentLocalInfo)"
                           ng-model="vm.torrentLocalInfo.resource_detail_info.custom_title"
                           callback="onTorrentTitleEdited"></span>
                 </dd>
 
                 <dt class="h-line">{{ 'RESOURCE_SUB_TITLE' | translate}}：</dt>
-                <dd class="h-line">
+                <dd class="h-line text-long">
                     <span class="text-bold" editable-line readonly="!vm.canEdit() && !vm.isOwner(vm.torrentLocalInfo)"
                           ng-model="vm.torrentLocalInfo.resource_detail_info.custom_subtitle"
                           callback="onTorrentSubTitleEdited"></span>
@@ -736,7 +738,7 @@
                 </dd>
 
                 <dt class="h-line">{{ 'TORRENT_FILENAME' | translate}}：</dt>
-                <dd class="h-line">{{vm.torrentLocalInfo.torrent_filename}}</dd>
+                <dd class="h-line text-break-all">{{vm.torrentLocalInfo.torrent_filename}}</dd>
 
                 <dt class="h-line">{{ 'ANNOUNCE_URL' | translate}}：</dt>
                 <dd class="h-line">{{vm.torrentLocalInfo.torrent_announce}}</dd>
@@ -752,7 +754,7 @@
                 <dd class="h-line">{{vm.torrentLocalInfo.torrent_size | bytes:2}}</dd>
 
                 <dt class="h-line">{{ 'TORRENT_INFO_HASH' | translate}}：</dt>
-                <dd class="h-line">{{vm.torrentLocalInfo.info_hash}}</dd>
+                <dd class="h-line text-break-all">{{vm.torrentLocalInfo.info_hash}}</dd>
 
                 <dt class="h-line">{{ 'ATTRIBUTE_TAGS' | translate}}：</dt>
                 <dd class="h-line">