Merge branch 'with-ghcjs' into 'master'

Use Haskell on the frontend

See merge request guyonvarch/shared-cost!2

1 files changed, 165 insertions, 0 deletions

diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
new file mode 100644
index 0000000..c67db7c
--- /dev/null
+++ b/server/src/Design/Global.hs
@@ -0,0 +1,165 @@
+module Design.Global
+  ( globalDesign
+  ) where
+
+import           Clay
+import           Clay.Color       as C
+import           Data.Text.Lazy   (Text)
+
+import qualified Design.Appearing as Appearing
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Errors    as Errors
+import qualified Design.Form      as Form
+import qualified Design.Helper    as Helper
+import qualified Design.Loadable  as Loadable
+import qualified Design.Media     as Media
+import qualified Design.Modal     as Modal
+import qualified Design.Tooltip   as Tooltip
+import qualified Design.Views     as Views
+
+globalDesign :: Text
+globalDesign = renderWith compact [] global
+
+global :: Css
+global = do
+  ".errors" ? Errors.design
+  Appearing.design
+  Modal.design
+  ".tooltip" ? Tooltip.design
+  Views.design
+  Form.design
+  Loadable.design
+
+  spinKeyframes
+  appearKeyframe
+
+  html ? do
+    height (pct 100)
+
+  "g-Body--Modal" ?
+    overflowY hidden
+
+  body ? do
+    position relative
+    minWidth (px 320)
+    height (pct 100)
+    fontFamily ["Cantarell"] [sansSerif]
+    Media.tablet $ do
+      fontSize (px 15)
+      button ? fontSize (px 15)
+      input ? fontSize (px 15)
+    Media.mobile $ do
+      fontSize (px 14)
+      button ? fontSize (px 14)
+      input ? fontSize (px 14)
+
+  ".app" ? do
+    appearAnimation
+    display flex
+    height (pct 100)
+    flexDirection column
+
+  -- "main" ?
+  --   appearAnimation
+
+  ".pageSpinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    flexGrow 1
+
+  ".spinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    height (pct 100)
+    paddingBottom (pct 10)
+
+    before & do
+      display block
+      content (stringContent "")
+      width (px 50)
+      height (px 50)
+      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
+      sym borderRadius (pct 50)
+      borderTopColor Color.chestnutRose
+      spinKeyframes
+      spinAnimation
+
+  a ? cursor pointer
+
+  input ? fontSize inherit
+
+  h1 ? do
+    color Color.chestnutRose
+    lineHeight (em 1.3)
+
+    Media.desktop $ fontSize (px 24)
+    Media.tablet $ fontSize (px 22)
+    Media.mobile $ fontSize (px 20)
+
+  ul ? do
+    "margin-top" -: "1vh"
+    "margin-bottom" -: "3vh"
+    "margin-left" -: "1vh"
+    li <? do
+      "margin-bottom" -: "2vh"
+      before & do
+        content (stringContent "• ")
+        color Color.chestnutRose
+        "margin-right" -: "0.3vw"
+      ul <? do
+        "margin-left" -: "3vh"
+        "margin-top" -: "2vh"
+
+  ".dialog" ? ".content" ? button ? do
+    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+  svg ? height (pct 100)
+
+  button ? do
+    position relative
+
+    ".content" ? do
+      display flex
+
+    svg # ".loader" ? do
+      display none
+      position absolute
+
+    ".waiting" & do
+      ".content" ? do
+        opacity 0
+      svg # ".loader" ? do
+        display block
+        spinAnimation
+
+  select ? cursor pointer
+
+spinAnimation :: Css
+spinAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeInOut
+  animationIterationCount infinite
+
+spinKeyframes :: Css
+spinKeyframes = keyframes
+  "rotate"
+  [ (100, "transform" -: "rotate(360deg)")
+  ]
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.2)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
+  ]