Change for image type articles to display notes, quotes, progress and terms underneath image.

docs/asset/style.css

@@ -34,7 +34,7 @@
   --size-grid-gutter: 20px;
   --size-grid-column: 350px;
 
-  --size-item-corner: 3px;
+  --size-item-corner: 10px;
   --size-item-elem-padding: 1em;      /*vertical space between grid item internal elements (tags, notes, quotes etc)*/
   --size-item-elem-sep: 0.75em;       /*horizontal space between item element icon and element text (tag icon and tags)*/
 
@@ -259,7 +259,7 @@ main:after {
 
 /* GRID ITEM */
 article, .article-wide {
-  padding-bottom: var(--size-grid-gutter);
+  /*padding-bottom: var(--size-grid-gutter);*/
 	border-radius: var(--size-item-corner);
   margin-bottom: var(--size-grid-gutter);
   background: var(--color-itembg);
@@ -294,16 +294,25 @@ article::selection {
 }
 
 /*IMAGE*/
+.article-imageType-imgContainer {
+  z-index: 200;
+  position: relative;
+  /*display: none;*/
+}
 .article-containerupper-image {
   padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
-  display: inline-block;
+  /*display: inline-block;*/
+  display: none;
   position: absolute;
-  height: 100%;
+  /*height: 100%;*/
   width: 100%;
   left: 0;
-  z-index: 200;
+  z-index: 300;
   top: 0;
 }
+article:hover .article-containerupper-image {
+  display: inline-block;
+}
 .article-containerlower-image {
   padding: var(--size-grid-gutter);
   position: absolute;
@@ -315,7 +324,20 @@ article::selection {
 .article-containerlower-image:empty {
   display: none;
 }
+article:hover .article-containerlower-image {
+  display: inline-block;
+}
+.article-containerbelow {
+  display: table;
+  padding-left: var(--size-grid-gutter);
+  padding-right: var(--size-grid-gutter);
+  padding-top: calc(var(--size-grid-gutter)/2);
+  padding-bottom: var(--size-grid-gutter);
+}
+
 .article-image {
+  position: absolute;
+  top: 0;
   background: transparent;
   padding-bottom: 0;
   overflow: hidden;
@@ -348,7 +370,7 @@ article::selection {
   z-index: 150;
   opacity: 0;
 }
-.article-image:hover .image-overlay { 
+.article:hover .image-overlay { 
   opacity: var(--alpha-darken);
 }
 .article-image .article-link {

docs/logic/view/grid.js

@@ -86,15 +86,18 @@ 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-image";
+      // 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";
@@ -174,6 +177,65 @@ function Grid()
       article += `</div>`;
     }
 
+    // IMAGE - for image-type-article
+    if (articleIsImageType
+        && main.util.isDefined(value.FILE)
+        && main.util.isImage(value.FILE))
+    {
+      // IMAGE ARTICLE
+
+      article += `<div class="article-imageType-imgContainer">`;
+      if (SETTINGS.SHOWOVERLAY)
+      {
+        article += `<div class="image-overlay"></div>`;
+      }
+      article += `<img class="article-image-img" src="content/media/${value.FILE}">`;
+      
+      article += this.doLower(value, articleIsImageType, onclickImage);
+
+      article += `</div>`;
+
+      article += `<div class="article-containerbelow">`;
+        // TERM
+        if (SETTINGS.SHOWTERM && main.util.isDefined(value.TERM))
+        {
+          article += this.doRowMulti('term', value.TERM);
+        }
+
+        // NOTE
+        if (SETTINGS.SHOWNOTE && main.util.isDefined(value.NOTE))
+        {
+          article += this.doRowMulti('note', value.NOTE);
+        }
+
+        // QUOTE
+        if (SETTINGS.SHOWQOTE && main.util.isDefined(value.QOTE))
+        {
+          article += this.doRowMulti('quote', value.QOTE);
+        }
+
+        // PROGRESS
+        if (SETTINGS.SHOWPROG && main.util.isDefined(value.PROG))
+        {
+          article += this.doRowMulti('progress', value.PROG);
+        }
+      article += `</div>`;
+
+      // article += `</div>`;
+    }
+    else 
+    {
+      // NORMAL ARTICLE (NON-IMAGE)
+      article += this.doLower(value, articleIsImageType, onclickImage);
+    }
+
+    article += `</article>`;
+    return article;
+  }
+
+  this.doLower = function(value, articleIsImageType, onclickImage)
+  {
+    let article = '';
     // LOWER CONTENT START
     if (SETTINGS.SHOWLOWER)
     {
@@ -211,28 +273,31 @@ function Grid()
         article += this.doRowArray('project', value.PROJ, 'proj', true);
       }
 
-      // TERM
+      if (!articleIsImageType)
-      if (SETTINGS.SHOWTERM && main.util.isDefined(value.TERM))
       {
-        article += this.doRowMulti('term', value.TERM);
+        // TERM
-      }
+        if (SETTINGS.SHOWTERM && main.util.isDefined(value.TERM))
+        {
+          article += this.doRowMulti('term', value.TERM);
+        }
 
-      // NOTE
+        // NOTE
-      if (SETTINGS.SHOWNOTE && main.util.isDefined(value.NOTE))
+        if (SETTINGS.SHOWNOTE && main.util.isDefined(value.NOTE))
-      {
+        {
-        article += this.doRowMulti('note', value.NOTE);
+          article += this.doRowMulti('note', value.NOTE);
-      }
+        }
 
-      // QUOTE
+        // QUOTE
-      if (SETTINGS.SHOWQOTE && main.util.isDefined(value.QOTE))
+        if (SETTINGS.SHOWQOTE && main.util.isDefined(value.QOTE))
-      {
+        {
-        article += this.doRowMulti('quote', value.QOTE);
+          article += this.doRowMulti('quote', value.QOTE);
-      }
+        }
 
-      // PROGRESS
+        // PROGRESS
-      if (SETTINGS.SHOWPROG && main.util.isDefined(value.PROG))
+        if (SETTINGS.SHOWPROG && main.util.isDefined(value.PROG))
-      {
+        {
-        article += this.doRow('progress', value.PROG);
+          article += this.doRowMulti('progress', value.PROG);
+        }
       }
       
       // IMAGE - for non-image-type-article
@@ -266,22 +331,6 @@ function Grid()
       // LOWER CONTENT END
       article += `</div>`;
     }
-
-    // IMAGE - for image-type-article
-    if (articleIsImageType
-        && main.util.isDefined(value.FILE)
-        && main.util.isImage(value.FILE))
-    {
-      article += `<div class="image">`;
-      if (SETTINGS.SHOWOVERLAY)
-      {
-        article += `<div class="image-overlay"></div>`;
-      }
-      article += `<img class="article-image-img" src="content/media/${value.FILE}">`;
-      article += `</div>`;
-    }
-
-    article += `</article>`;
     return article;
   }