From a92964b37daf9ab595607e439e32a48c2fcde6a6 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Mon, 5 Nov 2018 00:19:50 +1300
Subject: [PATCH] Fix to overlay, non-image bottom padding, image onclick
 coverage.

---
 docs/asset/style.css    |  9 +++++----
 docs/logic/view/grid.js | 14 +++++++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/docs/asset/style.css b/docs/asset/style.css
index 57886aa..2006038 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -18,7 +18,7 @@
   --color-page-e: #333;               /*enabled*/
   --color-page-a: #666;               /*ascent*/
 
-  --alpha-darken: 0.2;
+  --alpha-darken: 0.3;
   --alpha-idleicon: 0.2;
   --alpha-idle: 0.4;
   --alpha-enabledicon: 0.4;
@@ -258,8 +258,7 @@ main:after {
 }
 
 /* GRID ITEM */
-article, .article-wide {
-  /*padding-bottom: var(--size-grid-gutter);*/
+.article, .article-wide {
 	border-radius: var(--size-item-corner);
   margin-bottom: var(--size-grid-gutter);
   background: var(--color-itembg);
@@ -267,6 +266,7 @@ article, .article-wide {
   text-decoration: none; 
   position: relative;
 	float: left;
+  /*padding-bottom: var(--size-grid-gutter);*/
 }
 @media screen and (min-width: 886px) {
 	.article-wide { 
@@ -286,7 +286,8 @@ article::selection {
   width: 100%;
 }
 .article-containerlower {
-  padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
+  padding: 0 var(--size-grid-gutter) var(--size-grid-gutter);
+  display: inline-block;
   z-index: 100;
 }
 .article-containerlower:empty {
diff --git a/docs/logic/view/grid.js b/docs/logic/view/grid.js
index 2b75471..0d467c8 100644
--- a/docs/logic/view/grid.js
+++ b/docs/logic/view/grid.js
@@ -86,18 +86,22 @@ function Grid()
 
     let onclickImage = ``;
     let articleIsImageType = (SETTINGS.SHOWIMAG && main.util.isType(value.TYPE, 'image'));
-
-    // ARTICLE
-    let article = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
-    
     if (articleIsImageType)
     {
       // itemClass += " article-image";
+      // itemClass = 'article-typeImg';
+      // if (SETTINGS.WIDEARTICLE && main.util.isDefined(value.WIDE) && value.WIDE)
+      // {
+      //   itemClass = 'article-typeImg-wide';
+      // }
       // article += `<div class='article-image'>`;
       onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');"
         style="cursor: pointer;"`;
     }
 
+    // ARTICLE
+    let article = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
+    
     if (main.util.isDefined(value.LINK))
     {
       var idUrl = "url";
@@ -187,7 +191,7 @@ function Grid()
       article += `<div class="article-imageType-imgContainer">`;
       if (SETTINGS.SHOWOVERLAY)
       {
-        article += `<div class="image-overlay"></div>`;
+        article += `<div class="image-overlay" ${onclickImage}></div>`;
       }
       article += `<img class="article-image-img" src="content/media/${value.FILE}">`;