modals working
David Kebler
parent
6834c1aedf
commit
f02ed87636
|
|
@ -10,6 +10,7 @@
|
|||
{{ partial "hero.html" . }}
|
||||
{{ end }}
|
||||
{{ partial "sections.html" . }}
|
||||
{{ partial "modals.html" . }}
|
||||
</main>
|
||||
{{ partial "js.html" . }}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,13 @@
|
|||
<!-- Light Gallery-->
|
||||
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
|
||||
<!-- scrollbar-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" type="text/css" media="screen" />
|
||||
|
||||
<!-- Modal-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css" type="text/css" media="screen" />
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css" type="text/css" media="screen" /> -->
|
||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.4.2/css/iziModal.min.css" type="text/css" media="screen" /> -->
|
||||
|
||||
<!-- highlights -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
|
||||
|
||||
|
|
|
|||
|
|
@ -42,8 +42,6 @@
|
|||
}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{ end }} /* end navbar */
|
||||
|
||||
{{ with .hero }}
|
||||
|
|
@ -193,6 +191,34 @@
|
|||
|
||||
{{ end }} /* end sections */
|
||||
|
||||
|
||||
{{ with .modal }}
|
||||
|
||||
{{ with .font }}
|
||||
.section__container--modal { font-family:{{ . }},Helvetica,Arial,sans-serif; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .color }}
|
||||
.section__container--modal { color: {{ . }}; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .bg_color }}
|
||||
.section__container--modal { background-color: {{ . }}; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .headline_size }}
|
||||
.section__headline--modal > h1 { font-size: {{ . }}em; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .text_size }}
|
||||
.section__container--modal { font-size: {{ . }}em; }
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{ end }} /*end modal */
|
||||
|
||||
|
||||
{{ with .buttons }}
|
||||
|
||||
{{ with .odd }}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,12 @@
|
|||
<script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
|
||||
<!-- light gallery and modules/plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
|
||||
<!-- modal -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
|
||||
<!-- scrollbar -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
|
||||
<!-- highlights -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
|
||||
|
||||
<!-- LOCAL -->
|
||||
|
||||
<!-- Function Library -->
|
||||
<!-- sizing tools -->
|
||||
<script src="/js/fitToParent.js"></script>
|
||||
<script src="/js/flowType.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
{{ range where .Site.RegularPages "Section" "modal" }}
|
||||
<div id="modal-{{ .File.BaseFileName }}" class="section section--modal">
|
||||
<div class="section__container section__container--modal">
|
||||
<div class="section__headline section__headline--modal">
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
<div class="section__content section__content--modal" {{ with .Params.align }} style="align-items: {{.}};"{{ end }} >
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<!-- <nav class="nav-bar__menu-off"> -->
|
||||
<ul class="nav-bar__menu hide-menu">
|
||||
{{ range .Data.Pages }}
|
||||
{{ range where .Site.RegularPages "Section" "sections" }}
|
||||
{{ if ne .Params.navbar false }}
|
||||
{{ if ne .Params.hidden true }}
|
||||
<li class="nav-bar__menu-item">
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
<!-- </nav> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div id="nav-bar-spacer"></div>
|
||||
<div class="nav-bar-spacer"></div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<!-- Renders Section Based on Content -->
|
||||
{{ range $i, $e := where (.Data.Pages) ".Params.hidden" "!=" true }}
|
||||
<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "hero" }}section--{{ if modBool $i 2 }}odd{{ else }}even{{ end }}{{ end }}">
|
||||
{{ $.Scratch.Set "offset" 0 }}
|
||||
{{ range $i, $e := where ( where .Site.RegularPages "Section" "sections" ) ".Params.hidden" "!=" true }}
|
||||
{{ if eq .File.BaseFileName "hero" }}{{ $.Scratch.Set "offset" 1 }}{{ end }}
|
||||
{{ $j := add ( $.Scratch.Get "offset" ) $i }}
|
||||
<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "hero" }}section--{{ if modBool $j 2 }}odd{{ else }}even{{ end }}{{ end }}">
|
||||
<div class="section__container">
|
||||
<div class="section__headline section__headline--{{ .File.BaseFileName }}">
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<section id="services">
|
||||
|
||||
<!-- Page Content -->
|
||||
{{ range $index, $element := .Data.Pages }}{{ if or (eq .Section "services") (eq .Section "post") }}
|
||||
{{ if modBool $index 2 }}
|
||||
<div class="content-section-a">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-sm-6">
|
||||
<hr class="section-heading-spacer">
|
||||
<div class="clearfix"></div>
|
||||
<h2 class="section-heading">{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ with .Params.img }}
|
||||
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
|
||||
<img class="img-responsive" src="img/{{ . }}" alt="">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
|
||||
</div>
|
||||
<!-- /.content-section-a -->
|
||||
{{ else }}
|
||||
|
||||
<div class="content-section-b">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
|
||||
<hr class="section-heading-spacer">
|
||||
<div class="clearfix"></div>
|
||||
<h2 class="section-heading">{{ .Title }}</h2>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ with .Params.img }}
|
||||
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
|
||||
<img class="img-responsive" src="img/{{ . }}" alt="">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
|
||||
</div>
|
||||
{{ end }}
|
||||
<!-- /.content-section-b -->
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</section>
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
{{ .Scratch.Set "url" ( printf "javascript:void( window.open('%s', 'blank', 'scrollbars=yes, toolbar=no, width=%s %s' ))" (.Scratch.Get "url") (.Scratch.Get "width") (.Scratch.Get "height") ) }}
|
||||
{{ end }}
|
||||
<a
|
||||
{{ if eq (.Get "display") "tab" }}target="_blank"{{ end }}
|
||||
{{ if eq (.Get "display") "modal" }}rel="modal:open"{{ end }}
|
||||
{{ if eq (.Get "type") "btn" }}class="box box--btn btn btn--{{ .Get "size" | default "regular" }}"{{ end }}
|
||||
{{ if eq (.Get "display") "tab" }} target="_blank"{{ end }}
|
||||
{{ if eq (.Get "display") "modal" }} modal{{ end }}
|
||||
{{ if eq (.Get "type") "btn" }} class="box box--btn btn btn--{{ .Get "size" | default "regular" }}"{{ end }}
|
||||
{{ printf "href=%q" (.Scratch.Get "url") | safeHTMLAttr }}
|
||||
>
|
||||
{{ with .Get "icon" }}<i class="btn__icon fa fa-{{ . }}"></i>{{ end }}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
/* display: block; */
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 1.45;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
transition: 200ms;
|
||||
border-top: 2px solid;
|
||||
font-size: 1.8em;
|
||||
padding: .5em;
|
||||
padding: .35em;
|
||||
}
|
||||
|
||||
.nav-bar__menu-item > a {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
margin-left: -1.4em;
|
||||
}
|
||||
|
||||
.section--even {
|
||||
.section--odd {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
background-color: grey;
|
||||
}
|
||||
|
||||
.section--even .btn {
|
||||
.section--odd .btn {
|
||||
color: black;
|
||||
background-color: white;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -82,11 +82,62 @@
|
|||
min-height: 4000px;
|
||||
}
|
||||
|
||||
/* modal */
|
||||
|
||||
.section--modal {
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.section__container--modal {
|
||||
margin: 0.5em;
|
||||
margin-top: 2em;
|
||||
background-color: black;
|
||||
color: white;
|
||||
max-height: 85%;
|
||||
border-radius: 1em;
|
||||
width: auto;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.section__headline--modal {
|
||||
padding-top: 0.5em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 1.2em;
|
||||
}
|
||||
|
||||
.section__headline--modal > h1 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.section__headline--modal > a[modal-close] {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 0.4em;
|
||||
right: 0.4em;
|
||||
}
|
||||
|
||||
.section__content--modal {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
font-size: 0.7em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* ----------------
|
||||
Hero Section
|
||||
---------------- */
|
||||
#hero {
|
||||
background-image: url("../images/hero.jpg");
|
||||
background-image: url("/images/hero.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
|
|
@ -96,6 +147,17 @@
|
|||
|
||||
#hero .section-content--hero {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/*mobile first*/
|
||||
#hero h1,
|
||||
#hero h2,
|
||||
#hero h3,
|
||||
#hero h4,
|
||||
#hero h5,
|
||||
#hero h6 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ----------------
|
||||
|
|
@ -197,8 +259,8 @@ img.avatar {
|
|||
}
|
||||
|
||||
.box__caption {
|
||||
text-transform: capitalize;
|
||||
font-style: italic;
|
||||
text-transform: capitalize;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.box__title {
|
||||
|
|
@ -251,7 +313,7 @@ code {
|
|||
}
|
||||
|
||||
code.hljs {
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
border-radius: 0.2em;
|
||||
background-color: dimgrey;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,24 @@
|
|||
|
||||
/* tablets */
|
||||
@media only screen and (min-width: 800px) {
|
||||
.section__headline--modal > h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.section__headline--modal > a[modal-close] {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 800px) and (max-device-width: 1190px) {
|
||||
@media only screen and (min-device-width: 800px) and (max-device-width: 1199px) {
|
||||
#hero h1,
|
||||
#hero h2,
|
||||
#hero h3,
|
||||
#hero h4,
|
||||
#hero h5,
|
||||
#hero h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
|
|
@ -24,6 +39,15 @@
|
|||
.box__contact {
|
||||
margin-left: 6em;
|
||||
}
|
||||
|
||||
#hero h1,
|
||||
#hero h2,
|
||||
#hero h3,
|
||||
#hero h4,
|
||||
#hero h5,
|
||||
#hero h6 {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ $(document).ready(function () {
|
|||
itemResize('iframe');
|
||||
typeResize(); // for section content
|
||||
hljs.initHighlightingOnLoad();
|
||||
$('.section__content--modal').perfectScrollbar();
|
||||
|
||||
// resize elements on change
|
||||
$(window).resize(function () {
|
||||
|
|
@ -16,6 +17,7 @@ $(document).ready(function () {
|
|||
heroResize();
|
||||
itemResize('iframe');
|
||||
typeResize();
|
||||
$('.section__content--modal').perfectScrollbar('update');
|
||||
});
|
||||
|
||||
});;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Smooth Scroll Init - Register click handler for ID anchors
|
||||
$('a[href*="#"]:not([href="#"])').click(function () {
|
||||
$('a[href*="#"]:not(a[modal])').click(function () {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
|
|
@ -30,7 +30,7 @@ $('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
|
|||
// $('#phone').click(function () { alert('phone clicked'); return false; });
|
||||
|
||||
function navbarSpacer() {
|
||||
$('#nav-bar-spacer').css({
|
||||
$('.nav-bar-spacer').css({
|
||||
height: $(".nav-bar__header").outerHeight(true),
|
||||
});
|
||||
}
|
||||
|
|
@ -106,3 +106,40 @@ function lightgallery(id) {
|
|||
});
|
||||
|
||||
}
|
||||
|
||||
// Modal
|
||||
// hide all the modals before displaying
|
||||
$('.section--modal').each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
// all but inside the modal box
|
||||
$(document).on('click', function (event) {
|
||||
var container = $(".section__container--modal");
|
||||
if (!container.is(event.target) && // If the target of the click isn't the container...
|
||||
container.has(event.target).length === 0) // ... nor a descendant of the container
|
||||
{
|
||||
$('.section--modal.current').hide().removeClass("current");
|
||||
}
|
||||
});
|
||||
|
||||
$('.section__container--modal').click(function () {
|
||||
$('.section--modal.current').hide().removeClass("current");
|
||||
$('a[modal-close]').remove();
|
||||
});
|
||||
|
||||
// register click for modal link
|
||||
$("a[modal]").click(function () {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = this.hash;
|
||||
$(target).addClass("current").show()
|
||||
target = target + " > .section__container > .section__headline"
|
||||
var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
|
||||
$(target).append(closer);
|
||||
} else {
|
||||
var target = this;
|
||||
}
|
||||
// alert(`I clicked on modal link ${target}`);
|
||||
return false;
|
||||
});
|
||||
// end modal
|
||||
|
|
|
|||
Loading…
Reference in New Issue