Fix to overlay, non-image bottom padding, image onclick coverage.

This commit is contained in:
kor 2018-11-05 00:19:50 +13:00
parent 260e5f48dc
commit a92964b37d
2 changed files with 14 additions and 9 deletions

View File

@ -18,7 +18,7 @@
--color-page-e: #333; /*enabled*/ --color-page-e: #333; /*enabled*/
--color-page-a: #666; /*ascent*/ --color-page-a: #666; /*ascent*/
--alpha-darken: 0.2; --alpha-darken: 0.3;
--alpha-idleicon: 0.2; --alpha-idleicon: 0.2;
--alpha-idle: 0.4; --alpha-idle: 0.4;
--alpha-enabledicon: 0.4; --alpha-enabledicon: 0.4;
@ -258,8 +258,7 @@ main:after {
} }
/* GRID ITEM */ /* GRID ITEM */
article, .article-wide { .article, .article-wide {
/*padding-bottom: var(--size-grid-gutter);*/
border-radius: var(--size-item-corner); border-radius: var(--size-item-corner);
margin-bottom: var(--size-grid-gutter); margin-bottom: var(--size-grid-gutter);
background: var(--color-itembg); background: var(--color-itembg);
@ -267,6 +266,7 @@ article, .article-wide {
text-decoration: none; text-decoration: none;
position: relative; position: relative;
float: left; float: left;
/*padding-bottom: var(--size-grid-gutter);*/
} }
@media screen and (min-width: 886px) { @media screen and (min-width: 886px) {
.article-wide { .article-wide {
@ -286,7 +286,8 @@ article::selection {
width: 100%; width: 100%;
} }
.article-containerlower { .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; z-index: 100;
} }
.article-containerlower:empty { .article-containerlower:empty {

View File

@ -86,18 +86,22 @@ function Grid()
let onclickImage = ``; let onclickImage = ``;
let articleIsImageType = (SETTINGS.SHOWIMAG && main.util.isType(value.TYPE, 'image')); let articleIsImageType = (SETTINGS.SHOWIMAG && main.util.isType(value.TYPE, 'image'));
// ARTICLE
let article = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
if (articleIsImageType) if (articleIsImageType)
{ {
// itemClass += " article-image"; // 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'>`; // article += `<div class='article-image'>`;
onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');" onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');"
style="cursor: pointer;"`; style="cursor: pointer;"`;
} }
// ARTICLE
let article = `<article class="${itemClass}" id="${SETTINGS.ARTICLEIDBASE + value.DIID}">`;
if (main.util.isDefined(value.LINK)) if (main.util.isDefined(value.LINK))
{ {
var idUrl = "url"; var idUrl = "url";
@ -187,7 +191,7 @@ function Grid()
article += `<div class="article-imageType-imgContainer">`; article += `<div class="article-imageType-imgContainer">`;
if (SETTINGS.SHOWOVERLAY) 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}">`; article += `<img class="article-image-img" src="content/media/${value.FILE}">`;