From f02ed876363ba524bb8012b9edb37b02072894fb Mon Sep 17 00:00:00 2001
From: David Kebler <d@kebler.net>
Date: Fri, 7 Apr 2017 01:40:29 -0700
Subject: [PATCH] modals working

---
 layouts/index.html                |  1 +
 layouts/partials/head/css.html    |  7 ++-
 layouts/partials/head/styles.html | 30 +++++++++++-
 layouts/partials/js.html          |  6 +--
 layouts/partials/modals.html      | 12 +++++
 layouts/partials/navbar.html      |  4 +-
 layouts/partials/sections.html    |  7 ++-
 layouts/partials/services.html    | 58 ----------------------
 layouts/shortcodes/link.html      |  6 +--
 static/css/base.css               |  1 -
 static/css/navbar.css             |  2 +-
 static/css/page.css               | 80 +++++++++++++++++++++++++++----
 static/css/responsive.css         | 26 +++++++++-
 static/js/docready.js             |  2 +
 static/js/page.js                 | 41 +++++++++++++++-
 15 files changed, 197 insertions(+), 86 deletions(-)
 create mode 100644 layouts/partials/modals.html
 delete mode 100644 layouts/partials/services.html

diff --git a/layouts/index.html b/layouts/index.html
index de53e8d..1d1a353 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,6 +10,7 @@
 {{ partial "hero.html" . }}
 {{ end }}
 {{ partial "sections.html" . }}
+{{ partial "modals.html" . }}
 </main>
 {{ partial "js.html" . }}
 </body>
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index a78913e..c4ceb1a 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -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">
 
diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html
index eb86ba3..a591bd9 100644
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.html
@@ -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 }}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 3c830c6..5dca0bc 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -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>
diff --git a/layouts/partials/modals.html b/layouts/partials/modals.html
new file mode 100644
index 0000000..cf1e043
--- /dev/null
+++ b/layouts/partials/modals.html
@@ -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 }}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 0f3db17..29f61aa 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -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>
diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html
index d4f372f..adad9e4 100644
--- a/layouts/partials/sections.html
+++ b/layouts/partials/sections.html
@@ -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>
diff --git a/layouts/partials/services.html b/layouts/partials/services.html
deleted file mode 100644
index b76f7d6..0000000
--- a/layouts/partials/services.html
+++ /dev/null
@@ -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>
diff --git a/layouts/shortcodes/link.html b/layouts/shortcodes/link.html
index f7627e7..fda8f7b 100644
--- a/layouts/shortcodes/link.html
+++ b/layouts/shortcodes/link.html
@@ -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 }}
diff --git a/static/css/base.css b/static/css/base.css
index cd1ce30..bd66fc7 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -56,7 +56,6 @@ h3,
 h4,
 h5,
 h6 {
-  /* display: block; */
   text-align: center;
   font-weight: bold;
   line-height: 1.45;
diff --git a/static/css/navbar.css b/static/css/navbar.css
index bdb42b8..a788753 100644
--- a/static/css/navbar.css
+++ b/static/css/navbar.css
@@ -54,7 +54,7 @@
   transition: 200ms;
   border-top: 2px solid;
   font-size: 1.8em;
-  padding: .5em;
+  padding: .35em;
 }
 
 .nav-bar__menu-item > a {
diff --git a/static/css/page.css b/static/css/page.css
index ded9b7c..3277a7f 100644
--- a/static/css/page.css
+++ b/static/css/page.css
@@ -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,14 +259,14 @@ img.avatar {
 }
 
 .box__caption {
-text-transform: capitalize;
-font-style: italic;
+  text-transform: capitalize;
+  font-style: italic;
 }
 
 .box__title {
- text-transform: uppercase;
- font-weight: bold;
- padding-top: 0.75em;
+  text-transform: uppercase;
+  font-weight: bold;
+  padding-top: 0.75em;
 }
 
 .box__embed--disqus {
@@ -251,7 +313,7 @@ code {
 }
 
 code.hljs {
-  font-size: .75em;
+  font-size: 0.75em;
   border-radius: 0.2em;
   background-color: dimgrey;
   color: white;
diff --git a/static/css/responsive.css b/static/css/responsive.css
index 5510ed5..7fcfb11 100644
--- a/static/css/responsive.css
+++ b/static/css/responsive.css
@@ -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) {
diff --git a/static/js/docready.js b/static/js/docready.js
index 84f99fa..00bf617 100644
--- a/static/js/docready.js
+++ b/static/js/docready.js
@@ -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');
   });
 
 });;
diff --git a/static/js/page.js b/static/js/page.js
index 6f7e3c0..9400d95 100644
--- a/static/js/page.js
+++ b/static/js/page.js
@@ -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