Improve modal style

3 files changed, 86 insertions, 46 deletions

diff --git a/public/main.css b/public/main.css
index e5d3bcf..5a531fd 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,13 +3,14 @@
 :root {
   --color-focus: #888833;
 
-  --width-close-button: 4rem;
+  --width-close-button: 3rem;
 
   --font-size-dog: 1.5rem;
 
-  --spacing-beetle: 0.25rem;
-  --spacing-mouse: 0.5rem;
-  --spacing-cat: 1rem;
+  --spacing-mouse: 0.25rem;
+  --spacing-cat: 0.5rem;
+  --spacing-dog: 1rem;
+  --spacing-horse: 2rem;
 }
 
 /* Top level */
@@ -25,6 +26,14 @@ body {
   font-family: sans-serif;
 }
 
+dl {
+  margin: 0;
+}
+
+dd {
+  margin-left: 0;
+}
+
 /* Modal */
 
 .g-Modal {
@@ -40,10 +49,28 @@ body {
   z-index: 1;
 }
 
+.g-Modal__Content {
+  position: relative;
+  background-color: white;
+  width: 50%;
+  max-height: 75%;
+  border-radius: 0.2rem;
+  border: 1px solid #EEE;
+}
+
+.g-Modal__Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-dog) var(--spacing-horse);
+  border-bottom: 1px solid #EEE;
+}
+
+.g-Modal__Body {
+  padding: var(--spacing-dog) var(--spacing-horse);
+}
+
 .g-Modal__Close {
-  position: absolute;
-  top: 2rem;
-  right: 2rem;
   cursor: pointer;
   font-weight: bold;
   border-radius: 50%;
@@ -51,25 +78,13 @@ body {
   background-color: transparent;
   width: var(--width-close-button);
   height: var(--width-close-button);
-  font-size: 2rem;
-  font-family: monospace;
+  font-size: 1.7rem;
 }
 
 .g-Modal__Close:hover, .g-Modal__Close:focus {
   background-color: #EEE;
 }
 
-.g-Modal__Content {
-  position: relative;
-  background-color: white;
-  width: 50%;
-  height: 50%;
-  border-radius: 0.2rem;
-  border: 1px solid #EEE;
-  padding: 2rem;
-  padding-right: calc(2rem + var(--width-close-button) + 2rem);
-}
-
 /* Filters */
 
 aside {
@@ -165,23 +180,35 @@ header {
 
 .g-BookDetail {
   display: flex;
-  justify-content: space-between;
 }
 
 .g-BookDetail img {
-  width: 10rem;
+  width: 13rem;
+  margin-right: var(--spacing-dog);
+  border: 1px solid #EEE;
 }
 
 .g-BookDetail__Title {
   font-size: var(--font-size-dog);
-  margin-bottom: var(--spacing-beetle);
+  margin-bottom: var(--spacing-mouse);
 }
 
 .g-BookDetail__Subtitle {
   font-style: italic;
-  margin-bottom: var(--spacing-beetle);
+  margin-bottom: var(--spacing-mouse);
+}
+
+.g-BookDetail dl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-cat);
+}
+
+.g-BookDetail dt {
+  display: inline;
+  text-decoration: underline;
 }
 
-.g-BookDetail__Genres {
-  margin-top: var(--spacing-cat);
+.g-BookDetail dd {
+  display: inline;
 }
diff --git a/src/view/books.ts b/src/view/books.ts
index 6ea0c12..4229774 100644
--- a/src/view/books.ts
+++ b/src/view/books.ts
@@ -42,20 +42,25 @@ interface BookDetailModalParams {
 
 function bookDetailModal({ book, onClose }: BookDetailModalParams): Html {
   return Modal.view({
-    content: h('div',
+    header: h('div',
+      h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
+      book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle)
+    ),
+    body: h('div',
       { className: 'g-BookDetail' },
-      h('div',
-        h('div', { className: 'g-BookDetail__Title' }, `${book.title}, ${book.date}`),
-        book.subtitle && h('div', { className: 'g-BookDetail__Subtitle' }, book.subtitle),
-        book.authors.join(', '),
-        h('div',
-          { className: 'g-BookDetail__Genres' },
-          book.genres.length > 1 ? 'Genres : ' : 'Genre : ',
-          book.genres.join(', ')
-        )
-      ),
-      h('img', { src: book.cover })
+      h('img', { src: book.cover }),
+      h('dl',
+        metadata('Auteur', book.authors),
+        metadata('Genre', book.genres)
+      )
     ),
     onClose
   })
 }
+
+function metadata(term: string, descriptions: Array<string>): Html {
+  return h('div',
+    h('dt', term, descriptions.length > 1 && 's', ' :'),
+    h('dd', ' ', descriptions.join(', '))
+  )
+}
diff --git a/src/view/components/modal.ts b/src/view/components/modal.ts
index fe08272..95f907c 100644
--- a/src/view/components/modal.ts
+++ b/src/view/components/modal.ts
@@ -1,11 +1,12 @@
 import { h, Html } from 'lib/rx'
 
 interface Params {
-  content: Html,
+  header: Html,
+  body: Html,
   onClose: () => void
 }
 
-export function view({ content, onClose }: Params): Html {
+export function view({ header, body, onClose }: Params): Html {
   return h('div',
     { className: 'g-Modal',
       onclick: () => onClose()
@@ -14,13 +15,20 @@ export function view({ content, onClose }: Params): Html {
       { className: 'g-Modal__Content',
         onclick: (e: Event) => e.stopPropagation()
       },
-      h('button',
-        { className: 'g-Modal__Close',
-          onclick: () => onClose()
-        },
-        '✖'
+      h('div',
+        { className: 'g-Modal__Header' },
+        header,
+        h('button',
+          { className: 'g-Modal__Close',
+            onclick: () => onClose()
+          },
+          '✕'
+        )
       ),
-      content
+      h('div',
+        { className: 'g-Modal__Body' },
+        body
+      )
     )
   )
 }