Add detailed book page instead of a modal.

5 files changed, 150 insertions, 112 deletions

diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala
index f432fda..2488a8f 100644
--- a/src/main/scala/reading/component/index/style/BookDetail.scala
+++ b/src/main/scala/reading/component/index/style/BookDetail.scala
@@ -2,15 +2,25 @@ package reading.component.index.style
 
 import scalacss.Defaults._
 
-import reading.component.style.{ Color => C }
+import reading.component.style.{ Color => C, Button }
+import reading.Media
 
 object BookDetail extends StyleSheet.Inline {
   import dsl._
 
   val detail = style(
+    position.fixed,
+    height(100.%%),
+    top(0.px),
+    right(0.px),
+    padding(30.px, 30.px, 0.px, 30.px),
+    overflowY.scroll,
     display.flex,
     flexWrap.wrap,
-    justifyContent.spaceAround
+    justifyContent.spaceAround,
+    Media.desktop(width :=! "calc(100% - 280px)"),
+    Media.mobile(width(100.%%)),
+    opacity(0)
   )
 
   val cover = style(
@@ -18,32 +28,47 @@ object BookDetail extends StyleSheet.Inline {
     marginBottom(30.px)
   )
 
-  val items = style(
-    marginBottom(25.px)
+  val presentation = style(
+    Media.desktop(width(50.%%))
   )
 
-  val item = style(
-    lineHeight(25.px),
-    margin(0.px, 15.px, 15.px),
-    &.lastChild(marginBottom(0.px))
+  val title = style(
+    color(C.congoBrown.value),
+    fontSize(26.px),
+    fontWeight.bold,
+    marginBottom(1.em),
+    lineHeight(1.4.em)
+  )
+
+  val author = style(
+    fontSize(20.px),
+    marginBottom(1.em)
+  )
+
+  val resume = style(
+    textAlign.justify,
+    lineHeight(1.4.em),
+    marginBottom(2.em)
+  )
+
+  val definitions = style(
+    marginBottom(2.5.em)
   )
 
-  val itemName = style(
+  val definitionTerm = style(
     fontWeight.bold,
-    textTransform.uppercase,
-    marginBottom(10.px)
+    float.left,
+    marginRight(5.px),
+    lineHeight(1.4.em)
   )
 
-  val itemValues = style(
-    marginLeft(15.px)
+  val definitionDescription = style(
+    marginBottom(1.em),
+    lineHeight(1.4.em)
   )
 
-  val itemValue = style(
-    marginBottom(5.px),
-    &.before(
-      content := "\"•\"",
-      color(C.stiletto.value),
-      marginRight(10.px)
-    )
+  val close = style(
+    Button.simple,
+    marginBottom(1.em)
   )
 }
diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala
index ca52328..f7c1ffc 100644
--- a/src/main/scala/reading/component/index/style/Books.scala
+++ b/src/main/scala/reading/component/index/style/Books.scala
@@ -9,8 +9,23 @@ import reading.component.style.{ Color => C }
 object Books extends StyleSheet.Inline {
   import dsl._
 
+  val booksParent = style(
+    height(100.%%)
+  )
+
   val books = style(
     display.flex,
+    flexDirection.column,
+    height(100.%%),
+    opacity(0)
+  )
+
+  val listParent = style(
+    overflowY.scroll
+  )
+
+  val list = style(
+    display.flex,
     flexWrap.wrap,
     justifyContent.spaceAround
   )
diff --git a/src/main/scala/reading/component/index/style/Filters.scala b/src/main/scala/reading/component/index/style/Filters.scala
new file mode 100644
index 0000000..e4346a2
--- /dev/null
+++ b/src/main/scala/reading/component/index/style/Filters.scala
@@ -0,0 +1,69 @@
+package reading.component.index.style
+
+import scalacss.Defaults._
+
+import reading.Media
+import reading.component.style.{ Color => C, Button, Count }
+
+object Filters extends StyleSheet.Inline {
+  import dsl._
+
+  val filters = style(
+    Media.mobile(margin(0.px, 30.px, 10.px))
+  )
+
+  val showFiltersMenu = style(
+    Media.desktop(display.none),
+    Media.mobile(
+      Button.simple,
+      marginBottom(20.px)
+    )
+  )
+
+  val filtersCount = style(
+    Count.major,
+    marginLeft(20.px)
+  )
+
+  val values = style(
+    display.flex,
+    flexWrap.wrap,
+    alignItems.center,
+    Media.desktop(margin(0.px, 40.px, 10.px)),
+    Media.mobile(display.none)
+  )
+
+  private val box = style(
+    display.flex,
+    alignItems.center,
+    height(50.px),
+    marginRight(20.px),
+    marginBottom(10.px),
+    padding(15.px),
+    borderRadius(2.px),
+    border(1.px, solid, C.gray.lighten(60).value),
+    fontSize(18.px),
+    &.hover(cursor.pointer)
+  )
+
+  val clear = style(
+    box,
+    backgroundColor(C.mickado.value),
+    color(C.white.value),
+    &.hover(backgroundColor(C.mickado.lighten(30).value))
+  )
+
+  val filter = style(
+    box,
+    &.hover(borderColor(C.gray.lighten(80).value))
+  )
+
+  val name = style(
+    marginRight(10.px)
+  )
+
+  val cross = style(
+    width(15.px),
+    height(15.px)
+  )
+}
diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala
index 2eb6eb2..10ce059 100644
--- a/src/main/scala/reading/component/index/style/Header.scala
+++ b/src/main/scala/reading/component/index/style/Header.scala
@@ -3,73 +3,20 @@ package reading.component.index.style
 import scalacss.Defaults._
 
 import reading.Media
-import reading.component.style.{ Color => C, Button, Count }
+import reading.component.style.{ Color => C }
 
 object Header extends StyleSheet.Inline {
   import dsl._
 
   val header = style(
-    Media.desktop(margin(40.px)),
-    Media.mobile(margin(30.px))
-  )
-
-  val showFiltersMenu = style(
-    Media.desktop(display.none),
-    Media.mobile(
-      Button.simple,
-      marginBottom(20.px)
-    )
-  )
-
-  val filtersCount = style(
-    Count.major,
-    marginLeft(20.px)
-  )
-
-  val filters = style(
-    display.flex,
-    flexWrap.wrap,
-    marginBottom(15.px),
-    Media.mobile(display.none)
-  )
-
-  private val box = style(
-    display.flex,
-    alignItems.center,
-    padding(15.px),
-    marginRight(20.px),
-    marginBottom(15.px),
-    borderRadius(2.px),
-    border(1.px, solid, C.gray.lighten(60).value),
-    fontSize(18.px),
-    &.hover(cursor.pointer)
-  )
-
-  val clear = style(
-    box,
-    backgroundColor(C.mickado.value),
-    color(C.white.value),
-    &.hover(backgroundColor(C.mickado.lighten(30).value))
-  )
-
-  val filter = style(
-    box,
-    &.hover(borderColor(C.gray.lighten(80).value))
-  )
-
-  val name = style(
-    marginRight(10.px)
-  )
-
-  val cross = style(
-    width(15.px),
-    height(15.px)
+    margin(30.px, 0.px)
   )
 
   val searchAndCount = style(
     display.flex,
     flexWrap.wrap,
     alignItems.center,
+    Media.desktop(paddingLeft(40.px)),
     Media.mobile(justifyContent.center)
   )
 
@@ -78,7 +25,7 @@ object Header extends StyleSheet.Inline {
     Media.desktop(marginRight(30.px))
   )
 
-  val booksCount = style(
+  val count = style(
     fontSize(20.px),
     color(C.gray.value),
     Media.mobile(textAlign.center)
diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala
index dd74039..09f529c 100644
--- a/src/main/scala/reading/component/index/style/Menu.scala
+++ b/src/main/scala/reading/component/index/style/Menu.scala
@@ -9,28 +9,25 @@ object Menu extends StyleSheet.Inline {
   import dsl._
 
   val menu = style(
-    Media.mobile(display.none),
+    height(100.%%),
+    zIndex(1),
     Media.desktop(
+      backgroundColor(C.englishWalnut.value),
       color(C.white.value),
       position.relative,
       width(280.px)
-    )
-  )
-
-  val background = style(
-    Media.desktop(
+    ),
+    Media.mobile(
+      backgroundColor(C.white.value),
+      color(C.black.value),
       position.fixed,
-      width(280.px),
-      height(100.%%),
-      backgroundColor(C.englishWalnut.value),
-      boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
+      display.none,
+      width(100.%%)
     )
   )
 
-  val content = style(
-    position.relative,
-    width(100.%%),
-    height(100.%%)
+  val show = style(
+    Media.mobile(display.block)
   )
 
   val header = style(
@@ -44,7 +41,6 @@ object Menu extends StyleSheet.Inline {
     textTransform.uppercase,
     fontWeight.bold,
     letterSpacing(1.px),
-    Media.desktop(marginBottom(20.px)),
     Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)")
   )
 
@@ -53,28 +49,13 @@ object Menu extends StyleSheet.Inline {
     marginLeft(20.px)
   )
 
-  val show = style(
-    Media.mobile(
-      display.block,
-      position.fixed,
-      top(0.px),
-      left(0.px),
-      width(100.%%),
-      height(100.%%),
-      zIndex(1),
-      overflowY.scroll,
-      backgroundColor(C.white.value),
-      color(C.black.value)
-    )
-  )
-
   val empty = style()
 
   val groups = style(
-    Media.mobile(
-      height :=! "calc(100% - 120px)",
-      overflowY.auto
-    )
+    overflowY.scroll,
+    paddingTop(20.px),
+    Media.desktop(height :=! "calc(100% - 60px)"),
+    Media.mobile(height :=! "calc(100% - 120px)")
   )
 
   val filterTitle = style(
@@ -155,9 +136,10 @@ object Commons extends StyleSheet.Inline {
 
   val footerButton = style(
     display.flex,
-    width(50.%%),
+    flexGrow(1),
     justifyContent.center,
     alignItems.center,
+    height(50.px),
     margin(5.px),
     textTransform.uppercase,
     fontSize(14.px),