Merge branch 'with-ghcjs' into 'master'

Use Haskell on the frontend

See merge request guyonvarch/shared-cost!2

1 files changed, 99 insertions, 0 deletions

diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
new file mode 100644
index 0000000..56bd389
--- /dev/null
+++ b/server/src/Design/View/Table.hs
@@ -0,0 +1,99 @@
+module Design.View.Table
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  ".emptyTableMsg" ? do
+    margin (em 2) (em 2) (em 2) (em 2)
+    textAlign (alignSide sideCenter)
+
+  ".table" ? do
+    minHeight (px 540)
+
+  ".lines" ? do
+    Media.tabletDesktop $ display displayTable
+    width (pct 100)
+    textAlign (alignSide (sideCenter))
+
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
+
+    ".header" ? do
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 70)
+
+      Media.tabletDesktop $ do
+        backgroundColor Color.gothic
+        color Color.white
+
+      Media.tablet $ do
+        fontSize (px 16)
+        height (px 60)
+
+      Media.mobile $ do
+        display none
+
+    ".row" ? do
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
+
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
+
+    ".cell" ? do
+      Media.tabletDesktop $ display tableCell
+      position relative
+      verticalAlign middle
+
+      firstChild & do
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
+      ".refund" & color Color.mossGreen
+
+      Media.desktop $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+      Media.tablet $ do
+        ".shortDate" ? display inline
+        ".longDate" ? display none
+      Media.mobile $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+        marginBottom (em 0.5)
+
+      ".cell.button" & do
+        position relative
+        textAlign (alignSide sideCenter)
+        button ? do
+          padding (px 10) (px 10) (px 10) (px 10)
+          svg ? do
+            "path" ? ("fill" -: Color.toString Color.chestnutRose)
+            width (px 18)
+          hover & "svg path" ? do
+            "fill" -: "rgb(237, 122, 116)"
+
+        Media.tabletDesktop $ width (pct 3)
+
+        Media.mobile $ do
+          display inlineBlock
+          button ? display flex