Fix lightbox on resize event
This commit is contained in:
@@ -78,7 +78,6 @@ class User extends PhpObject {
|
||||
$bSuccess = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if($bSuccess) {
|
||||
$this->setUserId($iUserId);
|
||||
|
||||
@@ -973,9 +973,9 @@ function getMediaLink(asData, sType) {
|
||||
var bTimeDiff = (asData.posted_on_formatted && asData.posted_on_formatted_local != asData.posted_on_formatted);
|
||||
|
||||
var $Comment = (!asData.comment || asData.comment == '')?'':
|
||||
$('<span>', {'class': 'lb-caption-line comment', 'title': asData.comment})
|
||||
$('<span>', {'class': 'lb-caption-line comment desktop', 'title': asData.comment})
|
||||
.addIcon('fa-post fa-lg fa-fw', true)
|
||||
.append(asData.comment);
|
||||
.append($('<span>', {'class':'comment-text'}).text(asData.comment));
|
||||
|
||||
var $PostedOn =
|
||||
$('<span>', {'class': 'lb-caption-line', title: bTimeDiff?oSpot.lang('local_time', asData.posted_on_formatted_local):''})
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
// on the page below.
|
||||
//
|
||||
// Github issue: https://github.com/lokesh/lightbox2/issues/663
|
||||
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" href="#"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" href="#"></a></div></div></div><div class="lb-dataContainer desktop"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||
|
||||
// Cache jQuery objects
|
||||
this.$lightbox = $('#lightbox');
|
||||
@@ -271,6 +271,7 @@
|
||||
, orientation: $link.attr('data-orientation')
|
||||
, type: $link.attr('data-type')
|
||||
, id: $link.attr('data-id')
|
||||
, $Media: $link.attr('data-type')=='video'?self.$video:self.$image
|
||||
//ADDED-END
|
||||
});
|
||||
}
|
||||
@@ -321,219 +322,160 @@
|
||||
this.changeImage(imageNumber);
|
||||
};
|
||||
|
||||
//ADDED-START
|
||||
Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
|
||||
var iWindowWidth = $(window).width();
|
||||
var iWindowHeight = $(window).height();
|
||||
var oBorder = (sMediaType=='image')?this.imageBorderWidth:this.videoBorderWidth;
|
||||
var iMaxMediaWidth = iWindowWidth - this.containerPadding.left - this.containerPadding.right - oBorder.left - oBorder.right;
|
||||
var iMaxMediaHeight = iWindowHeight - this.containerPadding.top - this.containerPadding.bottom - oBorder.top - oBorder.bottom - this.options.positionFromTop;
|
||||
|
||||
var iDataMaxWidth = this.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = this.$lightbox.find('.lb-dataContainer').height();
|
||||
var iImageRatio = iMediaWidth / iMediaHeight;
|
||||
|
||||
//Case horizontal
|
||||
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
|
||||
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
|
||||
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
|
||||
|
||||
//Case vertical
|
||||
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
|
||||
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
|
||||
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
|
||||
|
||||
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
|
||||
|
||||
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
|
||||
else iMaxMediaWidth -= iDataMaxWidth;
|
||||
|
||||
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
|
||||
};
|
||||
|
||||
Lightbox.prototype.updateSize = function(iMediaNumber) {
|
||||
var oMedia = this.album[iMediaNumber];
|
||||
var sFileType = oMedia.link.split('.').slice(-1)[0];
|
||||
var oMaxSizes = this.getMaxSizes(oMedia.width, oMedia.height, oMedia.type);
|
||||
var iMaxMediaWidth = oMaxSizes.maxWidth;
|
||||
var iMaxMediaHeight = oMaxSizes.maxHeight;
|
||||
this.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
|
||||
|
||||
/*
|
||||
Since many SVGs have small intrinsic dimensions, but they support scaling
|
||||
up without quality loss because of their vector format, max out their
|
||||
size.
|
||||
*/
|
||||
if(sFileType === 'svg') {
|
||||
oMedia.$Media.width(iMaxMediaWidth);
|
||||
oMedia.$Media.height(iMaxMediaHeight);
|
||||
}
|
||||
|
||||
if(this.options.fitImagesInViewport) {
|
||||
//Check if image size is larger than maxWidth|maxHeight in settings
|
||||
if(this.options.maxWidth && this.options.maxWidth < iMaxMediaWidth) iMaxMediaWidth = this.options.maxWidth;
|
||||
if(this.options.maxHeight && this.options.maxHeight < iMaxMediaHeight) iMaxMediaHeight = this.options.maxHeight;
|
||||
}
|
||||
else {
|
||||
iMaxMediaWidth = this.options.maxWidth || oMedia.width || iMaxMediaWidth;
|
||||
iMaxMediaHeight = this.options.maxHeight || oMedia.height || iMaxMediaHeight;
|
||||
}
|
||||
|
||||
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
||||
//option than we need to size down while maintaining the aspect ratio.
|
||||
var iMediaFinalWidth, iMediaFinalHeight;
|
||||
if((oMedia.width > iMaxMediaWidth) || (oMedia.height > iMaxMediaHeight)) {
|
||||
if ((oMedia.width / iMaxMediaWidth) > (oMedia.height / iMaxMediaHeight)) {
|
||||
iMediaFinalWidth = iMaxMediaWidth;
|
||||
iMediaFinalHeight = Math.round(oMedia.height / (oMedia.width / iMaxMediaWidth));
|
||||
} else {
|
||||
iMediaFinalWidth = Math.round(oMedia.width / (oMedia.height / iMaxMediaHeight));
|
||||
iMediaFinalHeight = iMaxMediaHeight;
|
||||
}
|
||||
}
|
||||
else {
|
||||
iMediaFinalWidth = oMedia.width;
|
||||
iMediaFinalHeight = oMedia.height;
|
||||
}
|
||||
|
||||
oMedia.$Media.width(iMediaFinalWidth);
|
||||
oMedia.$Media.height(iMediaFinalHeight);
|
||||
this.sizeContainer(iMediaFinalWidth, iMediaFinalHeight, oMedia.type);
|
||||
};
|
||||
|
||||
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
||||
Lightbox.prototype.changeImage = function(imageNumber) {
|
||||
var self = this;
|
||||
var filename = this.album[imageNumber].link;
|
||||
var filetype = filename.split('.').slice(-1)[0];
|
||||
var $image = this.$lightbox.find('.lb-image');
|
||||
var self = this;
|
||||
var filename = this.album[imageNumber].link;
|
||||
|
||||
// Disable keyboard nav during transitions
|
||||
this.disableKeyboardNav();
|
||||
|
||||
// Disable keyboard nav during transitions
|
||||
this.disableKeyboardNav();
|
||||
// Show loading state
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
$('.lb-loader').fadeIn('slow');
|
||||
|
||||
// Show loading state
|
||||
this.$overlay.fadeIn(this.options.fadeDuration);
|
||||
$('.lb-loader').fadeIn('slow');
|
||||
//ADDED-START
|
||||
//this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
||||
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide();
|
||||
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide();
|
||||
this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
|
||||
self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
|
||||
//ADDED-END
|
||||
this.$outerContainer.addClass('animating');
|
||||
|
||||
this.$outerContainer.addClass('animating');
|
||||
oSpot.updateHash('media', self.album[imageNumber].id);
|
||||
|
||||
//ADDED-START
|
||||
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
|
||||
var iWindowWidth = $(window).width();
|
||||
var iWindowHeight = $(window).height();
|
||||
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth;
|
||||
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right;
|
||||
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop;
|
||||
|
||||
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height();
|
||||
var iImageRatio = iMediaWidth / iMediaHeight;
|
||||
|
||||
//Case horizontal
|
||||
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
|
||||
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
|
||||
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
|
||||
|
||||
//Case vertical
|
||||
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
|
||||
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
|
||||
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
|
||||
|
||||
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
|
||||
|
||||
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
|
||||
else iMaxMediaWidth -= iDataMaxWidth;
|
||||
|
||||
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
|
||||
};
|
||||
|
||||
oSpot.updateHash('media', self.album[imageNumber].id);
|
||||
|
||||
if(self.options.hasVideo) {
|
||||
var $lbContainer = this.$lightbox.find('.lb-container');
|
||||
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
|
||||
|
||||
if(self.album[imageNumber].type == 'video') {
|
||||
var $hasVideoNav = this.$container.hasClass('lb-video-nav');
|
||||
switch(self.album[imageNumber].type) {
|
||||
case 'video':
|
||||
this.$video.on('loadedmetadata', function(){
|
||||
var $This = $(this);
|
||||
|
||||
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video');
|
||||
maxVideoWidth = oMaxSizes.maxWidth;
|
||||
maxVideoHeight = oMaxSizes.maxHeight;
|
||||
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
|
||||
|
||||
//TODO merge with image
|
||||
if(self.options.fitImagesInViewport) {
|
||||
//Check if image size is larger than maxWidth|maxHeight in settings
|
||||
if(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth;
|
||||
if(self.options.maxHeight && self.options.maxHeight < maxVideoHeight) maxVideoHeight = self.options.maxHeight;
|
||||
}
|
||||
else {
|
||||
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
|
||||
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
|
||||
}
|
||||
|
||||
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
||||
//option than we need to size down while maintaining the aspect ratio.
|
||||
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
|
||||
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
|
||||
videoWidth = maxVideoWidth;
|
||||
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
|
||||
} else {
|
||||
videoHeight = maxVideoHeight;
|
||||
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
|
||||
}
|
||||
}
|
||||
else {
|
||||
videoWidth = this.videoWidth;
|
||||
videoHeight = this.videoHeight;
|
||||
}
|
||||
$This.width(videoWidth);
|
||||
$This.height(videoHeight);
|
||||
|
||||
self.sizeContainer($This.width(), $This.height(), 'video');
|
||||
$This.off('loadedmetadata');
|
||||
self.album[imageNumber].width = this.videoWidth;
|
||||
self.album[imageNumber].height = this.videoHeight;
|
||||
self.updateSize(imageNumber);
|
||||
$(this).off('loadedmetadata');
|
||||
});
|
||||
|
||||
this.currentImageIndex = imageNumber;
|
||||
this.$video.attr('src', self.album[imageNumber].link);
|
||||
|
||||
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
|
||||
return;
|
||||
}
|
||||
else {
|
||||
|
||||
this.$video.attr('src', filename);
|
||||
|
||||
if(!$hasVideoNav) this.$container.addClass('lb-video-nav');
|
||||
break;
|
||||
case 'image':
|
||||
this.$video.attr('src', '');
|
||||
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
|
||||
}
|
||||
if($hasVideoNav) this.$container.removeClass('lb-video-nav');
|
||||
|
||||
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||
var preloader = new Image();
|
||||
preloader.onload = function(){
|
||||
var $preloader;
|
||||
|
||||
self.$image.attr({
|
||||
'alt': self.album[imageNumber].alt,
|
||||
'src': filename
|
||||
});
|
||||
|
||||
$preloader = $(preloader);
|
||||
|
||||
//Orientation management
|
||||
if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) {
|
||||
var sWidth = preloader.width;
|
||||
preloader.width = preloader.height;
|
||||
preloader.height = sWidth;
|
||||
}
|
||||
self.album[imageNumber].width = preloader.width;
|
||||
self.album[imageNumber].height = preloader.height;
|
||||
|
||||
self.updateSize(imageNumber);
|
||||
};
|
||||
|
||||
// Preload image before showing
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
break;
|
||||
}
|
||||
//ADDED-END
|
||||
|
||||
// When image to show is preloaded, we send the width and height to sizeContainer()
|
||||
var preloader = new Image();
|
||||
preloader.onload = function() {
|
||||
var $preloader;
|
||||
var imageHeight;
|
||||
var imageWidth;
|
||||
var maxImageHeight;
|
||||
var maxImageWidth;
|
||||
var windowHeight;
|
||||
var windowWidth;
|
||||
|
||||
$image.attr({
|
||||
'alt': self.album[imageNumber].alt,
|
||||
'src': filename
|
||||
});
|
||||
|
||||
$preloader = $(preloader);
|
||||
|
||||
//ADDED-START
|
||||
if(Math.abs(self.album[imageNumber].orientation) == 90 && preloader.width > preloader.height) {
|
||||
var sWidth = preloader.width;
|
||||
preloader.width = preloader.height;
|
||||
preloader.height = sWidth;
|
||||
}
|
||||
self.album[imageNumber].width = preloader.width;
|
||||
self.album[imageNumber].height = preloader.height;
|
||||
//ADDED-END
|
||||
|
||||
$image.width(preloader.width);
|
||||
$image.height(preloader.height);
|
||||
windowWidth = $(window).width();
|
||||
windowHeight = $(window).height();
|
||||
|
||||
// Calculate the max image dimensions for the current viewport.
|
||||
// Take into account the border around the image and an additional 10px gutter on each side.
|
||||
//ADDED-START
|
||||
//maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
|
||||
//maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
|
||||
var oMaxSizes = getMaxSizes(preloader.width, preloader.height, 'image');
|
||||
maxImageWidth = oMaxSizes.maxWidth;
|
||||
maxImageHeight = oMaxSizes.maxHeight;
|
||||
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
|
||||
//ADDED-END
|
||||
|
||||
/*
|
||||
Since many SVGs have small intrinsic dimensions, but they support scaling
|
||||
up without quality loss because of their vector format, max out their
|
||||
size.
|
||||
*/
|
||||
if (filetype === 'svg') {
|
||||
$image.width(maxImageWidth);
|
||||
$image.height(maxImageHeight);
|
||||
}
|
||||
|
||||
// Fit image inside the viewport.
|
||||
if (self.options.fitImagesInViewport) {
|
||||
|
||||
// Check if image size is larger then maxWidth|maxHeight in settings
|
||||
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
||||
maxImageWidth = self.options.maxWidth;
|
||||
}
|
||||
if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
|
||||
maxImageHeight = self.options.maxHeight;
|
||||
}
|
||||
|
||||
} else {
|
||||
maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
|
||||
maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
|
||||
}
|
||||
|
||||
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
||||
// option than we need to size down while maintaining the aspect ratio.
|
||||
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
||||
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
||||
imageWidth = maxImageWidth;
|
||||
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
} else {
|
||||
imageHeight = maxImageHeight;
|
||||
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
||||
$image.width(imageWidth);
|
||||
$image.height(imageHeight);
|
||||
}
|
||||
}
|
||||
//ADDED-START
|
||||
//self.sizeContainer($image.width(), $image.height());
|
||||
self.sizeContainer($image.width(), $image.height(), 'image');
|
||||
//ADDED-END
|
||||
};
|
||||
|
||||
// Preload image before showing
|
||||
preloader.src = this.album[imageNumber].link;
|
||||
this.currentImageIndex = imageNumber;
|
||||
this.currentImageIndex = imageNumber;
|
||||
};
|
||||
//ADDED-END
|
||||
|
||||
// Stretch overlay to fit the viewport
|
||||
Lightbox.prototype.sizeOverlay = function(e) {
|
||||
var self = this;
|
||||
//var self = this;
|
||||
|
||||
/*
|
||||
/*
|
||||
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
|
||||
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
|
||||
tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
|
||||
@@ -541,17 +483,24 @@
|
||||
number.
|
||||
*/
|
||||
//ADDED-START
|
||||
/*
|
||||
/*
|
||||
setTimeout(function() {
|
||||
self.$overlay
|
||||
.width($(document).width())
|
||||
.height($(document).height());
|
||||
|
||||
}, 0);
|
||||
*/
|
||||
*/
|
||||
if(e) {
|
||||
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
|
||||
oResizeTimer = setTimeout(function(){self.changeImage(self.currentImageIndex);}, 200);
|
||||
var oMedia = this.album[this.currentImageIndex];
|
||||
if(oMedia.type == 'image') {
|
||||
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
|
||||
oResizeTimer = setTimeout(()=>{this.changeImage(this.currentImageIndex);}, 200);
|
||||
}
|
||||
else {
|
||||
//var $Media = oMedia.$Media;
|
||||
//this.updateSize($($Media), $Media.videoWidth, $Media.videoHeight, oMedia.type);
|
||||
}
|
||||
}
|
||||
//ADDED-END
|
||||
};
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
@@ -38,9 +39,10 @@
|
||||
padding-right: 1em;
|
||||
line-height: 1.33333333333em; //icon height
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&.comment {
|
||||
max-width: 50%;
|
||||
@include no-text-overflow();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,6 +68,18 @@
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
line-height: 1.33333333em;
|
||||
|
||||
&.comment {
|
||||
.fa {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
display: inline-block;
|
||||
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lb-closeContainer .lb-close {
|
||||
@@ -105,8 +119,8 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
&.lb-video-nav .lb-nav {
|
||||
top: 0;
|
||||
height: calc(100% - 100px); //Leave space for video progress bar
|
||||
top: 100px;
|
||||
height: calc(100% - 200px); //Leave space for video progress bar
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
@@ -117,7 +131,7 @@
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: calc(50% - 1em + 50px);
|
||||
top: calc(50% - 1em);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,10 +172,6 @@
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.comment {
|
||||
@include no-text-overflow();
|
||||
}
|
||||
}
|
||||
|
||||
.lb-number {
|
||||
|
||||
@@ -63,10 +63,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox.vertical .lb-dataContainer .lb-data .lb-details .lb-caption-line.comment {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 801px) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user