From e362250861bbdc85e45519591aabf7b1b9cb872c Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Thu, 27 Apr 2017 11:49:59 +0530
Subject: [PATCH] More work on the details list

---
 src/pyj/book_list/details_list.pyj | 49 +++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/pyj/book_list/details_list.pyj b/src/pyj/book_list/details_list.pyj
index 3d52a7a40c..37cd313ecb 100644
--- a/src/pyj/book_list/details_list.pyj
+++ b/src/pyj/book_list/details_list.pyj
@@ -2,22 +2,30 @@
 # License: GPL v3 Copyright: 2017, Kovid Goyal <kovid at kovidgoyal.net>
 from __python__ import bound_methods, hash_literals
 
-from dom import clear, set_css, build_rule
 from elementmaker import E
 from gettext import gettext as _
 
+from dom import build_rule, clear, set_css, svgicon
+from session import get_interface_data
+from utils import fmt_sidx
+
 DETAILS_LIST_CLASS = 'book-list-details-list'
 DESCRIPTION = _('A list with thumbnails and some book details')
 
-THUMBNAIL_MAX_WIDTH = 90
-THUMBNAIL_MAX_HEIGHT = 120
-BORDER_RADIUS = 5
+THUMBNAIL_MAX_WIDTH = 35 * 3
+THUMBNAIL_MAX_HEIGHT = 35 * 4
+BORDER_RADIUS = 6
 
 
 def details_list_css():
     ans = ''
     sel = '.' + DETAILS_LIST_CLASS
-    ans += build_rule(sel + ' img', border_radius=BORDER_RADIUS+'px')
+    ans += build_rule(sel + ' > div', margin='1ex 1em', padding_bottom='1ex', border_bottom='solid 1px currentColor')
+    s = sel + ' .details-list-left'
+    ans += build_rule(s, margin_right='1em', width=f'{THUMBNAIL_MAX_WIDTH}px')
+    ans += build_rule(s + ' > img', border_radius=BORDER_RADIUS+'px', max_height=f'{THUMBNAIL_MAX_HEIGHT}px', max_width=f'{THUMBNAIL_MAX_WIDTH}px')
+    s = sel + ' .details-list-right'
+    ans += build_rule(s, flex_grow='10')
     return ans
 
 
@@ -45,8 +53,35 @@ def create_item(book_id, metadata, create_image, show_book_details):
     img = create_image(book_id, THUMBNAIL_MAX_WIDTH, THUMBNAIL_MAX_HEIGHT, on_img_load)
     img.setAttribute('alt', _('{} by {}').format(metadata.title, authors))
     img.dataset.title, img.dataset.authors = metadata.title, authors
-    img_div = E.div(img)
-    ans = E.div(img_div, style=f'height:{THUMBNAIL_MAX_HEIGHT}px')
+    img_div = E.div(img, class_='details-list-left')
+    extra_data = E.div(style='text-align: right')
+    comments = E.div(style='margin-top: 1ex')
+    interface_data = get_interface_data()
+    if metadata.comments:
+        comments.innerHTML = metadata.comments
+    if metadata.rating:
+        stars = E.span(style='white-space:nowrap')
+        for i in range(int(metadata.rating) // 2):
+            stars.appendChild(svgicon('star'))
+        extra_data.appendChild(stars), extra_data.appendChild(E.br())
+    if metadata.series:
+        try:
+            ival = float(metadata.series_index)
+        except Exception:
+            ival = 1.0
+        ival = fmt_sidx(ival, use_roman=interface_data.use_roman_numerals_for_series_number)
+        extra_data.appendChild(E.span(ival, _(' of '), E.i(metadata.series)))
+    right = E.div(
+        class_='details-list-right',
+        E.div(style='display:flex; justify-content: space-between',
+            E.div(
+                E.b(metadata.title or _('Unknown')), E.br(), metadata.authors.join(' & '),
+            ),
+            extra_data
+        ),
+        comments,
+    )
+    ans = E.div(img_div, right, style=f'overflow: hidden; height:{THUMBNAIL_MAX_HEIGHT}px; display: flex')
     return ans