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

Fix broken image css.

Browse Source
This commit is contained in:
kor 2018-09-16 00:25:32 +12:00
parent 0bd52d8709
commit 5a8c8989dd
2 changed files with 56 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
docs/asset/style.css
View File

@ -213,31 +213,54 @@ body {
.grid-itemlower:empty { .grid-itemlower:empty {
display: none; display: none;
} }
.grid-item-image { .grid-itemimage {
background: transparent; background: transparent;
padding-bottom: 0; padding-bottom: 0;
overflow: hidden; overflow: hidden;
} }
.grid-item-image .grid-itemupper { .grid-itemimage .grid-itemupper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
left: 0; left: 0;
z-index: 300;
top: 0; top: 0;
} }
.grid-item-image .grid-itemlower { .grid-itemimage .grid-itemlower {
padding-bottom: var(--size-grid-gutter); padding-bottom: var(--size-grid-gutter);
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
z-index: 300;
left: 0; left: 0;
} }
.grid-item-imageimg { /*.grid-itemimageimg {*/
/*border-radius: var(--size-item-corner);*/
/*vertical-align: middle; vertical-align css hack removes bottom padding */
/*max-height: 1000px;*/
/*margin-bottom: 0px;*/
/*object-fit: cover;*/
/*width: 100%;*/
/*z-index: 0;*/
/*z-index: -10;*/
/*}*/
.grid-item .image {
border-radius: var(--size-item-corner); border-radius: var(--size-item-corner);
vertical-align: middle; /* vertical-align css hack removes bottom padding */ vertical-align: middle; /* vertical-align css hack removes bottom padding */
max-height: 1000px;
margin-bottom: 0px;
object-fit: cover; object-fit: cover;
margin-bottom: 0px;
width: 100%;
max-height: 1000px;
position: relative;
z-index: 100;
top: 0;
left: 0;
}
.grid-item img {
/*border-radius: var(--size-item-corner);*/
vertical-align: middle; /* vertical-align css hack removes bottom padding */
object-fit: cover;
height: 100%;
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
@ -246,10 +269,12 @@ body {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 10; z-index: 150;
opacity: 0; opacity: 0;
/*display: none;*/
/*opacity: 0.6;*/
} }
.grid-item-image:hover .image-overlay { .grid-itemimage:hover .image-overlay {
opacity: var(--alpha-darken); opacity: var(--alpha-darken);
} }
@ -267,10 +292,10 @@ body {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
.grid-item-image .grid-itemlink { .grid-itemimage .grid-itemlink {
display: none; display: none;
} }
.grid-item-image:hover .grid-itemlink { .grid-itemimage:hover .grid-itemlink {
display: initial; display: initial;
text-shadow: 0 0 3em #000; text-shadow: 0 0 3em #000;
} }
@ -285,10 +310,10 @@ body {
.grid-item:hover .title { .grid-item:hover .title {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
.grid-item-image .title { .grid-itemimage .title {
display: none; display: none;
} }
.grid-item-image:hover .title { .grid-itemimage:hover .title {
display: initial; display: initial;
text-shadow: 0 0 3em #000; text-shadow: 0 0 3em #000;
color: white; color: white;
@ -299,8 +324,10 @@ body {
clear: both; clear: both;
} }
.grid-itemlinkicon { .grid-itemlinkicon {
float: left; margin-right: var(--size-item-elem-sep);
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
color: var(--color-item);
float: left;
} }
.grid-itemlink .link-title { .grid-itemlink .link-title {
color: var(--color-item); color: var(--color-item);
@ -331,15 +358,15 @@ body {
right: 0px; right: 0px;
top: 0px; top: 0px;
} }
.grid-item-image .grid-itemupper a .type i { .grid-itemimage .grid-itemupper a .type i {
display: none; display: none;
} }
.grid-item-image:hover .grid-itemupper a .type i { .grid-itemimage:hover .grid-itemupper a .type i {
display: initial; display: initial;
color: var(--color-image); color: var(--color-image);
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
} }
.grid-item-image:hover .grid-itemupper a:hover .type i { .grid-itemimage:hover .grid-itemupper a:hover .type i {
display: initial; display: initial;
color: var(--color-image); color: var(--color-image);
} }
@ -393,20 +420,20 @@ body {
/*.grid-item:hover .tags:hover { /*.grid-item:hover .tags:hover {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
}*/ }*/
.grid-item-image .grid-itemlower .link, .grid-itemimage .grid-itemlower .link,
.grid-item-image .grid-itemlower .note, .grid-itemimage .grid-itemlower .note,
.grid-item-image .grid-itemlower .quote, .grid-itemimage .grid-itemlower .quote,
.grid-item-image .grid-itemlower .term, .grid-itemimage .grid-itemlower .term,
.grid-item-image .grid-itemlower .tags, .grid-itemimage .grid-itemlower .tags,
.grid-item-image .grid-itemlower .auth, .grid-itemimage .grid-itemlower .auth,
.grid-item-image .grid-itemlower .prog { .grid-itemimage .grid-itemlower .prog {
color: var(--color-image); color: var(--color-image);
} }
.grid-item-image .grid-itemlower { .grid-itemimage .grid-itemlower {
display: none; display: none;
} }
.grid-item-image:hover .grid-itemlower { .grid-itemimage:hover .grid-itemlower {
display: initial; display: initial;
} }
.tags a { .tags a {
@ -420,17 +447,16 @@ body {
background-color: var(--color-itemascent); background-color: var(--color-itemascent);
color: var(--color-itembg); color: var(--color-itembg);
} }
.grid-item-image:hover .tags a { .grid-itemimage:hover .tags a {
color: #fff; color: #fff;
} }
.grid-item-image:hover .tags a:hover { .grid-itemimage:hover .tags a:hover {
color: #fff; color: #fff;
} }
/* SMALL ICONS */ /* SMALL ICONS */
.textIcon { .textIcon {
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
color: var(--color-item);
} }
.grid-item:hover .textIcon { .grid-item:hover .textIcon {
color: var(--color-item); color: var(--color-item);

4
docs/logic/view.js
View File

@ -147,7 +147,7 @@ function View()
{ {
if (typeof value.LINK !== 'undefined') if (typeof value.LINK !== 'undefined')
{ {
entry += `<div class="link-line"><i class="grid-itemlinkicon fas fa-link textIcon"></i><div class="link-title">${this.extractRootDomain(value.LINK)}</div></div></a>`; entry += `<div class="link-line"><i class="grid-itemlinkicon fas fa-link"></i><div class="link-title">${this.extractRootDomain(value.LINK)}</div></div></a>`;
} }
} }
@ -305,7 +305,7 @@ function View()
{ {
entry += `<div class="image-overlay"></div>`; entry += `<div class="image-overlay"></div>`;
} }
entry += `<grid-item-imageimg src="content/media/${value.FILE}">`; entry += `<img src="content/media/${value.FILE}">`;
entry += `</div>`; entry += `</div>`;
} }
} }