From aa662810a98e0cfe7ea98cadb87a55c8571f10db Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 25 Feb 2017 22:48:01 +0100 Subject: Align vertically the cover in book detail --- .../scala/reading/component/index/BookDetail.scala | 72 ++++++++++++---------- .../reading/component/index/style/BookDetail.scala | 14 +++-- src/main/scala/reading/models/Books.scala | 3 +- 3 files changed, 48 insertions(+), 41 deletions(-) diff --git a/src/main/scala/reading/component/index/BookDetail.scala b/src/main/scala/reading/component/index/BookDetail.scala index ed91211..24f48b3 100644 --- a/src/main/scala/reading/component/index/BookDetail.scala +++ b/src/main/scala/reading/component/index/BookDetail.scala @@ -21,48 +21,52 @@ object BookDetail { div( BookStyle.render, - BookStyle.detail, + BookStyle.detailParent, id := componentId, - img( - BookStyle.cover, - src := s"cover/${book.title}.jpg", - alt := s"${book.title}, ${book.author}" - ), - div( - BookStyle.presentation, - div(BookStyle.title, s"${book.title}$titleParts"), - div(BookStyle.author, book.author), + BookStyle.detail, - book.resume match { - case Some(resume) => - p(BookStyle.resume, raw(resume)) - case _ => - span("") - }, + img( + BookStyle.cover, + src := s"cover/${book.title}.jpg", + alt := s"${book.title}, ${book.author}" + ), - dl( - BookStyle.definitions, + div( + BookStyle.presentation, + div(BookStyle.title, s"${book.title}$titleParts"), + div(BookStyle.author, book.author), - grades.map { grade => - val programs = book.programs.filter(p => Program.grade(p) == grade).sorted - val pp = grade.prettyPrint - definition(pp, pp, programs.map(p => s"« ${p.prettyPrint} »")) - }, - if (book.themes.nonEmpty) { - definition("thème", "thèmes", book.themes.sorted.map(_.prettyPrint)) - }, - if (book.genres.nonEmpty) { - definition("genre", "genres", book.genres.sorted.map(_.prettyPrint)) + book.resume match { + case Some(resume) => + p(BookStyle.resume, raw(resume)) + case _ => + span("") }, - definition("niveau", "niveaux", Seq(book.level.prettyPrint)) - ), - button( - BookStyle.close, - onclick := (() => onClose), - "Fermer" + dl( + BookStyle.definitions, + + grades.map { grade => + val programs = book.programs.filter(p => Program.grade(p) == grade).sorted + val pp = grade.prettyPrint + definition(pp, pp, programs.map(p => s"« ${p.prettyPrint} »")) + }, + if (book.themes.nonEmpty) { + definition("thème", "thèmes", book.themes.sorted.map(_.prettyPrint)) + }, + if (book.genres.nonEmpty) { + definition("genre", "genres", book.genres.sorted.map(_.prettyPrint)) + }, + definition("niveau", "niveaux", Seq(book.level.prettyPrint)) + ), + + button( + BookStyle.close, + onclick := (() => onClose), + "Fermer" + ) ) ) ) diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala index 2488a8f..2ce0632 100644 --- a/src/main/scala/reading/component/index/style/BookDetail.scala +++ b/src/main/scala/reading/component/index/style/BookDetail.scala @@ -8,21 +8,25 @@ import reading.Media object BookDetail extends StyleSheet.Inline { import dsl._ - val detail = style( + val detailParent = style( position.fixed, - height(100.%%), top(0.px), right(0.px), padding(30.px, 30.px, 0.px, 30.px), + height(100.%%), overflowY.scroll, - display.flex, - flexWrap.wrap, - justifyContent.spaceAround, Media.desktop(width :=! "calc(100% - 280px)"), Media.mobile(width(100.%%)), opacity(0) ) + val detail = style( + display.flex, + flexWrap.wrap, + justifyContent.spaceAround, + alignItems.center + ) + val cover = style( height(400.px), marginBottom(30.px) diff --git a/src/main/scala/reading/models/Books.scala b/src/main/scala/reading/models/Books.scala index 69f9ee6..e34e95b 100644 --- a/src/main/scala/reading/models/Books.scala +++ b/src/main/scala/reading/models/Books.scala @@ -201,8 +201,7 @@ object Books { funèbre. Le punit-on ? Il transformera la corvée en jeu et la fera exécuter par ses camarades. Son cerveau infatigable s’envole hors de la réalité, entraînant le lecteur vers toutes sortes d’aventures - inattendues.
- Source : Bibliothèque verte, Hachette + inattendues. """) ), -- cgit v1.2.3