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

Masonry grid attempt 2.

Browse Source
This commit is contained in:
kor 2018-07-14 22:07:08 +12:00
parent f66c0829c1
commit 2fd8ab3727
2 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
asset/style.css
View File

@ -2,28 +2,67 @@ html {
background:#DCDCDC; background:#DCDCDC;
font-family:'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace; font-family:'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
font-size:1em; font-size:1em;
box-sizing: border-box;
} }
/*#content div:nth-child(4n+1) { *,
grid-column-end: span 2; *:before,
grid-row-end: span 2; *:after {
box-sizing: inherit;
} }
#content div:nth-child(2) {
grid-column: 3; /* Masonry */
grid-row: 2 / 4; #masonry {
} max-width: 1550px;
#content div:nth-child(5) { min-width: 300px;
grid-column: 1 / 3; column-gap: 1em;
grid-row: 1 / 3; margin-left: 0.75em;
}*/ margin-right: 0.75em;
#content { margin-top: 1em;
display: grid; page-break-inside: avoid;
grid-template-columns: repeat(4, 1fr); break-inside: avoid;
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: dense;
} }
#item {
background: #fff;
margin-bottom: 1em;
padding: 1em;
display: inline-block;
overflow: hidden;
width: 100% !important;
}
@media only screen and (min-width: 1550px) {
#masonry {
column-count: 5;
}
}
@media only screen and (max-width: 1549px) and (min-width: 1250px) {
#masonry {
column-count: 4;
}
}
@media only screen and (max-width: 1249px) and (min-width: 950px) {
#masonry {
column-count: 3;
}
}
@media only screen and (max-width: 949px) and (min-width: 650px) {
#masonry {
column-count: 2;
}
}
@media only screen and (max-width: 649px) and (min-width: 0px) {
#masonry {
column-count: 1;
}
}
/* LINK */ /* LINK */
a { a {
color:#000; color:#000;

18
logic/main.js
View File

@ -11,7 +11,7 @@ function Main()
let view = ``; let view = ``;
let html = document.body; let html = document.body;
view += `<div id="content">${displayEntries(DB)}</div>`; view += `<div id="masonry">${displayEntries(DB)}</div>`;
html.innerHTML = view; html.innerHTML = view;
} }
@ -28,14 +28,14 @@ function displayEntries(db)
value = db[keys[i]]; value = db[keys[i]];
// ENTRY // ENTRY
var idEntry = "entry"; var idEntry = "item";
if (typeof value.REVI !== 'undefined') // if (typeof value.REVI !== 'undefined')
{ // {
if (value.REVI == "true") // if (value.REVI == "true")
{ // {
idEntry = "entryImportant"; // idEntry = "entryImportant";
} // }
} // }
entries += `<div id="${idEntry}">`; entries += `<div id="${idEntry}">`;
entries += `${keys[i].toProperCase()}`; entries += `${keys[i].toProperCase()}`;