mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-11-22 04:54:23 +00:00
Refactor row definitions.
This commit is contained in:
kor
parent
e8855ff976
commit
bd830ddc0c
@ -121,8 +121,6 @@ body {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/*width: 154px;
|
||||
height: 154px;*/
|
||||
font-size: 128px;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
display: none;
|
||||
@ -243,6 +241,7 @@ nav::-webkit-scrollbar {
|
||||
color: var(--color-itemascent);
|
||||
}
|
||||
|
||||
/* MAIN */
|
||||
.container {
|
||||
background: var(--background);
|
||||
margin-left: calc(var(--size-menu) + var(--size-grid-gutter));
|
||||
@ -250,8 +249,6 @@ nav::-webkit-scrollbar {
|
||||
}
|
||||
main {
|
||||
margin: var(--size-grid-gutter) auto;
|
||||
-webkit-transition: opacity 1000ms linear;
|
||||
transition: opacity 1000ms linear;
|
||||
}
|
||||
main:after {
|
||||
/* clearfix (reset) */
|
||||
@ -271,9 +268,6 @@ article, .griditem-wide {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
article:hover, .griditem-wide:hover {
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
@media screen and (min-width: 886px) {
|
||||
.griditem-wide {
|
||||
width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
|
||||
@ -281,7 +275,6 @@ article:hover, .griditem-wide:hover {
|
||||
}
|
||||
article:hover {
|
||||
background: var(--color-itembg);
|
||||
opacity: 1;
|
||||
}
|
||||
article::selection {
|
||||
background: var(--b_high);
|
||||
@ -368,7 +361,6 @@ article::selection {
|
||||
|
||||
/* TITLE */
|
||||
.griditem-title {
|
||||
opacity: var(--alpha-enabled);
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-title);
|
||||
text-decoration: none;
|
||||
@ -399,7 +391,7 @@ article::selection {
|
||||
}
|
||||
|
||||
.griditem-linktitle {
|
||||
/*opacity: var(--alpha-idle);*/
|
||||
opacity: var(--alpha-idle);
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-body);
|
||||
float: left;
|
||||
@ -408,27 +400,18 @@ article::selection {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-itembg);
|
||||
}
|
||||
.griditem-linktitle {
|
||||
opacity: var(--alpha-idle);
|
||||
}
|
||||
.griditem-linkicon {
|
||||
margin-right: var(--size-item-elem-sep);
|
||||
width: 23px;
|
||||
font-size: 15px;
|
||||
color: var(--color-item);
|
||||
opacity: calc(var(--alpha-idleicon) - 0.1);
|
||||
float: left;
|
||||
}
|
||||
.griditem-linktitle {
|
||||
opacity: var(--alpha-idle);
|
||||
}
|
||||
.griditem-link:hover .griditem-linktitle {
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
article:hover .griditem-linkicon {
|
||||
opacity: var(--alpha-enabledicon);
|
||||
}
|
||||
article:hover .griditem-linktitle {
|
||||
opacity: var(--alpha-enabled);
|
||||
}
|
||||
.griditem-link:hover .griditem-linktitle {
|
||||
opacity: var(--alpha-ascent);
|
||||
}
|
||||
|
||||
/* TYPE */
|
||||
.griditem-typecontainer {
|
||||
@ -438,7 +421,6 @@ article:hover .griditem-linktitle {
|
||||
margin-right: var(--size-grid-gutter);
|
||||
}
|
||||
.griditem-type {
|
||||
opacity: var(--alpha-idle);
|
||||
width: calc(var(--size-font-bodytypes)*2);
|
||||
color: var(--color-item);
|
||||
padding-bottom: var(--size-grid-gutter);
|
||||
@ -449,23 +431,18 @@ article:hover .griditem-linktitle {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.griditem-typeicon {
|
||||
opacity: var(--alpha-idleicon);
|
||||
}
|
||||
.griditem-image .griditem-typeicon {
|
||||
display: none;
|
||||
}
|
||||
.griditem-image:hover .griditem-typeicon {
|
||||
display: initial;
|
||||
color: var(--color-image);
|
||||
opacity: var(--alpha-enabledicon);
|
||||
}
|
||||
.griditem-type .griditem-typeicon {
|
||||
.griditem-typeicon {
|
||||
opacity: var(--alpha-idleicon);
|
||||
color: var(--color-item);
|
||||
}
|
||||
article:hover .griditem-type {
|
||||
opacity: var(--alpha-enabled);
|
||||
article:hover .griditem-typeicon {
|
||||
opacity: var(--alpha-enabledicon);
|
||||
color: var(--color-item);
|
||||
}
|
||||
.griditem-type:hover .griditem-typeicon {
|
||||
@ -473,57 +450,41 @@ article:hover .griditem-type {
|
||||
color: var(--color-itemascent);
|
||||
}
|
||||
|
||||
/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
|
||||
.griditem-date,
|
||||
.griditem-note,
|
||||
.griditem-quote,
|
||||
.griditem-term,
|
||||
.griditem-tags,
|
||||
.griditem-proj,
|
||||
.griditem-auth,
|
||||
.griditem-file,
|
||||
.griditem-prog {
|
||||
opacity: var(--alpha-idle);
|
||||
/* DATE, NOTE, QUOTE, TERM, TAGS, AUTH, PROG etc */
|
||||
.article-icon {
|
||||
float: left;
|
||||
opacity: var(--alpha-idleicon);
|
||||
}
|
||||
article:hover .article-icon {
|
||||
opacity: var(--alpha-enabledicon);
|
||||
}
|
||||
.griditem-row {
|
||||
padding-top: var(--size-item-elem-padding);
|
||||
color: var(--color-item);
|
||||
font-size: var(--size-font-body);
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
article:hover .griditem-date,
|
||||
article:hover .griditem-note,
|
||||
article:hover .griditem-quote,
|
||||
article:hover .griditem-term,
|
||||
article:hover .griditem-tags,
|
||||
article:hover .griditem-proj,
|
||||
article:hover .griditem-auth,
|
||||
article:hover .griditem-file,
|
||||
article:hover .griditem-prog {
|
||||
opacity: var(--alpha-enabled);
|
||||
article:hover .griditem-row {
|
||||
color: var(--color-item);
|
||||
}
|
||||
.griditem-image .griditem-link,
|
||||
.griditem-image .griditem-date,
|
||||
.griditem-image .griditem-note,
|
||||
.griditem-image .griditem-quote,
|
||||
.griditem-image .griditem-term,
|
||||
.griditem-image .griditem-tags,
|
||||
.griditem-image .griditem-proj,
|
||||
.griditem-image .griditem-auth,
|
||||
.griditem-image .griditem-file,
|
||||
.griditem-image .griditem-prog {
|
||||
.griditem-image .griditem-row {
|
||||
color: var(--color-image);
|
||||
}
|
||||
|
||||
.griditem-rowtext {
|
||||
display: inline;
|
||||
opacity: var(--alpha-idle);
|
||||
}
|
||||
article:hover .griditem-rowtext {
|
||||
opacity: var(--alpha-enabled);
|
||||
}
|
||||
.griditem-file {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.griditem-file-link {
|
||||
color: var(--color-item);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.griditem-file-link:hover {
|
||||
background-color: var(--color-itemascent);
|
||||
color: var(--color-itembg);
|
||||
@ -557,12 +518,11 @@ article:hover .griditem-taglink:hover {
|
||||
|
||||
/* SMALL ICONS */
|
||||
.textIcon {
|
||||
color: #fff;
|
||||
margin-right: var(--size-item-elem-sep);
|
||||
opacity: var(--alpha-idleicon);
|
||||
}
|
||||
article:hover .textIcon {
|
||||
color: var(--color-item);
|
||||
opacity: var(--alpha-enabledicon);
|
||||
}
|
||||
|
||||
/* LIGHTBOX */
|
||||
|
||||
@ -41,7 +41,7 @@ function View()
|
||||
let contentHtml = '';
|
||||
while (i < dbKeys.length)
|
||||
{
|
||||
contentHtml += this.buildEntry(db, dbKeys[i]);
|
||||
contentHtml += this.buildArticle(db, dbKeys[i]);
|
||||
i++;
|
||||
}
|
||||
this.grid.innerHTML = contentHtml;
|
||||
@ -69,7 +69,7 @@ function View()
|
||||
}
|
||||
}
|
||||
|
||||
this.buildEntry = function(db, key)
|
||||
this.buildArticle = function(db, key)
|
||||
{
|
||||
let value = db[key];
|
||||
let itemClass = "article";
|
||||
@ -97,10 +97,8 @@ function View()
|
||||
style="cursor: pointer;"`;
|
||||
}
|
||||
|
||||
let entry = ``;
|
||||
entry += `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
|
||||
|
||||
// ITEM DIV
|
||||
// ARTICLE
|
||||
let entry = `<article class="${itemClass}" id="${SETTINGS.GRIDITEMIDBASE + value.DIID}">`;
|
||||
if (this.isDefined(value.LINK))
|
||||
{
|
||||
var idUrl = "url";
|
||||
@ -141,12 +139,12 @@ function View()
|
||||
for (let l = 0; l < value.LINK.length; l++)
|
||||
{
|
||||
entry += `<a class="griditem-link" href="${String(value.LINK[l])}" id="${idUrl}">`;
|
||||
entry += `<div class="griditem-linkcontainer"><i title="link" class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
|
||||
entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK[l])}</div></div></a>`;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
entry += `<div class="griditem-linkcontainer"><i class="griditem-linkicon fas fa-link"></i><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
|
||||
entry += `<div class="griditem-linkcontainer"><div class="griditem-linkicon">${this.buildIcon('link')}</div><div class="griditem-linktitle">${this.extractRootDomain(value.LINK)}</div></div></a>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,12 +155,11 @@ function View()
|
||||
entry += `<div class="griditem-typecontainer">`;
|
||||
for (let tc = 0; tc < value.TYPE.length; tc++)
|
||||
{
|
||||
const icon = getTypeIconName(value.TYPE[tc]);
|
||||
entry += `<a class="griditem-type" href='#type-${value.TYPE[tc]}'>`;
|
||||
entry += `<i title="${value.TYPE[tc]}" class="griditem-typeicon ${icon}"></i>`;
|
||||
entry += this.buildIcon(value.TYPE[tc], value.TYPE[tc], 'griditem-typeicon');
|
||||
entry += `</a>`;
|
||||
}
|
||||
entry += `</div>`; // griditem-typecontainer
|
||||
entry += `</div>`;
|
||||
}
|
||||
|
||||
// UPPER CONTENT END
|
||||
@ -182,7 +179,7 @@ function View()
|
||||
// TIME
|
||||
if (SETTINGS.SHOWDATE && this.isDefined(value.DATE))
|
||||
{
|
||||
entry += `<time class="griditem-date"><i title="date" class="fas fa-clock textIcon"></i>${value.DATE}</time>`;
|
||||
entry += this.doRow('date', value.DATE);
|
||||
}
|
||||
|
||||
// AUTHOR
|
||||
@ -190,62 +187,62 @@ function View()
|
||||
{
|
||||
for (var i = 0; i < value.AUTH.length; i++)
|
||||
{
|
||||
entry += `<div class="griditem-auth"><i title="author" class="fas fa-user textIcon"></i>${value.AUTH[i].to_properCase()}</div>`;
|
||||
entry += this.doRow('author', value.AUTH[i].to_properCase());
|
||||
}
|
||||
}
|
||||
|
||||
// TAGS
|
||||
if (SETTINGS.SHOWTAGS && this.isDefined(value.TAGS))
|
||||
{
|
||||
entry += `<div class="griditem-tags"><i title="tags" class="fas fa-tag textIcon"></i>`;
|
||||
let content = '';
|
||||
for (var i = 0; i < value.TAGS.length; i++)
|
||||
{
|
||||
entry += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
|
||||
content += `<a class="griditem-taglink" href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
|
||||
if (i + 1 !== value.TAGS.length)
|
||||
{
|
||||
entry += `, `;
|
||||
content += `, `;
|
||||
}
|
||||
};
|
||||
entry += `</div>`;
|
||||
entry += this.doRow('tags', content);
|
||||
}
|
||||
|
||||
// PROJECT
|
||||
if (SETTINGS.SHOWPROJ && this.isDefined(value.PROJ))
|
||||
{
|
||||
entry += `<div class="griditem-proj"><i title="project" class="fas fa-leaf textIcon"></i>`;
|
||||
let content = '';
|
||||
for (var i = 0; i < value.PROJ.length; i++)
|
||||
{
|
||||
entry += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
|
||||
content += `<a class="griditem-taglink" href="#proj-${value.PROJ[i]}">${value.PROJ[i].to_properCase()}</a>`;
|
||||
if (i + 1 != value.PROJ.length)
|
||||
{
|
||||
entry += `, `;
|
||||
content += `, `;
|
||||
}
|
||||
}
|
||||
entry += `</div>`;
|
||||
entry += this.doRow('project', content);
|
||||
}
|
||||
|
||||
// TERM
|
||||
if (SETTINGS.SHOWTERM && this.isDefined(value.TERM))
|
||||
{
|
||||
entry += this.doMultilineFormatting(value.TERM, "term", "griditem-term", "fas fa-ribbon textIcon");
|
||||
entry += this.doMultilineFormatting('term', value.TERM);
|
||||
}
|
||||
|
||||
// NOTE
|
||||
if (SETTINGS.SHOWNOTE && this.isDefined(value.NOTE))
|
||||
{
|
||||
entry += this.doMultilineFormatting(value.NOTE, "note", "griditem-note", "fas fa-sticky-note textIcon");
|
||||
entry += this.doMultilineFormatting('note', value.NOTE);
|
||||
}
|
||||
|
||||
// QUOTE
|
||||
if (SETTINGS.SHOWQOTE && this.isDefined(value.QOTE))
|
||||
{
|
||||
entry += this.doMultilineFormatting(value.QOTE, "quote", "griditem-quote", "fas fa-comment textIcon");
|
||||
entry += this.doMultilineFormatting('quote', value.QOTE);
|
||||
}
|
||||
|
||||
// PROGRESS
|
||||
if (SETTINGS.SHOWPROG && this.isDefined(value.PROG))
|
||||
{
|
||||
entry += `<div class="griditem-prog"><i title="progress" class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
|
||||
entry += this.doRow('progress', value.PROG);
|
||||
}
|
||||
|
||||
// IMAGE - for non-image-type-entry
|
||||
@ -266,13 +263,13 @@ function View()
|
||||
{
|
||||
for (var i = 0; i < value.FILE.length; i++)
|
||||
{
|
||||
entry += `<div class="griditem-file"><i title="file" class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a></div>`;
|
||||
entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE[i]}">${value.FILE[i]}</a>`, 'griditem-file');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// single
|
||||
entry += `<div class="griditem-file"><i title="file" class="fas fa-folder-open textIcon"></i><a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a></div>`;
|
||||
entry += this.doRow('file', `<a class="griditem-file-link" href="content/media/${value.FILE}">${value.FILE}</a>`, 'griditem-file');
|
||||
}
|
||||
}
|
||||
|
||||
@ -298,6 +295,14 @@ function View()
|
||||
return entry;
|
||||
}
|
||||
|
||||
this.doRow = function(type, content, extraClass)
|
||||
{
|
||||
return `<div class="griditem-row${extraClass != undefined ? ' '+extraClass : ''}">
|
||||
${type != undefined ? this.buildIcon(type) : ''}
|
||||
<div class="griditem-rowtext">${content}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
this.stats = function(value)
|
||||
{
|
||||
let menuContent = ``;
|
||||
@ -339,7 +344,7 @@ function View()
|
||||
{
|
||||
const type = value.types[ty][0];
|
||||
const count = value.types[ty][1];
|
||||
const icon = getTypeIconName(type);
|
||||
const icon = this.getIcon(type);
|
||||
menuContent += `<a href='#type-${type}' class="menu-item">`;
|
||||
menuContent += `<div class="menu-itemcount">${count}</div>`;
|
||||
menuContent += `<i title="${type}" class="menu-itemicon ${icon}"></i>`;
|
||||
@ -368,7 +373,6 @@ function View()
|
||||
for (var t = 0; t < Math.min(value.tags.length, SETTINGS.STATSNUMTAGS); t++)
|
||||
{
|
||||
menuContent += `<a class="menu-tag" href='#tag-${value.tags[t][0]}'>`;
|
||||
// menuContent += `<i class="fas fa-tag textIcon"></i>`;
|
||||
menuContent += `<div class="menu-tagcount">${value.tags[t][1]}</div>`;
|
||||
menuContent += `<div class="menu-taglabel">${value.tags[t][0]}</div>`;
|
||||
menuContent += `</a>`;
|
||||
@ -392,7 +396,7 @@ function View()
|
||||
}
|
||||
}
|
||||
|
||||
this.doMultilineFormatting = function(data, title, className, iconName)
|
||||
this.doMultilineFormatting = function(type, data)
|
||||
{
|
||||
let result = '';
|
||||
if (Array.isArray(data))
|
||||
@ -409,39 +413,47 @@ function View()
|
||||
{
|
||||
titleSplit[e] = titleSplit[e].trim();
|
||||
}
|
||||
result += `<div class="${className}"><i title="${title}" class="${iconName}"></i><b>${titleSplit[0]}</b>: ${titleSplit[1]}</div>`;
|
||||
result += this.doRow(type, `<b>${titleSplit[0]}</b>: ${titleSplit[1]}`);
|
||||
}
|
||||
else
|
||||
{
|
||||
result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i].substring(2)}</div>`;
|
||||
result += this.doRow(type, data[i].substring(2));
|
||||
}
|
||||
}
|
||||
else if (data[i].substring(0, 2) === "& ")
|
||||
{
|
||||
// New line in current item
|
||||
result += `<div class="${className}">${data[i].substring(2)}</div>`;
|
||||
result += this.doRow(null, data[i].substring(2));
|
||||
}
|
||||
else if (data[i].substring(0, 2) == "- ")
|
||||
{
|
||||
// Bullet point
|
||||
result += `<div class="${className}"><i class="fas fa-caret-right textIcon"></i>${data[i].substring(2)}</div>`;
|
||||
result += this.doRow('dash', data[i].substring(2));
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle unformatted
|
||||
result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data[i]}</div>`;
|
||||
result += this.doRow(type, data[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle not array
|
||||
result += `<div class="${className}"><i title="${title}" class="${iconName}"></i>${data}</div>`;
|
||||
result += this.doRow(type, data);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
getTypeIconName = function(type)
|
||||
this.buildIcon = function(type, label, altClass)
|
||||
{
|
||||
if (label == undefined) { label = type; }
|
||||
let labelElem = label != null ? `title="${label}" ` : ``;
|
||||
let iconClass = altClass == undefined ? 'article-icon' : altClass;
|
||||
return `<i ${labelElem}class="${this.getIcon(type)} textIcon ${iconClass}"></i>`;
|
||||
}
|
||||
|
||||
this.getIcon = function(type)
|
||||
{
|
||||
let icon = '';
|
||||
switch (type)
|
||||
@ -460,6 +472,15 @@ function View()
|
||||
case 'image': icon = 'fas fa-image'; break;
|
||||
case 'encyclopedia': icon = 'fas fa-globe'; break;
|
||||
case 'term': icon = 'fas fa-ribbon'; break;
|
||||
case 'note': icon = 'fas fa-sticky-note'; break;
|
||||
case 'date': icon = 'fas fa-clock'; break;
|
||||
case 'author': icon = 'fas fa-user'; break;
|
||||
case 'tags': icon = 'fas fa-tag'; break;
|
||||
case 'project': icon = 'fas fa-leaf'; break;
|
||||
case 'progress': icon = 'fas fa-clock'; break;
|
||||
case 'file': icon = 'fas fa-folder-open'; break;
|
||||
case 'dash': icon = 'fas fa-caret-right'; break;
|
||||
case 'link': icon = 'fas fa-link'; break;
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user