Show book summary in detail modal

3 files changed, 37 insertions, 10 deletions

diff --git a/public/main.css b/public/main.css
index 5a531fd..d920a26 100644
--- a/public/main.css
+++ b/public/main.css
@@ -34,6 +34,10 @@ dd {
   margin-left: 0;
 }
 
+p {
+  margin: 0;
+}
+
 /* Modal */
 
 .g-Modal {
@@ -45,7 +49,7 @@ dd {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
 }
 
@@ -53,7 +57,6 @@ dd {
   position: relative;
   background-color: white;
   width: 50%;
-  max-height: 75%;
   border-radius: 0.2rem;
   border: 1px solid #EEE;
 }
@@ -67,7 +70,9 @@ dd {
 }
 
 .g-Modal__Body {
-  padding: var(--spacing-dog) var(--spacing-horse);
+  padding: var(--spacing-horse);
+  max-height: 50vh;
+  overflow-y: scroll;
 }
 
 .g-Modal__Close {
@@ -160,12 +165,12 @@ header {
   width: fit-content;
 }
 
-.g-Book:hover, .g-Book:focus {
+.g-Book:hover {
   cursor: pointer;
   outline: none;
 }
 
-.g-Book:hover .g-Book__Image, .g-Book:focus .g-Book__Image {
+.g-Book:hover .g-Book__Image {
   transform: scale(105%);
   opacity: 0.9;
 }
@@ -180,11 +185,12 @@ header {
 
 .g-BookDetail {
   display: flex;
+  align-items: flex-start;
 }
 
 .g-BookDetail img {
   width: 13rem;
-  margin-right: var(--spacing-dog);
+  margin-right: var(--spacing-horse);
   border: 1px solid #EEE;
 }
 
@@ -202,6 +208,7 @@ header {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-cat);
+  margin-bottom: var(--spacing-dog);
 }
 
 .g-BookDetail dt {
@@ -212,3 +219,15 @@ header {
 .g-BookDetail dd {
   display: inline;
 }
+
+.g-BookDetail p {
+  font-family: serif;
+  text-align: justify;
+  line-height: 1.4rem;
+  font-size: 1.1rem;
+  text-indent: 1.5rem;
+}
+
+.g-BookDetail p:not(:last-child) {
+  margin-bottom: var(--spacing-dog);
+}
diff --git a/src/book.ts b/src/book.ts
index 328f8e1..680cc11 100644
--- a/src/book.ts
+++ b/src/book.ts
@@ -4,7 +4,8 @@ export interface Book {
   authors: Array<string>
   authorsSort: string
   genres: Array<string>
-  date: string
+  date: number
+  summary?: string
   read: ReadStatus,
   cover: string
 }
diff --git a/src/view/books.ts b/src/view/books.ts
index 4229774..7cb3cc1 100644
--- a/src/view/books.ts
+++ b/src/view/books.ts
@@ -49,9 +49,16 @@ function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
     body: h('div',
       { className: 'g-BookDetail' },
       h('img', { src: book.cover }),
-      h('dl',
-        metadata('Auteur', book.authors),
-        metadata('Genre', book.genres)
+      h('div',
+        h('dl',
+          metadata('Auteur', book.authors),
+          metadata('Genre', book.genres)
+        ),
+        book.summary && book.summary
+          .split('\n')
+          .map(str => str.trim())
+          .filter(str => str != '')
+          .map(str => h('p', str))
       )
     ),
     onClose