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

Image progress messy.

Browse Source
This commit is contained in:
kor 2018-07-18 23:17:51 +12:00
parent 8ddf1852be
commit c77fe62eb4
2 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
asset/style.css vendored
View File

@ -165,32 +165,63 @@ body {
content: '';
clear: both;
}
/* GRID ITEM */
.grid-item, .grid-item--width2 {
border-radius: var(--size-item-corner);
background: var(--color-content-bg-i);
margin-bottom: var(--size-gutter);
width: var(--size-grid-column);
padding: var(--size-gutter);
box-sizing: border-box;
text-decoration: none;
float: left;
clear: both;
}
@media screen and (min-width: 886px) {
.grid-item--width2 {
width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
}
}
.grid-item-upper-content {
padding: var(--size-gutter) var(--size-gutter) var(--size-gutter) var(--size-gutter);
display: inline-block;
width: 100%;
}
.grid-item-image .grid-item-upper-content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.grid-item-lower-content {
padding: 0 var(--size-gutter) 0 var(--size-gutter);
height: 100%;
display: inline-block;
}
.grid-item-lower-content:empty {
display: none;
}
.grid-item-image .grid-item-lower-content {
visibility: hidden;
}
.grid-item-image {
background: transparent;
}
.grid-item img {
border-radius: var(--size-item-corner);
/*margin: calc(var(--size-gutter) * -1);
width: calc(100% + var(--size-gutter)*2);*/
max-width: 100%;
height: auto;
clear: both;
width: calc(var(--size-gutter) + 100%);*/
width: 100%;
}
.grid-item:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
background: var(--color-content-bg-e);
}
.grid-item-image:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
background: transparent;
}
/* LINK */
.grid-item .link {
@ -209,6 +240,12 @@ body {
float: left;
clear: both;
}
.grid-item-image .title {
display: none;
}
.grid-item-image:hover .title {
display: initial;
}
.grid-item .link .link-line {
margin-top: var(--size-item-elem-padding);
float: left;
@ -252,7 +289,6 @@ body {
/* LINK, NOTE, QUOTE, TERM, TAGS */
.note, .quote, .term, .tags, .prog {
padding-top: var(--size-item-elem-padding);
color: var(--color-content-item-i);
font-size: var(--size-font-body);
float: left;
@ -266,6 +302,9 @@ body {
.grid-item:hover .prog {
color: var(--color-content-item-e);
}
.grid-item-image .grid-item-lower-content {
display: none;
}
.tags a {
color: var(--color-content-item-i);
text-decoration:none;

51
logic/viewmasonry.js
View File

@ -33,19 +33,19 @@ function ViewMasonry()
});
console.log(3 + ' ' + this.msnry);
// var imgLoad = imagesLoaded('.grid');
// function onAlways( instance ) {
// console.log('all images are loaded');
// parent.msnry.reloadItems();
// parent.msnry.layout();
// }
// imgLoad.on( 'always', onAlways );
// // imgLoad.off( 'always', onAlways );
// imgLoad.on( 'progress', function(instance, image)
// {
// var result = image.isLoaded ? 'loaded' : 'broken';
// console.log( 'image is ' + result + ' for ' + image.img.src );
// });
var imgLoad = imagesLoaded('.grid');
function onAlways( instance ) {
console.log('all images are loaded');
parent.msnry.reloadItems();
parent.msnry.layout();
}
imgLoad.on( 'always', onAlways );
// imgLoad.off( 'always', onAlways );
imgLoad.on( 'progress', function(instance, image)
{
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
}
}
@ -85,6 +85,11 @@ function ViewMasonry()
}
}
if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
{
itemClass += " grid-item-image";
}
let entry = ``;
// DIV
entry += `<div class="${itemClass}" id="${this.divNamePre + value.DIID}">`;
@ -104,6 +109,9 @@ function ViewMasonry()
entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="link">`;
}
// UPPER CONTENT START
entry += `<div class="grid-item-upper-content">`;
// TITLE
entry += `<div class="title">${key.to_properCase()}</div>`;
@ -168,6 +176,17 @@ function ViewMasonry()
entry += `</a>`;
}
// UPPER CONTENT END
entry += `</div>`;
// LOWER CONTENT START
entry += `<div class="grid-item-lower-content">`;
// TAGS
if (typeof value.TAGS !== 'undefined')
{
@ -210,6 +229,12 @@ function ViewMasonry()
entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
}
// LOWER CONTENT END
entry += `</div>`;
// IMAGE
if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
{
if (typeof value.FILE !== 'undefined')