mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Fix to overlay, non-image bottom padding, image onclick coverage.
This commit is contained in:
parent
260e5f48dc
commit
a92964b37d
@ -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 {
|
||||||
|
@ -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}">`;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user