From 69c7047dfdd8f1712e975f2d7f0c2dd24d5366c7 Mon Sep 17 00:00:00 2001 From: Juan Edi Date: Fri, 22 Jan 2021 16:31:33 -0300 Subject: [PATCH 1/3] Fix Confetti demo We don't need a positioned parent anymore. We may want to change this in the future if we ever need to scope confetti to a container, but seems unlikely given hoe we've been using it so far. --- src/Nri/Ui/Confetti/V2.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Nri/Ui/Confetti/V2.elm b/src/Nri/Ui/Confetti/V2.elm index f42b4286..233e7443 100644 --- a/src/Nri/Ui/Confetti/V2.elm +++ b/src/Nri/Ui/Confetti/V2.elm @@ -59,7 +59,7 @@ view (System system _) = system |> ParticleSystem.viewCustom viewConfetti (Html.div - [ Attributes.style "position" "absolute" + [ Attributes.style "position" "fixed" , Attributes.style "top" "0" , Attributes.style "left" "0" , Attributes.style "width" "100%" From 1ef2154677e74a30e131c9dc9feb93838393427a Mon Sep 17 00:00:00 2001 From: Juan Edi Date: Fri, 22 Jan 2021 16:33:46 -0300 Subject: [PATCH 2/3] Use Css instead of Attributes.style --- src/Nri/Ui/Confetti/V2.elm | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/Nri/Ui/Confetti/V2.elm b/src/Nri/Ui/Confetti/V2.elm index 233e7443..176fb6ff 100644 --- a/src/Nri/Ui/Confetti/V2.elm +++ b/src/Nri/Ui/Confetti/V2.elm @@ -59,12 +59,14 @@ view (System system _) = system |> ParticleSystem.viewCustom viewConfetti (Html.div - [ Attributes.style "position" "fixed" - , Attributes.style "top" "0" - , Attributes.style "left" "0" - , Attributes.style "width" "100%" - , Attributes.style "height" "100vh" - , Attributes.style "pointer-events" "none" + [ Attributes.css + [ Css.position Css.fixed + , Css.top Css.zero + , Css.left Css.zero + , Css.width (Css.pct 100) + , Css.height (Css.vh 100) + , Css.pointerEvents Css.none + ] ] ) From 153ddbb0ca5a1bf6bc4866e74853168c2a197fc6 Mon Sep 17 00:00:00 2001 From: Juan Edi Date: Fri, 22 Jan 2021 16:35:02 -0300 Subject: [PATCH 3/3] Don't show confetti if prefers-reduced-motion is set --- src/Nri/Ui/Confetti/V2.elm | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Nri/Ui/Confetti/V2.elm b/src/Nri/Ui/Confetti/V2.elm index 176fb6ff..830f5afe 100644 --- a/src/Nri/Ui/Confetti/V2.elm +++ b/src/Nri/Ui/Confetti/V2.elm @@ -17,6 +17,7 @@ Changes from V1: -} import Css exposing (Color) +import Css.Media exposing (withMediaQuery) import Html.Styled as Html import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors @@ -66,6 +67,8 @@ view (System system _) = , Css.width (Css.pct 100) , Css.height (Css.vh 100) , Css.pointerEvents Css.none + , withMediaQuery [ "(prefers-reduced-motion)" ] + [ Css.display Css.none ] ] ] )