From 52fc052d859d442ed734470f305bd4891f16575c Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 8 Feb 2017 10:18:23 +0100
Subject: Simplify CSS page style

---
 src/main/scala/reading/component/index/Books.scala |  4 +-
 .../scala/reading/component/index/style/Menu.scala |  6 +--
 .../scala/reading/component/style/Global.scala     | 11 ++--
 src/main/scala/reading/component/style/Index.scala | 18 ++++++-
 .../scala/reading/component/widget/Modal.scala     | 35 +++++++++++++
 .../scala/reading/component/widget/Popup.scala     | 44 ----------------
 .../reading/component/widget/style/Modal.scala     | 61 ++++++++++++++++++++++
 .../reading/component/widget/style/Popup.scala     | 60 ---------------------
 8 files changed, 120 insertions(+), 119 deletions(-)
 create mode 100644 src/main/scala/reading/component/widget/Modal.scala
 delete mode 100644 src/main/scala/reading/component/widget/Popup.scala
 create mode 100644 src/main/scala/reading/component/widget/style/Modal.scala
 delete mode 100644 src/main/scala/reading/component/widget/style/Popup.scala

(limited to 'src')

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/Modal.scala b/src/main/scala/reading/component/widget/style/Modal.scala
new file mode 100644
index 0000000..bfcc276
--- /dev/null
+++ b/src/main/scala/reading/component/widget/style/Modal.scala
@@ -0,0 +1,61 @@
+package reading.component.widget.style
+
+import scalacss.Defaults._
+
+import reading.Media
+import reading.component.style.{ Color => C, Button }
+
+object Modal extends StyleSheet.Inline {
+  import dsl._
+
+  val modal = style(
+    display.flex,
+    justifyContent.center,
+    alignItems.center,
+    position.fixed,
+    width(100.%%),
+    height(100.%%),
+    top(0.px),
+    right(0.px),
+    bottom(0.px),
+    left(0.px),
+    overflowY.scroll
+  )
+
+  val curtain = style(
+    Media.desktop(
+      width(100.%%),
+      height(100.%%),
+      position.absolute,
+      top(0.px),
+      left(0.px),
+      backgroundColor(C.black.value),
+      opacity(0.5),
+      cursor.pointer
+    ),
+    Media.mobile(
+      display.none
+    )
+  )
+
+  val content = style(
+    position.relative,
+    backgroundColor(C.white.value),
+    Media.desktop(
+      width(50.%%),
+      borderRadius(5.px)
+    ),
+    Media.mobile(
+      width(100.%%),
+      height(100.%%),
+      overflowY.auto
+    ),
+    padding(30.px, 30.px, 0.px, 30.px)
+  )
+
+  val close = style(
+    Button.simple,
+    marginTop(20.px),
+    marginBottom(30.px)
+  )
+}
diff --git a/src/main/scala/reading/component/widget/style/Popup.scala b/src/main/scala/reading/component/widget/style/Popup.scala
deleted file mode 100644
index 8b77e98..0000000
--- a/src/main/scala/reading/component/widget/style/Popup.scala
+++ /dev/null
@@ -1,60 +0,0 @@
-package reading.component.widget.style
-
-import scalacss.Defaults._
-
-import reading.Media
-import reading.component.style.{ Color => C, Button }
-
-object Popup extends StyleSheet.Inline {
-  import dsl._
-
-  val popup = style(
-    display.flex,
-    justifyContent.center,
-    alignItems.center,
-    position.fixed,
-    width(100.%%),
-    height(100.%%),
-    top(0.px),
-    right(0.px),
-    bottom(0.px),
-    left(0.px)
-  )
-
-  val curtain = style(
-    Media.desktop(
-      width(100.%%),
-      height(100.%%),
-      position.absolute,
-      top(0.px),
-      left(0.px),
-      backgroundColor(C.black.value),
-      opacity(0.5),
-      cursor.pointer
-    ),
-    Media.mobile(
-      display.none
-    )
-  )
-
-  val content = style(
-    position.relative,
-    backgroundColor(C.white.value),
-    Media.desktop(
-      width(50.%%),
-      borderRadius(5.px)
-    ),
-    Media.mobile(
-      width(100.%%),
-      height(100.%%),
-      overflowY.auto
-    ),
-    padding(30.px, 30.px, 0.px, 30.px)
-  )
-
-  val close = style(
-    Button.simple,
-    marginTop(20.px),
-    marginBottom(30.px)
-  )
-}
-- 
cgit v1.2.3