From ebd304d97b612d0ac4ea276b1c29ba8ecc0b7998 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 3 Sep 2015 21:56:17 +0200
Subject: Adapting design to smaller screens

---
 src/server/Design/Global.hs | 43 ++++++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 13 deletions(-)

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

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index f884db9..4933300 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Clay.Display as D
 import Data.Text.Lazy (Text)
 
 import Design.Color as C
+import Design.Media
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
@@ -22,6 +23,10 @@ iconFontSize = 32
 global :: Css
 global = do
 
+  body ? do
+    position relative
+    minWidth (px 550)
+
   header ? do
     let headerHeight = 150
 
@@ -35,10 +40,8 @@ global = do
       let iconHeight = 50
       let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
       position absolute
-      top (px 0)
-      right (px 10)
-      marginTop (px sideMargin)
-      marginRight (px sideMargin)
+      top (px sideMargin)
+      right (pct 2)
       height (px iconHeight)
       lineHeight (px iconHeight)
       backgroundColor C.white
@@ -90,16 +93,23 @@ global = do
 
       ".name" ? do
         float floatLeft
+        width (pct 50)
         input ? width (pct 75)
+        label ? width (pct 20)
+        paddingRight (pct 5)
 
       ".cost" ? do
-        float floatRight
-        input ? do width (pct 50)
-        label ? marginRight (pct 5)
-        button ? do
-          defaultButton
-          width (pct 20)
-          height (px inputHeight)
+        float floatLeft
+        width (pct 35)
+        input ? width (pct 65)
+        label ? width (pct 30)
+        paddingRight (pct 5)
+
+      button ? do
+        defaultButton
+        float floatLeft
+        width (pct 15)
+        height (px inputHeight)
 
       ".name.error" <> ".cost.error" ? do
         input ? borderColor C.redError
@@ -141,7 +151,14 @@ global = do
         ".category" & width (pct 40)
         ".cost" & width (pct 20)
         ".user" & width (pct 20)
-        ".date" & width (pct 20)
+        ".date" & do
+          width (pct 20)
+          smallScreen $ do
+            ".shortDate" ? display inline
+            ".longDate" ? display none
+          largeScreen $ do
+            ".shortDate" ? display none
+            ".longDate" ? display inline
         ".remove" & do
           width (px 10)
           height (px 10)
@@ -174,7 +191,7 @@ global = do
     ".result" ? do
       marginTop (px 40)
       textAlign (alignSide sideCenter)
-      ".success" ? color C.green
+      ".success" ? color C.greenSuccess
       ".error" ? color C.redError
 
 clearFix :: Css
-- 
cgit v1.2.3