From 898e7ed11ab0958fcdaf65b99b33f7b04787630a Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 24 Sep 2017 22:14:48 +0200
Subject: Bootstrap with GHCJS and reflex:

- setup login and logout,
- first draft of payment view.
---
 src/server/Design/Helper.hs | 46 ++++++++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 15 deletions(-)

(limited to 'src/server/Design/Helper.hs')

diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 869616d..41528ed 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,8 +3,8 @@
 module Design.Helper
   ( clearFix
   , button
+  , waitable
   , input
-  , iconButton
   , centeredWithMargin
   , verticalCentering
   ) where
@@ -13,8 +13,6 @@ import Prelude hiding (span)
 
 import Clay hiding (button, input)
 
-import Data.Monoid ((<>))
-
 import Design.Constants
 import Design.Color as Color
 
@@ -27,6 +25,9 @@ clearFix =
 
 button :: Color -> Color -> Size a -> (Color -> Color) -> Css
 button backgroundCol textCol h focusOp = do
+  display flex
+  alignItems center
+  justifyContent center
   backgroundColor backgroundCol
   padding (px 0) (px 10) (px 0) (px 10)
   color textCol
@@ -38,19 +39,20 @@ button backgroundCol textCol h focusOp = do
   textAlign (alignSide sideCenter)
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
+  waitable
 
-iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
-iconButton backgroundCol textCol h focusOp = do
-  button backgroundCol textCol h focusOp
-  i <> span ? do
-    height h
-    lineHeight h
-  span ? do
-    display inlineBlock
-    marginLeft (px 20)
-  i ? do
-    marginLeft (px 15)
-    marginRight (px 20)
+waitable :: Css
+waitable = do
+  svg # ".loader" ? display none
+  ".waiting" & do
+    ".content" ? do
+      display flex
+      fontSize (px 0)
+      opacity 0
+    svg # ".loader" ? do
+      display block
+      rotateKeyframes
+      rotateAnimation
 
 input :: Double -> Css
 input h = do
@@ -72,3 +74,17 @@ verticalCentering = do
   position absolute
   top (pct 50)
   "transform" -: "translateY(-50%)"
+
+rotateAnimation :: Css
+rotateAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeOut
+  animationIterationCount infinite
+
+rotateKeyframes :: Css
+rotateKeyframes = keyframes
+  "rotate"
+  [ (0, "transform" -: "rotate(0deg)")
+  , (100, "transform" -: "rotate(360deg)")
+  ]
-- 
cgit v1.2.3


From 27e11b20b06f2f2dbfb56c0998a63169b4b8abc4 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 8 Nov 2017 23:47:26 +0100
Subject: Use a better project structure

---
 src/server/Design/Helper.hs | 90 ---------------------------------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 src/server/Design/Helper.hs

(limited to 'src/server/Design/Helper.hs')

diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
deleted file mode 100644
index 41528ed..0000000
--- a/src/server/Design/Helper.hs
+++ /dev/null
@@ -1,90 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.Helper
-  ( clearFix
-  , button
-  , waitable
-  , input
-  , centeredWithMargin
-  , verticalCentering
-  ) where
-
-import Prelude hiding (span)
-
-import Clay hiding (button, input)
-
-import Design.Constants
-import Design.Color as Color
-
-clearFix :: Css
-clearFix =
-  after & do
-    content (stringContent "")
-    display displayTable
-    clear both
-
-button :: Color -> Color -> Size a -> (Color -> Color) -> Css
-button backgroundCol textCol h focusOp = do
-  display flex
-  alignItems center
-  justifyContent center
-  backgroundColor backgroundCol
-  padding (px 0) (px 10) (px 0) (px 10)
-  color textCol
-  borderRadius radius radius radius radius
-  verticalAlign middle
-  cursor pointer
-  lineHeight h
-  height h
-  textAlign (alignSide sideCenter)
-  hover & backgroundColor (focusOp backgroundCol)
-  focus & backgroundColor (focusOp backgroundCol)
-  waitable
-
-waitable :: Css
-waitable = do
-  svg # ".loader" ? display none
-  ".waiting" & do
-    ".content" ? do
-      display flex
-      fontSize (px 0)
-      opacity 0
-    svg # ".loader" ? do
-      display block
-      rotateKeyframes
-      rotateAnimation
-
-input :: Double -> Css
-input h = do
-  height (px h)
-  padding (px 10) (px 10) (px 10) (px 10)
-  borderRadius radius radius radius radius
-  border solid (px 1) Color.dustyGray
-  focus & borderColor Color.silver
-  verticalAlign middle
-
-centeredWithMargin :: Css
-centeredWithMargin = do
-  width (pct blockPercentWidth)
-  marginLeft auto
-  marginRight auto
-
-verticalCentering :: Css
-verticalCentering = do
-  position absolute
-  top (pct 50)
-  "transform" -: "translateY(-50%)"
-
-rotateAnimation :: Css
-rotateAnimation = do
-  animationName "rotate"
-  animationDuration (sec 1)
-  animationTimingFunction easeOut
-  animationIterationCount infinite
-
-rotateKeyframes :: Css
-rotateKeyframes = keyframes
-  "rotate"
-  [ (0, "transform" -: "rotate(0deg)")
-  , (100, "transform" -: "rotate(360deg)")
-  ]
-- 
cgit v1.2.3