make shrotcode boxed embded iframes and images fit to window width and respond - add modal parameter to image shortcut for lightbox
parent
644649597d
commit
5486b59550
|
@ -41,3 +41,10 @@ $(document).ready(function () {
|
|||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
<!-- use same lightbox for full sized images in when link="modal" -->
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
{{ $.Site.Params.lightbox | safeJS }}('.box--image')
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<div class="box box--{{ .Get 0 }}">
|
||||
{{ $numOfParams := ( len .Params ) }}
|
||||
<div class="box {{ range .Params }}box--{{ . }} {{ end }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
@ -1,20 +1,16 @@
|
|||
<!-- Used for embedding iframes from sites like youtube and google -->
|
||||
{{ if .IsNamedParams }}
|
||||
<div class="box box--{{ .Get "type" }}">
|
||||
<div class="box box--embed box--{{ .Get "type" }}">
|
||||
{{ with .Get "title" }}
|
||||
<div class="box__title">{{ . }}</div>
|
||||
{{ end }}
|
||||
<div class="box__embed box__embed--{{ .Get "type" }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{ .Inner }}
|
||||
{{ with .Get "caption"}}
|
||||
<div class="box__caption">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="box box--{{ .Get 0 }}">
|
||||
<div class="box__embed box__embed--{{ .Get 0 }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
<div class="box box--embed box--{{ .Get 0 }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
{{ $path := "/images/" }}
|
||||
{{ $filename := .Get "filename" }}
|
||||
{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
|
||||
<div class="box box--column box--image">
|
||||
{{ with .Get "title" }}
|
||||
<div class="box__title">{{ . }}</div>
|
||||
{{ end }}
|
||||
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
|
||||
{{ with .Get "link"}}
|
||||
{{ if eq . "modal" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}">{{ end }}
|
||||
{{ end }}
|
||||
<img src="{{ $path }}{{ .Get "filename" }}" />
|
||||
{{ if .Get "link"}}</a>{{ end }}
|
||||
{{ with .Get "caption"}}
|
||||
|
|
|
@ -128,7 +128,7 @@ a:hover,
|
|||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
|
|
|
@ -8,13 +8,14 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.section__content ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: 80%;
|
||||
max-width: 85%;
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 1em;
|
||||
padding-left: 0.5em;
|
||||
|
@ -209,11 +210,6 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box--image {
|
||||
max-width: 450px;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.box--headline {
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
// TODO register these individually with window resize use self callled function
|
||||
function resizeElements() {
|
||||
navbarSpacer();
|
||||
$('.box--embed > iframe').fitToWindow()
|
||||
$('.box--image > img').fitToWindow()
|
||||
heroResize();
|
||||
typeResize(); // for section content
|
||||
$('.section__content--modal').perfectScrollbar('update');
|
||||
|
|
|
@ -13,15 +13,16 @@
|
|||
this.each(function () {
|
||||
let $el = $(this);
|
||||
|
||||
console.log(`${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
|
||||
|
||||
console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`)
|
||||
console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
|
||||
maxWidth = (maxWidth || $el.data('maxWidth')) || 450
|
||||
wPad = $el.parent().css("padding-left") > 0 ? $el.parent().css("padding-left") : wPad
|
||||
wPad = (wPad || $el.data('wPad')) || 5
|
||||
|
||||
let windowWidth = $(window).width()
|
||||
let newWidth = (windowWidth > maxWidth) ? maxWidth : windowWidth - 2 * wPad
|
||||
|
||||
console.log(`${maxWidth} ${wPad} ${newWidth} ${$el.parent().attr('youtube_id')}`)
|
||||
console.log(`after ${maxWidth} ${wPad} ${newWidth}`)
|
||||
|
||||
// Initial Aspect given in attributes by element itself
|
||||
let setWidth = $el.attr('width');
|
||||
|
@ -54,7 +55,6 @@
|
|||
// Set new size of element
|
||||
$el.width(newWidth);
|
||||
$el.height(newHeight);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue