mirror of
https://github.com/taobataoma/meanTorrent.git
synced 2026-07-01 00:18:19 +02:00
fix(torrents): fixed screenshots picture issue on small screen device
This commit is contained in:
OldHawk
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user