Adapting design to smaller screens

3 files changed, 56 insertions, 13 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 0a84c9e..c1c4057 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,6 +5,9 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
+greenSuccess :: C.Color
+greenSuccess = C.green
+
 redError :: C.Color
 redError = C.red
 
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
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
new file mode 100644
index 0000000..925e2f9
--- /dev/null
+++ b/src/server/Design/Media.hs
@@ -0,0 +1,23 @@
+module Design.Media
+  ( smallScreen
+  , largeScreen
+  ) where
+
+import Clay
+import Clay.Stylesheet
+import qualified Clay.Media as M
+
+limit :: Integer
+limit = 950
+
+smallFeature :: [Feature]
+smallFeature = [M.maxWidth (px (limit - 1))]
+
+largeFeature :: [Feature]
+largeFeature = [M.minWidth (px limit)]
+
+smallScreen :: Css -> Css
+smallScreen = query M.screen smallFeature
+
+largeScreen :: Css -> Css
+largeScreen = query M.screen largeFeature