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

Add css refactor progress.

Browse Source
This commit is contained in:
kor 2018-09-16 01:37:29 +12:00
parent 5a8c8989dd
commit 3adec77d3c
2 changed files with 104 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
docs/asset/style.css
View File

@ -63,6 +63,8 @@ body {
padding: 0em; padding: 0em;
margin: 0; margin: 0;
} }
/*MENU*/
.menu { .menu {
padding-top: var(--size-grid-gutter); padding-top: var(--size-grid-gutter);
background: var(--color-bg); background: var(--color-bg);
@ -177,7 +179,9 @@ body {
content: ''; content: '';
clear: both; clear: both;
} }
.grid-item, .grid-itemwide {
/*GRID ITEM*/
.griditem, .griditem-wide {
padding-bottom: var(--size-grid-gutter); 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);
@ -187,38 +191,35 @@ body {
position: relative; position: relative;
float: left; float: left;
} }
.grid-item:hover, .grid-itemwide:hover { .griditem:hover, .griditem-wide:hover {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
@media screen and (min-width: 886px) { @media screen and (min-width: 886px) {
.grid-itemwide { .griditem-wide {
width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter)); width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
} }
} }
.griditem:hover {
.grid-item:hover {
background: var(--color-itembg); background: var(--color-itembg);
opacity: 1; opacity: 1;
} }
.grid-itemupper { .griditem-containerupper {
padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter); padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
display: inline-block; display: inline-block;
z-index: 100; z-index: 100;
width: 100%; width: 100%;
} }
.grid-itemlower {
.griditem-containerlower {
padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter); padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
z-index: 100; z-index: 100;
} }
.grid-itemlower:empty { .griditem-containerlower:empty {
display: none; display: none;
} }
.grid-itemimage {
background: transparent; /*IMAGE*/
padding-bottom: 0; .griditem-image .griditem-containerupper {
overflow: hidden;
}
.grid-itemimage .grid-itemupper {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -226,7 +227,7 @@ body {
z-index: 300; z-index: 300;
top: 0; top: 0;
} }
.grid-itemimage .grid-itemlower { .griditem-image .griditem-containerlower {
padding-bottom: var(--size-grid-gutter); padding-bottom: var(--size-grid-gutter);
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -234,18 +235,12 @@ body {
z-index: 300; z-index: 300;
left: 0; left: 0;
} }
/*.grid-itemimageimg {*/ .griditem-image {
/*border-radius: var(--size-item-corner);*/ background: transparent;
/*vertical-align: middle; vertical-align css hack removes bottom padding */ padding-bottom: 0;
/*max-height: 1000px;*/ overflow: hidden;
/*margin-bottom: 0px;*/ }
/*object-fit: cover;*/ .griditem-image-img {
/*width: 100%;*/
/*z-index: 0;*/
/*z-index: -10;*/
/*}*/
.grid-item .image {
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 */
object-fit: cover; object-fit: cover;
margin-bottom: 0px; margin-bottom: 0px;
@ -256,14 +251,6 @@ body {
top: 0; top: 0;
left: 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%;
z-index: 0;
}
.image-overlay { .image-overlay {
background-color: var(--color-imagedarken); background-color: var(--color-imagedarken);
position: absolute; position: absolute;
@ -271,35 +258,20 @@ body {
width: 100%; width: 100%;
z-index: 150; z-index: 150;
opacity: 0; opacity: 0;
/*display: none;*/
/*opacity: 0.6;*/
} }
.grid-itemimage:hover .image-overlay { .griditem-image:hover .image-overlay {
opacity: var(--alpha-darken); opacity: var(--alpha-darken);
} }
.griditem-image .griditem-link {
/*TODO: refactor below; */
/* LINK */
.grid-itemlink {
width: calc(100% - var(--size-font-bodytypes)*2);
float: left;
clear: both;
text-decoration: none;
display: inline-block;
}
.grid-itemimage .grid-itemlink {
display: none; display: none;
} }
.grid-itemimage:hover .grid-itemlink { .griditem-image:hover .griditem-link {
display: initial; display: initial;
text-shadow: 0 0 3em #000; text-shadow: 0 0 3em #000;
} }
.grid-item .title {
/*TITLE*/
.griditem-title {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
color: var(--color-item); color: var(--color-item);
font-size: var(--size-font-title); font-size: var(--size-font-title);
@ -307,45 +279,49 @@ body {
float: left; float: left;
clear: both; clear: both;
} }
.grid-item:hover .title { .griditem:hover .griditem-title {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
.grid-itemimage .title { .griditem-image .griditem-title {
display: none; display: none;
} }
.grid-itemimage:hover .title { .griditem-image:hover .griditem-title {
display: initial; display: initial;
text-shadow: 0 0 3em #000; text-shadow: 0 0 3em #000;
color: white; color: white;
} }
.grid-itemlink .link-line {
/*LINK*/
.griditem-linkcontainer {
margin-top: var(--size-item-elem-padding); margin-top: var(--size-item-elem-padding);
float: left; float: left;
clear: both; clear: both;
} }
.grid-itemlinkicon { .griditem-link {
width: calc(100% - var(--size-font-bodytypes) * 2);
float: left;
clear: both;
text-decoration: none;
display: inline-block;
}
.griditem-linkicon {
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
color: var(--color-item); color: var(--color-item);
float: left; float: left;
} }
.grid-itemlink .link-title { .griditem-link .griditem-linktitle {
color: var(--color-item); color: var(--color-item);
font-size: var(--size-font-body); font-size: var(--size-font-body);
float: left; float: left;
} }
.grid-itemlink:hover .link-title { .griditem-link:hover .griditem-linktitle {
background-color: var(--color-itemascent); background-color: var(--color-itemascent);
color: var(--color-itembg); color: var(--color-itembg);
} }
/* TYPE */ /* TYPE */
.grid-item .type { .griditem-type {
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
width: calc(var(--size-font-bodytypes)*2 + var(--size-grid-gutter)); width: calc(var(--size-font-bodytypes)*2 + var(--size-grid-gutter));
color: var(--color-item); color: var(--color-item);
@ -358,47 +334,57 @@ body {
right: 0px; right: 0px;
top: 0px; top: 0px;
} }
.grid-itemimage .grid-itemupper a .type i { .griditem-image .griditem-type i {
display: none; display: none;
} }
.grid-itemimage:hover .grid-itemupper a .type i { .griditem-image:hover .griditem-type i {
display: initial; display: initial;
color: var(--color-image); color: var(--color-image);
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
} }
.grid-itemimage:hover .grid-itemupper a:hover .type i { .griditem:hover .griditem-type {
display: initial;
color: var(--color-image);
}
.grid-item:hover .type {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
color: var(--color-item); color: var(--color-item);
} }
.grid-item:hover .type:hover { .griditem:hover .griditem-type:hover {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
color: var(--color-itemascent); color: var(--color-itemascent);
} }
.grid-item .link-title { /*LINK*/
.griditem-linktitle {
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
} }
.grid-item .fas { .griditem-linkicon {
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
} }
.grid-item:hover .link-title { .griditem:hover .griditem-linktitle {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
} }
.grid-item:hover a:hover .link-title { .griditem:hover a:hover .griditem-linktitle {
opacity: var(--alpha-ascent); opacity: var(--alpha-ascent);
} }
/*.grid-item:hover a:hover .fas { .griditem:hover .griditem-linkicon {
opacity: var(--alpha-ascent);
}*/
.grid-item:hover .fas {
opacity: var(--alpha-enabled); opacity: var(--alpha-enabled);
} }
/*TODO: refactor below; */
/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */ /* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
.note, .quote, .term, .tags, .auth, .prog { .note, .quote, .term, .tags, .auth, .prog {
opacity: var(--alpha-idle); opacity: var(--alpha-idle);
@ -408,49 +394,46 @@ body {
float: left; float: left;
clear: both; clear: both;
} }
.grid-item:hover .note, .griditem:hover .note,
.grid-item:hover .quote, .griditem:hover .quote,
.grid-item:hover .term, .griditem:hover .term,
.grid-item:hover .tags, .griditem:hover .tags,
.grid-item:hover .auth, .griditem:hover .auth,
.grid-item:hover .prog { .griditem:hover .prog {
opacity: var(--alpha-enabled); opacity:; var(--alpha-enabled);
color: var(--color-item); color: var(--color-item);
} }
/*.grid-item:hover .tags:hover { .griditem-image .griditem-containerlower .link,
opacity: var(--alpha-ascent); .griditem-image .griditem-containerlower .note,
}*/ .griditem-image .griditem-containerlower .quote,
.grid-itemimage .grid-itemlower .link, .griditem-image .griditem-containerlower .term,
.grid-itemimage .grid-itemlower .note, .griditem-image .griditem-containerlower .tags,
.grid-itemimage .grid-itemlower .quote, .griditem-image .griditem-containerlower .auth,
.grid-itemimage .grid-itemlower .term, .griditem-image .griditem-containerlower .prog {
.grid-itemimage .grid-itemlower .tags,
.grid-itemimage .grid-itemlower .auth,
.grid-itemimage .grid-itemlower .prog {
color: var(--color-image); color: var(--color-image);
} }
.grid-itemimage .grid-itemlower { .griditem-image .griditem-containerlower {
display: none; display: none;
} }
.grid-itemimage:hover .grid-itemlower { .griditem-image:hover .griditem-containerlower {
display: initial; display: initial;
} }
.tags a { .tags a {
color: var(--color-item); color: var(--color-item);
text-decoration:none; text-decoration:none;
} }
.grid-item:hover .tags a { .griditem:hover .tags a {
color: var(--color-item); color: var(--color-item);
} }
.grid-item:hover .tags a:hover { .griditem:hover .tags a:hover {
background-color: var(--color-itemascent); background-color: var(--color-itemascent);
color: var(--color-itembg); color: var(--color-itembg);
} }
.grid-itemimage:hover .tags a { .griditem-image:hover .tags a {
color: #fff; color: #fff;
} }
.grid-itemimage:hover .tags a:hover { .griditem-image:hover .tags a:hover {
color: #fff; color: #fff;
} }
@ -458,7 +441,7 @@ body {
.textIcon { .textIcon {
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
} }
.grid-item:hover .textIcon { .griditem:hover .textIcon {
color: var(--color-item); color: var(--color-item);
} }

25
docs/logic/view.js
View File

@ -39,7 +39,7 @@ function View()
{ {
this.msnry = new Masonry('.grid', this.msnry = new Masonry('.grid',
{ {
itemSelector: '.grid-item', itemSelector: '.griditem',
columnWidth: 350, columnWidth: 350,
gutter: 20, gutter: 20,
fitWidth: true, fitWidth: true,
@ -59,7 +59,6 @@ function View()
// BUILD // BUILD
this.grid.innerHTML = ''; this.grid.innerHTML = '';
this.grid.innerHTML += "<div class='grid-sizer'></div>";
var dbKeys = Object.keys(db); var dbKeys = Object.keys(db);
var i = 0; var i = 0;
while (i < dbKeys.length) while (i < dbKeys.length)
@ -84,18 +83,18 @@ function View()
{ {
let value = db[key]; let value = db[key];
let itemClass = "grid-item"; let itemClass = "griditem";
if (SETTINGS.WIDEGRIDITEM) if (SETTINGS.WIDEGRIDITEM)
{ {
if (typeof value.WIDE !== 'undefined' && value.WIDE) if (typeof value.WIDE !== 'undefined' && value.WIDE)
{ {
itemClass += " grid-itemwide"; itemClass += " griditem-wide";
} }
else if (typeof value.QOTE !== 'undefined') else if (typeof value.QOTE !== 'undefined')
{ {
if (Array.isArray(value.QOTE) && value.QOTE.length > 4) if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
{ {
itemClass += " grid-itemwide"; itemClass += " griditem-wide";
} }
} }
} }
@ -104,7 +103,7 @@ function View()
{ {
if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image') if (typeof value.TYPE !== 'undefined' && value.TYPE == 'image')
{ {
itemClass += " grid-itemimage"; itemClass += " griditem-image";
} }
} }
@ -127,19 +126,19 @@ function View()
// LINK START // LINK START
if (SETTINGS.SHOWLINK) if (SETTINGS.SHOWLINK)
{ {
entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="grid-itemlink">`; entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="griditem-link">`;
} }
} }
// UPPER CONTENT START // UPPER CONTENT START
if (SETTINGS.SHOWUPPER) if (SETTINGS.SHOWUPPER)
{ {
entry += `<div class="grid-itemupper">`; entry += `<div class="griditem-containerupper">`;
// TITLE // TITLE
if (SETTINGS.SHOWTITLE) if (SETTINGS.SHOWTITLE)
{ {
entry += `<div class="title">${key.to_properCase()}</div>`; entry += `<div class="griditem-title">${key.to_properCase()}</div>`;
} }
// LINK END // LINK END
@ -147,7 +146,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"></i><div class="link-title">${this.extractRootDomain(value.LINK)}</div></div></a>`; entry += `<div class="griditem-linkcontainer"><i class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
} }
} }
@ -157,7 +156,7 @@ function View()
if (typeof value.TYPE !== 'undefined') if (typeof value.TYPE !== 'undefined')
{ {
entry += `<a href='#type-${String(value.TYPE)}'>`; entry += `<a href='#type-${String(value.TYPE)}'>`;
entry += `<div class="type">`; entry += `<div class="griditem-type">`;
if (value.TYPE == 'article') if (value.TYPE == 'article')
{ {
@ -224,7 +223,7 @@ function View()
// LOWER CONTENT START // LOWER CONTENT START
if (SETTINGS.SHOWLOWER) if (SETTINGS.SHOWLOWER)
{ {
entry += `<div class="grid-itemlower">`; entry += `<div class="griditem-containerlower">`;
// AUTHOR // AUTHOR
if (SETTINGS.SHOWAUTH) if (SETTINGS.SHOWAUTH)
@ -305,7 +304,7 @@ function View()
{ {
entry += `<div class="image-overlay"></div>`; entry += `<div class="image-overlay"></div>`;
} }
entry += `<img src="content/media/${value.FILE}">`; entry += `<img class="griditem-image-img" src="content/media/${value.FILE}">`;
entry += `</div>`; entry += `</div>`;
} }
} }