Responsive home page

1 files changed, 61 insertions, 23 deletions

diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 3f55207..3358f5d 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,7 +11,6 @@ import qualified Clay.Display as D
 
 import Design.Color as Color
 import qualified Design.Media as Media
-import Design.Constants as Constants
 
 design :: Css
 design = do
@@ -20,47 +19,86 @@ design = do
     textAlign (alignSide sideCenter)
 
   ".lines" ? do
-    display D.table
+    Media.tabletDesktop $ display D.table
     width (pct 100)
     textAlign (alignSide (sideCenter))
 
-    ".header" <> ".row" ? display tableRow
-    let headerHeight = (px 70)
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
 
     ".header" ? do
-      fontWeight bold
-      backgroundColor Color.gothic
-      color Color.white
-      fontSize (px 18)
-      height headerHeight
+      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
-      fontSize (px 18)
-      height (px rowHeightPx)
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
 
-      nthChild "odd" & do
-        backgroundColor Color.wildSand
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
 
     ".cell" ? do
-      display tableCell
+      Media.tabletDesktop $ display tableCell
       position relative
       verticalAlign middle
-      ".category" & width (pct 36)
+
+      ".category" & do
+        Media.tabletDesktop $ width (pct 36)
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
       ".cost" & do
-        width (pct 15)
+        Media.tabletDesktop $ width (pct 15)
         ".refund" & color Color.mossGreen
-      ".user" & width (pct 20)
+
+      ".user" & do
+        Media.tabletDesktop $ width (pct 20)
+
       ".date" & do
-        width (pct 20)
-        Media.mobileTablet $ do
+        Media.tabletDesktop $ width (pct 20)
+        Media.desktop $ do
+          ".shortDate" ? display none
+          ".longDate" ? display inline
+        Media.tablet $ do
           ".shortDate" ? display inline
           ".longDate" ? display none
-        Media.desktop $ do
+        Media.mobile $ do
           ".shortDate" ? display none
           ".longDate" ? display inline
+          marginBottom (em 0.5)
+
       ".cell.button" & do
         position relative
-        width (pct 3)
         textAlign (alignSide sideCenter)
-        button # hover ? "svg path" ? do
-          "fill" -: "rgb(237, 122, 116)"
+        button ? do
+          padding (px 10) (px 10) (px 10) (px 10)
+          hover & "svg path" ? do
+            "fill" -: "rgb(237, 122, 116)"
+
+        Media.tabletDesktop $ width (pct 3)
+
+        Media.mobile $ do
+          display inlineBlock
+          button ? display flex