filter sorting and little styling

master
km0 3 years ago
parent 4c26b4fe5d
commit 8bcb842718

@ -137,8 +137,8 @@ function createDate(string) {
if (date) { if (date) {
const options = { year: "numeric", month: "short", day: "numeric" }; const options = { year: "numeric", month: "short", day: "numeric" };
parsed = date.toLocaleDateString("en-EN", options); parsed = date.toLocaleDateString("en-EN", options);
if (parsed === "Invalid Date") parsed = "???";
} }
return parsed; return parsed;
} }
@ -149,7 +149,9 @@ function createTags(categories) {
let tagsContainer = document.createElement("ul"); let tagsContainer = document.createElement("ul");
// For each category create a li element // For each category create a li element
categories.forEach((item) => { categories
.sort((a, b) => a.localeCompare(b))
.forEach((item) => {
let tag = document.createElement("li"); let tag = document.createElement("li");
tag.classList.add("tag"); tag.classList.add("tag");
tag.innerHTML = item; tag.innerHTML = item;
@ -168,7 +170,9 @@ function createTags(categories) {
// Parse the filters Set to create a list of interactive list elements // Parse the filters Set to create a list of interactive list elements
function createFilters() { function createFilters() {
filters.forEach((item) => { Array.from(filters)
.sort((a, b) => a.localeCompare(b))
.forEach((item) => {
let tag = document.createElement("li"); let tag = document.createElement("li");
// Store the filter value in the markup and use it for filtering later // Store the filter value in the markup and use it for filtering later
tag.setAttribute("data-tag", item); tag.setAttribute("data-tag", item);

@ -40,7 +40,8 @@ h1 {
background: none; background: none;
} }
.tag:focus { .tag:focus,
.tag:hover {
transform: translateY(-4px); transform: translateY(-4px);
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
@ -51,10 +52,18 @@ ul {
/* TABLE */ /* TABLE */
table {
border-collapse: collapse;
}
tr { tr {
display: none; display: none;
} }
tr:nth-child(even) {
background-color: rgb(251, 237, 225);
}
tr.active { tr.active {
display: table-row; display: table-row;
} }

Loading…
Cancel
Save