Simplify CSS page style

7 files changed, 63 insertions, 62 deletions

diff --git a/src/main/scala/reading/component/index/Books.scala b/src/main/scala/reading/component/index/Books.scala
index 66d4423..20b308d 100644
--- a/src/main/scala/reading/component/index/Books.scala
+++ b/src/main/scala/reading/component/index/Books.scala
@@ -8,7 +8,7 @@ import scalacss.Defaults._
 import scalacss.ScalatagsCss._
 
 import reading.component.index.style.{ Books => BooksStyle }
-import reading.component.widget.Popup
+import reading.component.widget.Modal
 import reading.models.{ Book }
 import reading.utils.{ RxTag, RxAttr }
 
@@ -39,7 +39,7 @@ object Books {
 
           RxTag { implicit context =>
             focus() match {
-              case Some(book) => Popup(onClose = focus() = None)(BookDetail(book))
+              case Some(book) => Modal(onClose = focus() = None)(BookDetail(book))
               case None => span("")
             }
           }
diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala
index fca2bce..12b0646 100644
--- a/src/main/scala/reading/component/index/style/Menu.scala
+++ b/src/main/scala/reading/component/index/style/Menu.scala
@@ -10,11 +10,9 @@ object Menu extends StyleSheet.Inline {
 
   val menu = style(
     Media.mobile(display.none),
-    backgroundColor(C.englishWalnut.value),
     color(C.white.value),
-    width(280.px),
-    height(100.%%),
-    boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
+    position.relative,
+    width(280.px)
   )
 
   val header = style(
diff --git a/src/main/scala/reading/component/style/Global.scala b/src/main/scala/reading/component/style/Global.scala
index 8c70b45..7501ec3 100644
--- a/src/main/scala/reading/component/style/Global.scala
+++ b/src/main/scala/reading/component/style/Global.scala
@@ -13,14 +13,9 @@ object Global extends StyleSheet.Standalone {
 
   "body" - (
     position.absolute,
-    top(0.px),
-    right(0.px),
-    bottom(0.px),
-    left(0.px)
-  )
-
-  "body > *" - (
-    minHeight(100.%%)
+    width(100.%%),
+    height(100.%%),
+    overflowY.hidden
   )
 
   "a" - (
diff --git a/src/main/scala/reading/component/style/Index.scala b/src/main/scala/reading/component/style/Index.scala
index 9f1d261..99e4746 100644
--- a/src/main/scala/reading/component/style/Index.scala
+++ b/src/main/scala/reading/component/style/Index.scala
@@ -2,12 +2,28 @@ package reading.component.style
 
 import scalacss.Defaults._
 
+import reading.Media
+import reading.component.style.{ Color => C }
+
 object Index extends StyleSheet.Inline {
   import dsl._
 
   val page = style(
     display.flex,
-    minHeight(inherit)
+    overflowY.scroll,
+    height(100.%%),
+
+    Media.desktop(
+      &.before(
+        content := "\"\"",
+        display.block,
+        position.fixed,
+        width(280.px),
+        height(100.%%),
+        backgroundColor(C.englishWalnut.value),
+        boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
+      )
+    )
   )
 
   val main = style(
diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala
new file mode 100644
index 0000000..fe10d1f
--- /dev/null
+++ b/src/main/scala/reading/component/widget/Modal.scala
@@ -0,0 +1,35 @@
+package reading.component.widget
+
+import rx._
+import Ctx.Owner.Unsafe._
+
+import scalatags.JsDom.all._
+import scalacss.Defaults._
+import scalacss.ScalatagsCss._
+
+import reading.component.widget.style.{ Modal => ModalStyle }
+import reading.utils.{ RxAttr }
+
+object Modal {
+  def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = {
+    div(
+      ModalStyle.render,
+      ModalStyle.modal,
+
+      div(
+        ModalStyle.curtain,
+        RxAttr(onclick, Rx(() => onClose))
+      ),
+
+      div(
+        ModalStyle.content,
+        content,
+        button(
+          ModalStyle.close,
+          RxAttr(onclick, Rx(() => onClose)),
+          "Fermer"
+        )
+      )
+    )
+  }
+}
diff --git a/src/main/scala/reading/component/widget/Popup.scala b/src/main/scala/reading/component/widget/Popup.scala
deleted file mode 100644
index 86b47bf..0000000
--- a/src/main/scala/reading/component/widget/Popup.scala
+++ /dev/null
@@ -1,44 +0,0 @@
-package reading.component.widget
-
-import org.scalajs.dom
-
-import rx._
-import Ctx.Owner.Unsafe._
-
-import scalatags.JsDom.all._
-import scalacss.Defaults._
-import scalacss.ScalatagsCss._
-
-import reading.component.widget.style.{ Popup => PopupStyle }
-import reading.utils.{ RxAttr }
-
-object Popup {
-  def apply(onClose: => Unit)(content: HtmlTag): HtmlTag = {
-    dom.document.body.style.overflowY = "hidden"
-
-    div(
-      PopupStyle.render,
-      PopupStyle.popup,
-
-      div(
-        PopupStyle.curtain,
-        RxAttr(onclick, Rx(() => close(onClose)))
-      ),
-
-      div(
-        PopupStyle.content,
-        content,
-        button(
-          PopupStyle.close,
-          RxAttr(onclick, Rx(() => close(onClose))),
-          "Fermer"
-        )
-      )
-    )
-  }
-
-  private def close(onClose: => Unit): Unit = {
-    dom.document.body.style.overflowY = "scroll"
-    onClose
-  }
-}
diff --git a/src/main/scala/reading/component/widget/style/Popup.scala b/src/main/scala/reading/component/widget/style/Modal.scala
index 8b77e98..bfcc276 100644
--- a/src/main/scala/reading/component/widget/style/Popup.scala
+++ b/src/main/scala/reading/component/widget/style/Modal.scala
@@ -5,10 +5,10 @@ import scalacss.Defaults._
 import reading.Media
 import reading.component.style.{ Color => C, Button }
 
-object Popup extends StyleSheet.Inline {
+object Modal extends StyleSheet.Inline {
   import dsl._
 
-  val popup = style(
+  val modal = style(
     display.flex,
     justifyContent.center,
     alignItems.center,
@@ -18,7 +18,8 @@ object Popup extends StyleSheet.Inline {
     top(0.px),
     right(0.px),
     bottom(0.px),
-    left(0.px)
+    left(0.px),
+    overflowY.scroll
   )
 
   val curtain = style(