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

71
asset/style.css
View File

@ -2,28 +2,67 @@ html {
background:#DCDCDC;
font-family:'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
font-size:1em;
box-sizing: border-box;
}
/*#content div:nth-child(4n+1) {
grid-column-end: span 2;
grid-row-end: span 2;
*,
*:before,
*:after {
box-sizing: inherit;
}
#content div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
/* Masonry */
#masonry {
max-width: 1550px;
min-width: 300px;
column-gap: 1em;
margin-left: 0.75em;
margin-right: 0.75em;
margin-top: 1em;
page-break-inside: avoid;
break-inside: avoid;
}
#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;
}
#content div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}*/
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: dense;
}
@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 */
a {
color:#000;

18
logic/main.js
View File

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