Adapting design to smaller screens

8 files changed, 113 insertions, 27 deletions

diff --git a/src/client/View/Date.elm b/src/client/View/Date.elm
index c96e99e..c239713 100644
--- a/src/client/View/Date.elm
+++ b/src/client/View/Date.elm
@@ -1,19 +1,46 @@
 module View.Date
-  ( renderDate
+  ( renderShortDate
+  , renderLongDate
   ) where
 
 import Date exposing (..)
+import String
 
 import Model.Translations exposing (..)
 
-renderDate : Date -> Translations -> String
-renderDate date translations =
+renderShortDate : Date -> Translations -> String
+renderShortDate date translations =
+  let params =
+        [ String.pad 2 '0' (toString (Date.day date))
+        , String.pad 2 '0' (toString (getMonthNumber (Date.month date)))
+        , toString (Date.year date)
+        ]
+  in  getVarMessage params "ShortDate" translations
+
+renderLongDate : Date -> Translations -> String
+renderLongDate date translations =
   let params =
         [ toString (Date.day date)
         , (getMessage (getMonthKey (Date.month date)) translations)
         , toString (Date.year date)
         ]
-  in  getVarMessage params "Date" translations
+  in  getVarMessage params "LongDate" translations
+
+getMonthNumber : Month -> Int
+getMonthNumber month =
+  case month of
+    Jan -> 1
+    Feb -> 2
+    Mar -> 3
+    Apr -> 4
+    May -> 5
+    Jun -> 6
+    Jul -> 7
+    Aug -> 8
+    Sep -> 9
+    Oct -> 10
+    Nov -> 11
+    Dec -> 12
 
 getMonthKey : Month -> String
 getMonthKey month =
diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index c022d01..941f6b8 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -40,6 +40,7 @@ addPayment model addPayment =
             [ id "nameInput"
             , value addPayment.name
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName)
+            , maxlength 20
             ]
             []
         , label
@@ -57,6 +58,7 @@ addPayment model addPayment =
             [ id "costInput"
             , value addPayment.cost
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost)
+            , maxlength 7
             ]
             []
         , label
@@ -67,8 +69,8 @@ addPayment model addPayment =
               div [ class "errorMessage" ] [ text error ]
             Nothing ->
               text ""
-        , button
-            [ type' "submit" ]
-            [ text (getMessage "Add" model.translations)]
         ]
+      , button
+          [ type' "submit" ]
+          [ text (getMessage "Add" model.translations)]
     ]
diff --git a/src/client/View/Payments/Table.elm b/src/client/View/Payments/Table.elm
index a180315..12b1a46 100644
--- a/src/client/View/Payments/Table.elm
+++ b/src/client/View/Payments/Table.elm
@@ -23,7 +23,7 @@ import Update exposing (..)
 import Update.Payment exposing (..)
 
 import View.Icon exposing (renderIcon)
-import View.Date exposing (renderDate)
+import View.Date exposing (..)
 
 paymentsTable : Model -> PaymentView -> Html
 paymentsTable model paymentView =
@@ -53,10 +53,18 @@ paymentLine model paymentView (id, payment) =
     [ class ("row " ++ (if paymentView.edition == Just id then "edition" else ""))
     , onClick actions.address (UpdatePayment (ToggleEdit id))
     ]
-    [ div [ class "cell" ] [ text payment.name ]
-    , div [ class "cell" ] [ text ((toString payment.cost) ++ " " ++ (getMessage "MoneySymbol" model.translations)) ]
-    , div [ class "cell" ] [ text payment.userName ]
-    , div [ class "cell" ] [ text (renderDate payment.creation model.translations) ]
+    [ div [ class "cell category" ] [ text payment.name ]
+    , div [ class "cell cost" ] [ text ((toString payment.cost) ++ " " ++ (getMessage "MoneySymbol" model.translations)) ]
+    , div [ class "cell user" ] [ text payment.userName ]
+    , div
+        [ class "cell date" ]
+        [ span
+            [ class "shortDate" ]
+            [ text (renderShortDate payment.creation model.translations) ]
+        , span
+            [ class "longDate" ]
+            [ text (renderLongDate payment.creation model.translations) ]
+        ]
     , if paymentView.userName == payment.userName
         then
           div
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
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index d4d31f3..ce03d34 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -38,7 +38,8 @@ data Key =
   | November
   | December
 
-  | Date
+  | ShortDate
+  | LongDate
 
   -- Validation
 
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 93d264f..9b9aafd 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -156,7 +156,12 @@ m l December =
     English -> "December"
     French  -> "Décembre"
 
-m l Date =
+m l ShortDate =
+  case l of
+    English -> "{3}-{2}-{1}"
+    French  -> "{1}/{2}/{3}"
+
+m l LongDate =
   case l of
     English -> "{2} {1}, {3}"
     French  -> "{1} {2} {3}"