Nemcio/meanTorrent
1
0
Fork 0
mirror of https://github.com/taobataoma/meanTorrent.git synced 2026-07-10 08:33:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(torrents): fixed screenshots picture issue on small screen device

Browse Source
This commit is contained in:
OldHawk
2018-06-02 03:44:30 +08:00
parent 158cd4612b
commit f91dafe378
5 changed files with 101 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
modules/core/client/directives/torrent-image-list.client.directive.js
View File

@@ -44,7 +44,11 @@
}
var imgEleList = [];
var imgList = angular.element('<div class="torrent-img-list film-strip"></div>');
var imgList = angular.element('<div class="torrent-img-list"></div>');
if (attrs.hasOwnProperty('stripClass')) {
imgList.addClass(attrs.stripClass);
}
angular.forEach(imgs, function (img, idx) {
var item = angular.element('<img>');

16
modules/core/client/views/home_torrents.client.view.html
View File

@@ -516,7 +516,7 @@
</dd>
<div class="img-container" ng-if="vm.documentaryTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.documentaryTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.documentaryTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -706,7 +706,7 @@
</dd>
<div class="img-container" ng-if="vm.musicTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.musicTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.musicTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -898,7 +898,7 @@
</dd>
<div class="img-container" ng-if="vm.sportsTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.sportsTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.sportsTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -1085,7 +1085,7 @@
</dd>
<div class="img-container" ng-if="vm.varietyTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.varietyTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.varietyTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -1271,7 +1271,7 @@
</div>
</dd>
<div class="img-container" ng-if="vm.pictureTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.pictureTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.pictureTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -1458,7 +1458,7 @@
</dd>
<div class="img-container" ng-if="vm.gameTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.gameTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.gameTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -1645,7 +1645,7 @@
</dd>
<div class="img-container" ng-if="vm.softwareTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.softwareTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.softwareTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -1832,7 +1832,7 @@
</dd>
<div class="img-container" ng-if="vm.ebookTopOne.screenshots_image.length>0">
<div torrent-image-list="true" id="img_container_{{vm.ebookTopOne._id}}"
<div torrent-image-list="true" strip-class="film-strip"
imgs="vm.ebookTopOne.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>

82
modules/torrents/client/controllers/torrent-info.client.controller.js
View File

@@ -45,18 +45,28 @@
* 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');
vm.resizePopupImage();
}
});
vm.resizePopupImage = function () {
var img = $('#popup_img_preview .img_view .img_item img');
var close = $('#popup_img_preview .img_view .img_item .popup_img_preview_close');
$timeout(function () {
// console.log('img.parent().height(): ' + img.parent().height() + ', img.outerHeight(): ' + img.outerHeight());
var t = (img.parent().height() - img.outerHeight()) / 2;
if (img.parent().height() !== img.outerHeight()) {
img.css('margin-top', t + 'px');
close.css('margin-top', t + 'px');
} else {
img.css('margin-top', 0);
close.css('margin-top', 0);
}
}, 10);
};
/**
* remove side_overlay background
*/
@@ -1384,22 +1394,8 @@
opacity: 0.7
});
var src = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('on-error-src');
var esrc = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('data-back-src');
initPupupImage();
$('#popup_img_preview .img_view .mask-background').css('display', 'block');
$('#popup_img_preview .img_view .mask-background').css('background-color', 'rgba(32, 32, 32, 0.6)');
$('#popup_img_preview .img_view .tmdb-image-loading').css('display', 'block');
$('#popup_img_preview .img_item .popup_img_preview_close').css('display', 'none');
$('#popup_img_preview .img_item img').removeClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_item img').attr('src', null);
$('#popup_img_preview .img_item img').attr('on-error-src', esrc);
$('#popup_img_preview .img_item img').attr('src', src);
$('#popup_img_preview .img_nav .img_page_info').html($translate.instant('IMG_PAGE_INFO', {
index: vm.previewImageIndex + 1,
total: vm.previewImageEvent.imgs.length
}));
$('#popup_img_preview').popup('show');
};
@@ -1413,22 +1409,7 @@
vm.previewImageIndex -= 1;
}
var src = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('on-error-src');
var esrc = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('data-back-src');
$('#popup_img_preview .img_view .mask-background').css('display', 'block');
$('#popup_img_preview .img_view .mask-background').css('background-color', 'rgba(32, 32, 32, 0.6)');
$('#popup_img_preview .img_view .tmdb-image-loading').css('display', 'block');
$('#popup_img_preview .img_item .popup_img_preview_close').css('display', 'none');
$('#popup_img_preview .img_item img').removeClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_item img').attr('src', null);
$('#popup_img_preview .img_item img').attr('on-error-src', esrc);
$('#popup_img_preview .img_item img').attr('src', src);
$('#popup_img_preview .img_nav .img_page_info').html($translate.instant('IMG_PAGE_INFO', {
index: vm.previewImageIndex + 1,
total: vm.previewImageEvent.imgs.length
}));
initPupupImage();
};
/**
@@ -1441,6 +1422,10 @@
vm.previewImageIndex += 1;
}
initPupupImage();
};
function initPupupImage() {
var src = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('on-error-src');
var esrc = angular.element(vm.previewImageEvent.imgs[vm.previewImageIndex]).attr('data-back-src');
@@ -1448,16 +1433,17 @@
$('#popup_img_preview .img_view .mask-background').css('background-color', 'rgba(32, 32, 32, 0.6)');
$('#popup_img_preview .img_view .tmdb-image-loading').css('display', 'block');
$('#popup_img_preview .img_item .popup_img_preview_close').css('display', 'none');
$('#popup_img_preview .img_item img').removeClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_item img').attr('src', null);
$('#popup_img_preview .img_item img').attr('on-error-src', esrc);
$('#popup_img_preview .img_item img').attr('src', src);
$('#popup_img_preview .img_view .img_item img').attr('src', null);
$('#popup_img_preview .img_view .img_item img').attr('on-error-src', esrc);
$('#popup_img_preview .img_view .img_item img').attr('src', src);
$('#popup_img_preview .img_view .img_item img').removeClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_view .img_item .popup_img_preview_close').css('display', 'none');
$('#popup_img_preview .img_nav .img_page_info').html($translate.instant('IMG_PAGE_INFO', {
index: vm.previewImageIndex + 1,
total: vm.previewImageEvent.imgs.length
}));
};
}
/**
* onTmdbImageLoad
@@ -1467,8 +1453,10 @@
$('#popup_img_preview .img_view .mask-background').css('display', 'none');
$('#popup_img_preview .img_view .tmdb-image-loading').css('display', 'none');
$('#popup_img_preview .img_item img').addClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_item .popup_img_preview_close').css('display', 'block');
$('#popup_img_preview .img_view .img_item img').addClass('img-thumbnail img-responsive');
$('#popup_img_preview .img_view .img_item .popup_img_preview_close').css('display', 'block');
vm.resizePopupImage();
};
/**

75
modules/torrents/client/less/torrents.less
View File

@@ -218,6 +218,10 @@
}
}
.screenshots-strip {
padding: 1px 0;
}
/* csslint ignore:start */
.film-strip {
border-top: solid 26px;
@@ -235,7 +239,7 @@
}
}
&::-webkit-scrollbar {
height: 5px;
height: 6px;
}
&::-webkit-scrollbar-track {
background-color: #000;
@@ -286,30 +290,24 @@ pre.prettyprint {
height: ~"calc(100% - 10px)";
width: fit-content;
position: relative;
.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;
}
img {
max-width: 100%;
max-height: 100%;
transition-property: background-color, border;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.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;
}
}
}
@@ -339,11 +337,32 @@ pre.prettyprint {
height: 60px;
width: 100%;
background-color: #2a2a2a;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, 0.5);
position: relative;
.img_page_info {
margin-right: 30px;
color: #ddd;
text-shadow: 0 0 1em @brand-primary,-0 -0 0.1em @brand-primary;
color: #d0d0d0;
font-size: 16px;
text-shadow: 0 0 1em #000,-0 -0 0.5em #000;
}
@media (max-width: @screen-xxs-max) {
.img_page_info {
margin-right: 10px;
font-size: 14px;
}
.btn {
min-width: 50px !important;
}
}
@media (max-width: @screen-xs-max) and (min-width: @screen-xs-min){
.img_page_info {
margin-right: 20px;
font-size: 14px;
}
.btn {
min-width: 100px !important;
}
}
}
}

14
modules/torrents/client/views/view-torrent.client.view.html
View File

@@ -220,7 +220,7 @@
<div class="img-container" ng-if="!vm.showScreenshotsTab()">
<div ng-if="vm.torrentLocalInfo.screenshots_image.length>0 || (vm.isOwner(vm.torrentLocalInfo) || vm.user.isOper)">
<div class="torrent-images" torrent-image-list="true" id="img_container_{{vm.torrentLocalInfo._id}}"
<div class="torrent-images" torrent-image-list="true" strip-class="film-strip"
img-click-event="vm.onImageClick(event)" imgs="vm.torrentLocalInfo.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
@@ -431,11 +431,9 @@
<div id="popup_img_preview" class="popup_well">
<div class="img_view">
<div class="img_item center-block">
<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>
<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>
<div class="mask-background"></div>
<div class="tmdb-image-loading">
@@ -741,7 +739,7 @@
<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>
<dd class="h-line text-break-all">{{vm.torrentLocalInfo.torrent_announce}}</dd>
<dt class="h-line">{{ 'TABLE_FIELDS.ABBR_SEEDS_LEECHERS_FINISHED' | translate}}：</dt>
<dd class="h-line">
@@ -975,7 +973,7 @@
</span>
<div ng-if="vm.torrentLocalInfo.screenshots_image.length>0 || (vm.isOwner(vm.torrentLocalInfo) || vm.user.isOper)">
<div class="torrent-images" torrent-image-list="true"
<div class="torrent-images" torrent-image-list="true" strip-class="screenshots-strip"
img-click-event="vm.onImageClick(event)" imgs="vm.torrentLocalInfo.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.SCREENSHOTS_OVERVIEW"></legend>
</div>