Show books in two columns for large screens

3 files changed, 61 insertions, 23 deletions

diff --git a/src/main/scala/reading/component/index/Books.scala b/src/main/scala/reading/component/index/Books.scala
index 79a7f07..ed6265b 100644
--- a/src/main/scala/reading/component/index/Books.scala
+++ b/src/main/scala/reading/component/index/Books.scala
@@ -22,30 +22,49 @@ object Books {
             s"${books().length} livres"
           ),
 
-          books().sorted.map { book =>
-            div(
-              BooksStyle.book,
-              div(BooksStyle.title, book.title),
-              div(BooksStyle.author, s", ${book.author}"),
+          div(
+            BooksStyle.books,
+
+            books().sorted.map { book =>
               div(
-                BooksStyle.detail,
-                img(
-                  BooksStyle.cover,
-                  src := s"cover/${book.title}.jpg"
-                ),
+                BooksStyle.book,
+                div(BooksStyle.title, book.title),
+                div(BooksStyle.author, s", ${book.author}"),
                 div(
-                  div(BooksStyle.item, s"classe : ${book.programs.map(Program.grade).map(_.prettyPrint).distinct.sorted.mkString(", ")}"),
-                  div(BooksStyle.item, s"programme : ${book.programs.map(p => "« " ++ p.prettyPrint ++ " »").sorted.mkString(", ")}"),
-                  div(BooksStyle.item, s"thème : ${book.themes.sorted.map(_.prettyPrint).mkString(", ")}"),
-                  div(BooksStyle.item, s"genre : ${book.genres.sorted.map(_.prettyPrint).mkString(", ")}"),
-                  book.period.map { period =>
-                    div(BooksStyle.item, s"période : ${period.prettyPrint}")
-                  }
+                  BooksStyle.detail,
+                  img(
+                    BooksStyle.cover,
+                    src := s"cover/${book.title}.jpg"
+                  ),
+                  div(
+                    if (book.programs.nonEmpty) {
+                      div(
+                        item("classe", book.programs.map(Program.grade(_).prettyPrint).distinct.sorted.mkString(", ")),
+                        item("programme", book.programs.map(p => "« " ++ p.prettyPrint ++ " »").sorted.mkString(", "))
+                      )
+                    },
+                    if (book.themes.nonEmpty) {
+                      item("thème", book.themes.sorted.map(_.prettyPrint).mkString(", "))
+                    },
+                    if (book.genres.nonEmpty) {
+                      item("genre", book.genres.sorted.map(_.prettyPrint).mkString(", "))
+                    },
+                    book.period.map { period =>
+                      item("période", period.prettyPrint)
+                    }
+                  )
                 )
               )
-            )
-          }
+            }
+          )
         )
       }
     )
+
+  def item(key: String, value: String): Frag =
+    div(
+      BooksStyle.item,
+      span(BooksStyle.itemKey, key),
+      span(BooksStyle.itemValue, value)
+    )
 }
diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala
index 9e118d8..97c1479 100644
--- a/src/main/scala/reading/component/index/style/Books.scala
+++ b/src/main/scala/reading/component/index/style/Books.scala
@@ -7,13 +7,24 @@ import reading.component.style.Col
 object Books extends StyleSheet.Inline {
   import dsl._
 
+  val books = style(
+    display.flex,
+    flexWrap.wrap
+  )
+
   val count = style(
     marginBottom(30.px)
   )
 
   val book = style(
-    marginBottom(40.px),
-    marginRight(60.px)
+    media.minWidth(1300.px)(
+      width(50.%%)
+    ),
+    media.maxWidth(1300.px)(
+      width(100.%%)
+    ),
+    paddingBottom(60.px),
+    paddingRight(60.px)
   )
 
   val title = style(
@@ -37,6 +48,14 @@ object Books extends StyleSheet.Inline {
   )
 
   val item = style(
-    marginBottom(10.px)
+    lineHeight(25.px),
+    marginBottom(4.px)
+  )
+
+  val itemKey = style(
+    fontWeight.bold,
+    marginRight(10.px)
   )
+
+  val itemValue = style()
 }
diff --git a/src/main/scala/reading/component/index/style/FiltersMenu.scala b/src/main/scala/reading/component/index/style/FiltersMenu.scala
index 7168e1b..3fcc363 100644
--- a/src/main/scala/reading/component/index/style/FiltersMenu.scala
+++ b/src/main/scala/reading/component/index/style/FiltersMenu.scala
@@ -8,7 +8,7 @@ object FiltersMenu extends StyleSheet.Inline {
   import dsl._
 
   val groups = style(
-    width(250.px)
+    width(280.px)
   )
 
   val group = style(