make shrotcode boxed embded iframes and images fit to window width and respond - add modal parameter to image shortcut for lightbox

master
David Kebler 2017-04-18 22:12:41 -07:00
parent 644649597d
commit 5486b59550
8 changed files with 26 additions and 21 deletions

View File

@ -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>

View File

@ -1,3 +1,4 @@
<div class="box box--{{ .Get 0 }}">
{{ $numOfParams := ( len .Params ) }}
<div class="box {{ range .Params }}box--{{ . }} {{ end }}">
{{ .Inner }}
</div>

View File

@ -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 }}

View File

@ -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"}}

View File

@ -128,7 +128,7 @@ a:hover,
}
img {
max-width: 100%;
max-width: 95vw;
}
img.avatar {

View File

@ -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 {
}

View File

@ -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');

View File

@ -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);
});
}