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/client/View/Date.elm | 35 +++++++++++++++++++++++--- src/client/View/Payments/Add.elm | 8 +++--- src/client/View/Payments/Table.elm | 18 +++++++++---- src/server/Design/Color.hs | 3 +++ src/server/Design/Global.hs | 43 ++++++++++++++++++++++---------- src/server/Design/Media.hs | 23 +++++++++++++++++ src/server/Model/Message/Key.hs | 3 ++- src/server/Model/Message/Translations.hs | 7 +++++- 8 files changed, 113 insertions(+), 27 deletions(-) create mode 100644 src/server/Design/Media.hs 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}" -- cgit v1.2.3