Added vex dialog display to projects (not working consistently)

6 files changed, 137 insertions, 8 deletions

diff --git a/layouts/partials/core/css.html b/layouts/partials/core/css.html
index 0cb9893..6954f4d 100644
--- a/layouts/partials/core/css.html
+++ b/layouts/partials/core/css.html
@@ -1,8 +1,21 @@
+<!-- Load materialize used to provide parts of theme visuals -->
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/materialize.min.css">
+
+<!-- Load font awesome used for various icons -->
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/font-awesome.min.css">
+
 {{ with .Site.Params.Highlight }}
+    <!-- Load highlight theme used for client-side syntax highlighting -->
     <link rel="stylesheet" href="{{ $.Site.BaseURL }}css/styles/{{ .style }}.css">
 {{ end }}
+
+<!-- Load lightbox stylings -->
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/lightbox.css">
+
+<!-- Load styles for vex dialogs -->
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/vex.css">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/vex-theme-default.css">
+
+<!-- Load main theme stylings -->
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css">
 
diff --git a/layouts/partials/core/js.html b/layouts/partials/core/js.html
index 6325a6c..2d4c360 100644
--- a/layouts/partials/core/js.html
+++ b/layouts/partials/core/js.html
@@ -1,12 +1,30 @@
+<!-- Load jquery used for various plugins -->
 <script src="{{ .Site.BaseURL }}js/jquery-2.1.4.min.js"></script>
+
+<!-- Load materialize used to provide parts of theme visuals -->
 <script src="{{ .Site.BaseURL }}js/materialize.min.js"></script>
+
+<!-- Load imagesloaded needed by masonry to handle adding images -->
 <script src="{{ .Site.BaseURL }}js/imagesloaded.pkgd.min.js"></script>
+
+<!-- Load masonry used for layout on list pages -->
 <script src="{{ .Site.BaseURL }}js/masonry.pkgd.min.js"></script>
+
 {{ if .Site.Params.Highlight }}
+    <!-- Load highlight used for client-side syntax highlighting -->
     <script src="{{ .Site.BaseURL }}js/highlight.pack.js"></script>
 {{ end }}
+
+<!-- Load lightbox used for gallery viewing -->
 <script src="{{ .Site.BaseURL }}js/lightbox.min.js"></script>
+
+<!-- Load infinite scroll used to link together paginated content -->
 <script src="{{ .Site.BaseURL }}js/jquery.infinitescroll.min.js"></script>
-<!-- <script src="{{ .Site.BaseURL }}js/pointer-events-polyfill.js"></script> -->
+
+<!-- Initialize dialog support -->
+<script src="{{ .Site.BaseURL }}js/vex.combined.min.js"></script>
+<script>vex.defaultOptions.className = "vex-theme-default";</script>
+
+<!-- Load theme-specific Javascript -->
 <script src="{{ .Site.BaseURL }}js/main.js"></script>
 
diff --git a/layouts/partials/project/item.html b/layouts/partials/project/item.html
index d39d608..a91a775 100644
--- a/layouts/partials/project/item.html
+++ b/layouts/partials/project/item.html
@@ -8,13 +8,33 @@
 <div class="flex-item flex-item-spacing no-line-height">
     <div class="relative rounded-corners z-depth-1 lazyload" data-noscript="">
         <noscript>
-            <a href="{{ $link }}">
+            <div class="dialog-container">
+                <a href="{{ $link }}" class="dialog-link">
+                    <div class="project-container">
+                        <img src="{{ $image }}" class="fill-container-width rounded-corners-top z-depth-1" />
+                        <div class="rounded-corners-bottom center-text project-container-title">
+                            <h3>{{ $title }}</h3>
+                        </div>
+                    </div>
+                    <div class="highlight-block rounded-corners">
+                    </div>
+                </a>
+                <div class="dialog-content">
+                    <div class="dialog-content-stylings">
+                        <h3>{{ $title }}</h3>
 
-                <img src="{{ $image }}" class="fill-container-width rounded-corners z-depth-1" />
-                <div class="highlight-block rounded-corners">
-                    <h3 class="white-text">{{ $title }}</h3>
+                        <hr>
+
+                        <section>
+                            {{ $summary }}
+                        </section>
+
+                        <hr>
+
+                        <a href="{{ $link }}" class="page-item-btn">Go to project</a>
+                    </div>
                 </div>
-            </a>
+            </div>
         </noscript>
     </div>
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index 5b7c829..5e8305d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,25 @@
 
 /* ========================================================================= */
+/* = MODAL DIALOG                                                            */
+/* ========================================================================= */
+
+/* Used to contain the hyperlink and dialog content */
+.dialog-container {}
+
+/* Used to mark dialog link to click */
+.dialog-link {}
+
+/* Used by Javascript to inject into actual modal display */
+.dialog-content {
+    display: none;
+}
+
+/* Contains stylings to apply to the dialog content */
+.dialog-content-stylings {
+    padding: 5px;
+}
+
+/* ========================================================================= */
 /* = LAZY LOADING                                                            */
 /* ========================================================================= */
 
@@ -28,6 +48,19 @@
 }
 
 /* ========================================================================= */
+/* = PROJECT                                                                 */
+/* ========================================================================= */
+
+/* Contains the project image and title */
+.project-container {}
+
+.project-container-title {
+    padding: 5px;
+    background-color: #455A64;
+    color: #FFFFFF;
+}
+
+/* ========================================================================= */
 /* = NAVBAR MENU                                                             */
 /* ========================================================================= */
 
@@ -304,7 +337,26 @@ html, body {
 
 .rounded-corners {
     -webkit-border-radius: 10px;
-    border-radius: 10px; 
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
+
+.rounded-corners-top {
+    -webkit-border-top-left-radius: 10px;
+    -webkit-border-top-right-radius: 10px;
+    -moz-border-radius-topleft: 10px;
+    -moz-border-radius-topright: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.rounded-corners-bottom {
+    -webkit-border-bottom-right-radius: 10px;
+    -webkit-border-bottom-left-radius: 10px;
+    -moz-border-radius-bottomright: 10px;
+    -moz-border-radius-bottomleft: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
 }
 
 /* From materialize */
diff --git a/static/img/placeholder.jpg b/static/img/placeholder.jpg
new file mode 100644
index 0000000..17d8541
--- /dev/null
+++ b/static/img/placeholder.jpg
diff --git a/static/js/main.js b/static/js/main.js
index 6792d86..5fbd8f2 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,4 +1,4 @@
-$(document).ready(function(){
+$(document).ready(function() {
     // Employ Masonry layout configuration
     var $container = $(".masonry-flex-container")
     $container.imagesLoaded().always(function(instance) {
@@ -20,6 +20,28 @@ $(document).ready(function(){
         }, true);
     });
 
+    // Provide modal dialog displays
+    var addDialogClickEvent = function($dialogLink, $dialogContent) {
+        $dialogLink.click(function(e) {
+            e.preventDefault();
+
+            var dialogContentHtml = $dialogContent.html();
+            vex.open().append(dialogContentHtml);
+        });
+    };
+    var attachDialogToContainer = function($dialogContainer) {
+        var $dialogLink = $dialogContainer.find(".dialog-link");
+        var $dialogContent = $dialogContainer.find(".dialog-content");
+        addDialogClickEvent($dialogLink, $dialogContent);
+    };
+    $(window).load(function() {
+        var $dialogContainer = $(".dialog-container");
+        $dialogContainer.each(function() {
+            var $dialogContainer = $(this);
+            attachDialogToContainer($dialogContainer);
+        });
+    });
+
     // Provide infinite scroll if enabled
     var $infiniteContainer = $(".masonry-flex-container.infinite-scroll").infinitescroll({
         navSelector: "ul.pagination",
@@ -30,6 +52,10 @@ $(document).ready(function(){
         var $elements = $(elements);
         $elements.imagesLoaded(function() {
             $infiniteContainer.masonry("appended", $elements);
+            $elements.filter(".dialog-container").each(function() {
+                var $dialogContainer = $(this);
+                attachDialogToContainer($dialogContainer);
+            });
         });
     });