HandBrake/HandBrake-docs
1
0
Fork 0
mirror of https://github.com/HandBrake/HandBrake-docs.git synced 2025-12-10 16:30:22 -06:00
Code Issues Packages Projects Releases 1 Wiki Activity

template: Display captions below screenshot images in lightbox.

Browse Source 
Thanks to @raderb for the nudge in #52. Closes #5.
This commit is contained in:
Bradley Sepos 2018-10-09 11:18:22 -04:00
parent 421e83b091
commit 74b206e98f
No known key found for this signature in database
GPG Key ID: DEADE2F57D42D9C7
2 changed files with 78 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
templates/mark1/assets/css/style.css
View File

@ -4,10 +4,16 @@ body {
background-color: rgb(255,255,255);
}
article.docs {
.featherlight .featherlight-image {
margin: 0 auto;
padding: 1.875rem 15px;
max-width: 90%;
}
.featherlight .featherlight-content {
border-radius: 3px;
}
article.docs,
.featherlight .featherlight-content p {
background-color: transparent;
color: rgb(20,20,20);
font-family: 'Open Sans', -apple-system-body, 'Helvetica Neue', Helvetica, 'Droid Sans', Roboto, sans-serif;
@ -17,6 +23,12 @@ article.docs {
line-height: 1.66666;
}
article.docs {
margin: 0 auto;
padding: 1.875rem 15px;
max-width: 90%;
}
article.docs .hidden {
display: none;
}
@ -504,9 +516,9 @@ article.docs figure img {
max-width: 100%;
}
article.docs figcaption {
article.docs figcaption,
.featherlight .featherlight-content p {
margin-top: .5rem;
margin-bottom: -1px;
padding-top: .454545em;
border-top: 1px solid rgb(232,232,232);
font-size: .6875rem;
@ -514,6 +526,14 @@ article.docs figcaption {
color: rgb(120,120,120);
}
.featherlight .featherlight-content p:last-child {
margin-bottom: 0;
}
article.docs figcaption {
margin-bottom: -1px;
}
article.docs .continue {
margin-top: 2em;
padding-bottom: .1px;
@ -560,10 +580,6 @@ article.docs .footnotes + footer {
border-top: none;
}
.featherlight .featherlight-content {
border-radius: 3px;
}
/* Wider than 350 */
@media (min-width: 350px) {
article.docs nav {
@ -659,6 +675,10 @@ article.docs .footnotes + footer {
max-height: 240px;
}
.featherlight .featherlight-content p {
font-size: .825rem;
}
}
/* Wider than 1000, taller than 550 */
@ -710,6 +730,10 @@ article.docs .footnotes + footer {
max-height: 320px;
}
.featherlight .featherlight-content p {
font-size: .9375rem;
}
}
/* Wider than 1200, taller than 600 */

45
templates/mark1/assets/js/scripts.js
View File

@ -216,4 +216,49 @@ $(document).ready(function(){
}
$(this).featherlight({type: 'image2', openSpeed: 150, closeSpeed: 150});
});
$.featherlight.prototype.resize = function(w, h){
if (w && h) {
/* Reset apparent image size first so container grows */
this.$content.css('width', '').css('height', '');
var aspect = w / h;
var caption = this.$instance.find('p');
var caption_height = caption.outerHeight(true);
var caption_factor = 1;
var parent_width = this.$content.parent().width();
var parent_height = this.$content.parent().height();
var height = parent_height - caption_height;
var width = height * aspect;
var new_width = width + 0;
var new_height = height + 0;
var min_width = 0;
var min_height = 0;
/* Set minimum size for small viewports */
if (window.innerWidth < 550){
min_width = Math.floor(window.innerWidth - 20 - 1);
min_height = min_width / aspect;
}
this.$content.css('min-width', '' + min_width + 'px').css('min-height', '' + min_height + 'px');
/* Calculate the worst ratio so that dimensions fit */
/* Note: -1 to avoid rounding errors */
var ratio = Math.max(
w / (parent_width - 1),
h / (parent_height - 1));
/* Resize content */
if (ratio > 1) {
/* Round ratio down so height calc works */
ratio = h / Math.floor(h / ratio);
/* Account for caption size */
if (height + (caption_height * 2) > parent_height){
caption_factor = caption_factor - (caption_height * 2.5 / parent_height);
}
new_width = w * caption_factor / ratio;
new_height = h * caption_factor / ratio;
this.$content.css('width', '' + new_width + 'px').css('height', '' + new_height + 'px');
}
}
};
$.featherlight.prototype.beforeOpen = function(event){
this.$instance.find('p').remove();
$('<p></p>').text(this.$currentTarget.parent().find('figcaption')[0].innerText).appendTo(this.$instance.find('.featherlight-content'));
};
});