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