Ameliore mobile utilization

13 files changed, 214 insertions, 124 deletions

diff --git a/src/main/scala/reading/component/index/BookDetail.scala b/src/main/scala/reading/component/index/BookDetail.scala
index 80280ac..f2d0d5d 100644
--- a/src/main/scala/reading/component/index/BookDetail.scala
+++ b/src/main/scala/reading/component/index/BookDetail.scala
@@ -20,30 +20,31 @@ object BookDetail {
       ),
 
       div(
-        div(BookStyle.title, book.title),
-        div(BookStyle.author, s", ${book.author}"),
         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(", "))
-          )
+          item("classe", book.programs.map(Program.grade(_).prettyPrint).distinct.sorted)
+        },
+        if (book.programs.nonEmpty) {
+          item("programme", book.programs.map(p => "« " ++ p.prettyPrint ++ " »").sorted)
         },
         if (book.themes.nonEmpty) {
-          item("thème", book.themes.sorted.map(_.prettyPrint).mkString(", "))
+          item("thème", book.themes.sorted.map(_.prettyPrint))
         },
         if (book.genres.nonEmpty) {
-          item("genre", book.genres.sorted.map(_.prettyPrint).mkString(", "))
+          item("genre", book.genres.sorted.map(_.prettyPrint))
         },
         book.period.map { period =>
-          item("période", period.prettyPrint)
+          item("période", Seq(period.prettyPrint))
         }
       )
     )
 
-  private def item(key: String, value: String): Frag =
+  private def item(key: String, values: Seq[String]): Frag =
     div(
       BookStyle.item,
-      span(BookStyle.itemKey, key),
-      span(BookStyle.itemValue, value)
+      div(BookStyle.itemName, key),
+      ul(
+        BookStyle.itemValues,
+        values.map(value => li(BookStyle.itemValue, value.capitalize))
+      )
     )
 }
diff --git a/src/main/scala/reading/component/index/Header.scala b/src/main/scala/reading/component/index/Header.scala
index 7e29b4c..cf078ad 100644
--- a/src/main/scala/reading/component/index/Header.scala
+++ b/src/main/scala/reading/component/index/Header.scala
@@ -1,7 +1,5 @@
 package reading.component.index
 
-import org.scalajs.dom
-
 import rx._
 import Ctx.Owner.Unsafe._
 
@@ -28,10 +26,7 @@ object Header {
         div(
           div(
             HeaderStyle.showFiltersMenu,
-            RxAttr(onclick, Rx(() => {
-              showFiltersMenu() = true
-              dom.document.body.style.overflowY = "hidden"
-            })),
+            RxAttr(onclick, Rx(() => showFiltersMenu() = true)),
             "Filtrer",
             if (filtersCount() > 0) span(HeaderStyle.filtersCount, filtersCount()) else span("")
           ),
diff --git a/src/main/scala/reading/component/index/Menu.scala b/src/main/scala/reading/component/index/Menu.scala
index 5ffbd25..6a9bcef 100644
--- a/src/main/scala/reading/component/index/Menu.scala
+++ b/src/main/scala/reading/component/index/Menu.scala
@@ -1,7 +1,5 @@
 package reading.component.index
 
-import org.scalajs.dom
-
 import rx._
 import Ctx.Owner.Unsafe._
 
@@ -24,29 +22,27 @@ object Menu {
 
         header(showFiltersMenu, filters().length),
 
-        filters().find(_.kind == FilterKind.Grade) match {
-          case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_)))
-          case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade))
-        },
-        group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
-        group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
-        group(books, filters, "Niveau", Level.values.map(Filter.apply(_))),
-        group(books, filters, "Période", Period.values.map(Filter.apply(_)))
+        div(
+          MenuStyle.groups,
+          filters().find(_.kind == FilterKind.Grade) match {
+            case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_)))
+            case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade))
+          },
+          group(books, filters, "Theme", Theme.values.map(Filter.apply(_))),
+          group(books, filters, "Genre", Genre.values.map(Filter.apply(_))),
+          group(books, filters, "Niveau", Level.values.map(Filter.apply(_))),
+          group(books, filters, "Période", Period.values.map(Filter.apply(_)))
+        ),
+
+        footer(Rx(books().length), filters, showFiltersMenu)
       )
     }
 
   def header(showFiltersMenu: Var[Boolean], count: Int): HtmlTag =
     div(
       MenuStyle.header,
-      span(
-        MenuStyle.close,
-        RxAttr(onclick, Rx(() => {
-          showFiltersMenu() = false
-          dom.document.body.style.overflowY = "scroll"
-        }))
-      ),
       "Filtrer",
-      if (count > 0) span(MenuStyle.count, count) else span("")
+      if (count > 0) span(MenuStyle.filtersCount, count) else span("")
     )
 
   def group(
@@ -72,10 +68,15 @@ object Menu {
         MenuStyle.filterGroup,
         div(
           MenuStyle.filterTitle,
-          parentFilter.map(filter =>
-            RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))).getOrElse(""),
+          parentFilter.map { filter =>
+            RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))
+          }.getOrElse(""),
           if (parentFilter.isDefined) MenuStyle.activeFilter else "",
-          name
+          name,
+          RxTag { implicit context =>
+            val count = filters().filter(f => groupFilters.exists(Filter.equals(f, _))).length
+            if (count > 0) span(MenuStyle.filterTitleCount, count) else span("")
+          }
         ),
         div(
           filtersWithCount().map {
@@ -89,7 +90,10 @@ object Menu {
                   filters,
                   if (isActive) Filter.remove(filters(), filter) else filter +: filters()
                 ))),
-                span(s"${filter.name.capitalize} ($count)")
+                span(
+                  span(filter.name.capitalize),
+                  span(MenuStyle.filterCount, count)
+                )
               )
             }
           }
@@ -101,4 +105,22 @@ object Menu {
     filters() = newFilters
     Route.push(Route.Books(newFilters))
   }
+
+  def footer(bookCount: Rx[Int], filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean]): HtmlTag =
+    div(
+      MenuStyle.footer,
+      div(
+        MenuStyle.clear,
+        RxAttr(onclick, Rx(() => filters() = Nil)),
+        "Effacer"
+      ),
+      div(
+        MenuStyle.returnToBooks,
+        RxAttr(onclick, Rx(() => showFiltersMenu() = false)),
+        "Afficher",
+        RxTag { implicit context =>
+          span(MenuStyle.bookCount, bookCount())
+        }
+      )
+    )
 }
diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala
index 6e79113..e8f970e 100644
--- a/src/main/scala/reading/component/index/style/BookDetail.scala
+++ b/src/main/scala/reading/component/index/style/BookDetail.scala
@@ -2,45 +2,44 @@ package reading.component.index.style
 
 import scalacss.Defaults._
 
-import reading.Media
 import reading.component.style.{ Color => C }
 
 object BookDetail extends StyleSheet.Inline {
   import dsl._
 
-  val title = style(
-    display.inlineBlock,
-    fontSize(18.px),
-    fontWeight.bold,
-    marginBottom(20.px),
-    color(C.congoBrown.value)
-  )
-
-  val author = style(
-    display.inlineBlock
-  )
-
   val detail = style(
     display.flex,
     flexWrap.wrap,
-    justifyContent.center
+    justifyContent.spaceAround
   )
 
   val cover = style(
-    height(300.px),
-    marginRight(30.px),
-    Media.mobile(marginBottom(30.px))
+    height(400.px),
+    marginBottom(30.px)
   )
 
   val item = style(
     lineHeight(25.px),
-    marginBottom(4.px)
+    margin(0.px, 15.px, 15.px),
+    &.lastChild(marginBottom(0.px))
   )
 
-  val itemKey = style(
+  val itemName = style(
     fontWeight.bold,
-    marginRight(10.px)
+    textTransform.uppercase,
+    marginBottom(10.px)
+  )
+
+  val itemValues = style(
+    marginLeft(15.px)
   )
 
-  val itemValue = style()
+  val itemValue = style(
+    marginBottom(5.px),
+    &.before(
+      content := "\"•\"",
+      color(C.stiletto.value),
+      marginRight(10.px)
+    )
+  )
 }
diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala
index 33e1cb3..f5deb53 100644
--- a/src/main/scala/reading/component/index/style/Books.scala
+++ b/src/main/scala/reading/component/index/style/Books.scala
@@ -10,7 +10,7 @@ object Books extends StyleSheet.Inline {
   val books = style(
     display.flex,
     flexWrap.wrap,
-    justifyContent.center
+    justifyContent.spaceAround
   )
 
   val book = style(
diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala
index 643dd8e..c29bd56 100644
--- a/src/main/scala/reading/component/index/style/Header.scala
+++ b/src/main/scala/reading/component/index/style/Header.scala
@@ -3,7 +3,7 @@ package reading.component.index.style
 import scalacss.Defaults._
 
 import reading.Media
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Button, Count }
 
 object Header extends StyleSheet.Inline {
   import dsl._
@@ -16,22 +16,14 @@ object Header extends StyleSheet.Inline {
   val showFiltersMenu = style(
     Media.desktop(display.none),
     Media.mobile(
-      display.flex,
-      justifyContent.center,
-      alignItems.center,
-      width(100.%%),
-      backgroundColor(C.englishWalnut.value),
-      color(C.white.value),
-      border(1.px, solid, C.congoBrown.value),
-      borderRadius(4.px),
-      marginBottom(20.px),
-      padding(10.px, 0.px),
-      cursor.pointer
+      Button.simple,
+      marginBottom(20.px)
     )
   )
 
   val filtersCount = style(
-    Count.count
+    Count.major,
+    marginLeft(20.px)
   )
 
   val filters = style(
diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala
index 38620e8..fca2bce 100644
--- a/src/main/scala/reading/component/index/style/Menu.scala
+++ b/src/main/scala/reading/component/index/style/Menu.scala
@@ -3,7 +3,7 @@ package reading.component.index.style
 import scalacss.Defaults._
 
 import reading.Media
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Count }
 
 object Menu extends StyleSheet.Inline {
   import dsl._
@@ -28,24 +28,13 @@ object Menu extends StyleSheet.Inline {
     textTransform.uppercase,
     fontWeight.bold,
     letterSpacing(1.px),
-    marginBottom(20.px),
+    Media.desktop(marginBottom(20.px)),
     Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)")
   )
 
-  val close = style(
-    Media.desktop(display.none),
-    Media.mobile(
-      position.absolute,
-      top(0.px),
-      left(0.px),
-      width(100.%%),
-      height(100.%%),
-      cursor.pointer
-    )
-  )
-
-  val count = style(
-    Count.count
+  val filtersCount = style(
+    Count.major,
+    marginLeft(20.px)
   )
 
   val show = style(
@@ -63,35 +52,100 @@ object Menu extends StyleSheet.Inline {
     )
   )
 
-  val filterGroup = style()
-
-  private val filterCommon = style(
-    display.flex,
-    alignItems.center,
-    width(100.%%),
-    padding(5.px, 30.px),
-    textAlign.left
+  val groups = style(
+    Media.mobile(
+      height :=! "calc(100% - 120px)",
+      overflowY.auto
+    )
   )
 
+  val filterGroup = style()
+
   val filterTitle = style(
-    filterCommon,
+    Commons.filter(),
     minHeight(50.px),
     fontWeight.bold,
     textTransform.uppercase,
     letterSpacing(1.px),
-    marginBottom(10.px)
+    Media.desktop(marginBottom(10.px))
   )
 
-  val filter = style(
-    filterCommon,
+  val filterTitleCount = style(
+    Count.major,
     marginLeft(10.px),
+    color.white,
+    fontSize(12.px),
+    width(20.px),
+    height(20.px)
+  )
+
+  val filter = style(
+    Commons.filter(additionalLeftPadding = 10),
     minHeight(40.px),
     color.inherit,
-    &.lastChild(marginBottom(30.px))
+    &.lastChild(
+      Media.desktop(marginBottom(30.px)),
+      Media.mobile(marginBottom(15.px))
+    ),
+    &.hover(color(C.stiletto.value))
   )
 
   val activeFilter = style(
     color(C.stiletto.value),
+    fontWeight.bold,
+    cursor.pointer
+  )
+
+  val filterCount = style(
+    Count.minor
+  )
+
+  val footer = style(
+    Media.desktop(display.none),
+    Media.mobile(
+      display.flex,
+      width(100.%%),
+      height(60.px)
+    )
+  )
+
+  val clear = style(
+    Commons.footerButton,
+    border(2.px, solid, C.gray.value)
+  )
+
+  val returnToBooks = style(
+    Commons.footerButton,
+    backgroundColor(C.stiletto.value),
+    color(C.white.value)
+  )
+
+  val bookCount = style(
+    Count.minor,
+    color(C.white.value)
+  )
+}
+
+object Commons extends StyleSheet.Inline {
+  import dsl._
+
+  def filter(additionalLeftPadding: Int = 0) = style(
+    display.flex,
+    alignItems.center,
+    width(100.%%),
+    padding(5.px, 15.px, 5.px, (15 + additionalLeftPadding).px),
+    textAlign.left
+  )
+
+  val footerButton = style(
+    display.flex,
+    width(50.%%),
+    justifyContent.center,
+    alignItems.center,
+    margin(5.px),
+    textTransform.uppercase,
+    fontSize(14.px),
+    fontWeight.bold,
     cursor.pointer
   )
 }
diff --git a/src/main/scala/reading/component/style/Button.scala b/src/main/scala/reading/component/style/Button.scala
new file mode 100644
index 0000000..de02b1a
--- /dev/null
+++ b/src/main/scala/reading/component/style/Button.scala
@@ -0,0 +1,22 @@
+package reading.component.style
+
+import scalacss.Defaults._
+
+import reading.component.style.{ Color => C }
+
+object Button extends StyleSheet.Inline {
+  import dsl._
+
+  val simple = style(
+    display.flex,
+    justifyContent.center,
+    alignItems.center,
+    width(100.%%),
+    backgroundColor(C.englishWalnut.value),
+    color(C.white.value),
+    border(1.px, solid, C.congoBrown.value),
+    borderRadius(4.px),
+    padding(12.px, 0.px),
+    cursor.pointer
+  )
+}
diff --git a/src/main/scala/reading/component/index/style/Count.scala b/src/main/scala/reading/component/style/Count.scala
index cc1eb80..e036bce 100644
--- a/src/main/scala/reading/component/index/style/Count.scala
+++ b/src/main/scala/reading/component/style/Count.scala
@@ -1,4 +1,4 @@
-package reading.component.index.style
+package reading.component.style
 
 import scalacss.Defaults._
 
@@ -7,14 +7,21 @@ import reading.component.style.{ Color => C }
 object Count extends StyleSheet.Inline {
   import dsl._
 
-  val count = style(
+  val major = style(
     display.flex,
     alignItems.center,
     justifyContent.center,
     backgroundColor(C.stiletto.value),
     width(25.px),
     height(25.px),
-    borderRadius(50.%%),
-    marginLeft(20.px)
+    borderRadius(50.%%)
+  )
+
+  val minor = style(
+    color(C.gray.value),
+    marginLeft(5.px),
+    fontWeight.normal,
+    &.before(content := "\"(\""),
+    &.after(content := "\")\"")
   )
 }
diff --git a/src/main/scala/reading/component/style/Global.scala b/src/main/scala/reading/component/style/Global.scala
index db7ef34..8c70b45 100644
--- a/src/main/scala/reading/component/style/Global.scala
+++ b/src/main/scala/reading/component/style/Global.scala
@@ -39,6 +39,7 @@ object Global extends StyleSheet.Standalone {
     display.flex,
     backgroundColor(initial),
     color(C.black.value),
-    border.none
+    border.none,
+    fontSize.inherit
   )
 }
diff --git a/src/main/scala/reading/component/widget/Popup.scala b/src/main/scala/reading/component/widget/Popup.scala
index f47bc1c..86b47bf 100644
--- a/src/main/scala/reading/component/widget/Popup.scala
+++ b/src/main/scala/reading/component/widget/Popup.scala
@@ -10,7 +10,6 @@ import scalacss.Defaults._
 import scalacss.ScalatagsCss._
 
 import reading.component.widget.style.{ Popup => PopupStyle }
-import reading.component.style.{ Color => C }
 import reading.utils.{ RxAttr }
 
 object Popup {
@@ -30,9 +29,9 @@ object Popup {
         PopupStyle.content,
         content,
         button(
-          PopupStyle.cross,
+          PopupStyle.close,
           RxAttr(onclick, Rx(() => close(onClose))),
-          Cross(20.px, C.stiletto.value)
+          "Fermer"
         )
       )
     )
diff --git a/src/main/scala/reading/component/widget/style/Cross.scala b/src/main/scala/reading/component/widget/style/Cross.scala
index 485e1e9..2e4b990 100644
--- a/src/main/scala/reading/component/widget/style/Cross.scala
+++ b/src/main/scala/reading/component/widget/style/Cross.scala
@@ -15,7 +15,7 @@ object Cross extends StyleSheet.Inline {
     content := "\"\"",
     position.absolute,
     left(40.%%),
-    width(20.%%),
+    width(30.%%),
     height(100.%%),
 
     transform := "rotate(45deg)"
@@ -25,7 +25,7 @@ object Cross extends StyleSheet.Inline {
     content := "\"\"",
     position.absolute,
     left(40.%%),
-    width(20.%%),
+    width(30.%%),
     height(100.%%),
 
     transform := "rotate(-45deg)"
diff --git a/src/main/scala/reading/component/widget/style/Popup.scala b/src/main/scala/reading/component/widget/style/Popup.scala
index ea67d9e..8b77e98 100644
--- a/src/main/scala/reading/component/widget/style/Popup.scala
+++ b/src/main/scala/reading/component/widget/style/Popup.scala
@@ -3,7 +3,7 @@ package reading.component.widget.style
 import scalacss.Defaults._
 
 import reading.Media
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Button }
 
 object Popup extends StyleSheet.Inline {
   import dsl._
@@ -46,17 +46,15 @@ object Popup extends StyleSheet.Inline {
     ),
     Media.mobile(
       width(100.%%),
-      height(100.%%)
+      height(100.%%),
+      overflowY.auto
     ),
-    padding(30.px)
+    padding(30.px, 30.px, 0.px, 30.px)
   )
 
-  val cross = style(
-    position.absolute,
-    top(30.px),
-    right(30.px),
-    width(20.px),
-    height(20.px),
-    cursor.pointer
+  val close = style(
+    Button.simple,
+    marginTop(20.px),
+    marginBottom(30.px)
   )
 }