tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kor 2018-11-04 23:32:24 +13:00
parent cc62d60a1d
commit 21fe2099a6
2 changed files with 114 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/asset/style.css
View File

@ -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 {

89
docs/logic/view/grid.js
View File

@ -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,6 +273,8 @@ function Grid()
article += this.doRowArray('project', value.PROJ, 'proj', true);
}
if (!articleIsImageType)
{
// TERM
if (SETTINGS.SHOWTERM && main.util.isDefined(value.TERM))
{
@ -232,7 +296,8 @@ function Grid()
// PROGRESS
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;
}