From b2b7091c90570945b9ba525867eb9b7a246fa1a3 Mon Sep 17 00:00:00 2001 From: Joris Date: Mon, 13 Feb 2017 20:03:58 +0100 Subject: Fix modal style --- .../reading/component/index/style/Header.scala | 4 +++- .../scala/reading/component/widget/Modal.scala | 4 ++-- .../reading/component/widget/style/Modal.scala | 27 +++++++++++++--------- 3 files changed, 21 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala index d2149a7..2260c91 100644 --- a/src/main/scala/reading/component/index/style/Header.scala +++ b/src/main/scala/reading/component/index/style/Header.scala @@ -28,7 +28,8 @@ object Header extends StyleSheet.Inline { val filters = style( display.flex, - marginBottom(30.px), + flexWrap.wrap, + marginBottom(15.px), Media.mobile(display.none) ) @@ -37,6 +38,7 @@ object Header extends StyleSheet.Inline { 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), diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala index 02c42be..81d0c78 100644 --- a/src/main/scala/reading/component/widget/Modal.scala +++ b/src/main/scala/reading/component/widget/Modal.scala @@ -18,12 +18,12 @@ object Modal { Animate( id = modalId, - duration = 300, + duration = 250, transition = Transition.easeOut, animate = (progress, element) => { element.style.opacity = s"$progress" element.childNodes(2) match { - case e: HTMLElement => e.style.transform = s"translateY(${40 * (progress - 1)}px)" + case e: HTMLElement => e.style.transform = s"scale(${0.85 + 0.15 * progress})" } } ) diff --git a/src/main/scala/reading/component/widget/style/Modal.scala b/src/main/scala/reading/component/widget/style/Modal.scala index ae37c4b..1872344 100644 --- a/src/main/scala/reading/component/widget/style/Modal.scala +++ b/src/main/scala/reading/component/widget/style/Modal.scala @@ -11,7 +11,6 @@ object Modal extends StyleSheet.Inline { val modal = style( display.flex, justifyContent.center, - alignItems.center, position.fixed, width(100.%%), height(100.%%), @@ -19,24 +18,30 @@ object Modal extends StyleSheet.Inline { right(0.px), bottom(0.px), left(0.px), - overflowY.scroll, - opacity(0) + opacity(0), + overflowY.scroll ) val curtain = style( - width(100.%%), - height(100.%%), - position.absolute, - top(0.px), - left(0.px), - backgroundColor(C.black.value), - opacity(0.7), - cursor.pointer + Media.desktop( + width(100.%%), + height(100.%%), + position.fixed, + top(0.px), + left(0.px), + backgroundColor(C.black.value), + opacity(0.7), + cursor.pointer + ), + Media.mobile( + display.none + ) ) val content = style( position.relative, backgroundColor(C.white.value), + margin.auto, Media.desktop( width(50.%%), borderRadius(5.px) -- cgit v1.2.3