From 25abf9bc7fd3e6f5b5aabf745cef7d217cde4262 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 21 Jan 2023 14:10:47 +0100
Subject: Setup initial view of covers
---
public/index.html | 6 ++++++
public/main.css | 21 +++++++++++++++++++++
public/main.js | 19 +++++++++++++++++++
3 files changed, 46 insertions(+)
create mode 100644 public/index.html
create mode 100644 public/main.css
create mode 100644 public/main.js
(limited to 'public')
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..13136da
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..711aaf2
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,21 @@
+body {
+ margin: 2rem;
+}
+
+.g-Books {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ grid-gap: 1rem;
+
+}
+
+.g-Book {
+ width: 13rem;
+ align-self: center;
+ border: 1px solid #DDDDDD;
+}
+
+.g-Book:hover {
+ transform: scale(1.1);
+ transition: transform 0.1s linear;
+}
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..29de235
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,19 @@
+const sortedBooks = books.sort((a, b) =>
+ a.authorsSort == b.authorsSort
+ ? a.date > b.date
+ : a.authorsSort > b.authorsSort)
+
+const view = h('div',
+ { className: 'g-Books' },
+ ...sortedBooks.map(book => h('img', { className: 'g-Book', src: book.cover })))
+
+document.body.appendChild(view)
+
+// Helpers
+
+function h(tagName, attrs, ...children) {
+ let elem = document.createElement(tagName)
+ elem = Object.assign(elem, attrs)
+ for (const child of children) elem.append(child)
+ return elem
+}
--
cgit v1.2.3