diff options
| author | Joris | 2023-01-21 14:10:47 +0100 |
|---|---|---|
| committer | Joris | 2023-01-21 14:10:47 +0100 |
| commit | 25abf9bc7fd3e6f5b5aabf745cef7d217cde4262 (patch) | |
| tree | d3ef6f2be1b117cfe5c75f5cd22408b2f47088f0 /public | |
| parent | 424cabd49593b13470be1868cf75349b1830929c (diff) | |
Setup initial view of covers
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 6 | ||||
| -rw-r--r-- | public/main.css | 21 | ||||
| -rw-r--r-- | public/main.js | 19 |
3 files changed, 46 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="stylesheet" href="main.css"> +<body></body> +<script src="data.js"></script> +<script src="main.js"></script> 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 +} |