aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/elm/View/Header.elm30
-rw-r--r--src/server/Design/Header.hs59
2 files changed, 60 insertions, 29 deletions
diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index b8a5bf1..b49cf74 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -3,6 +3,7 @@ module View.Header
) where
import Signal exposing (Address)
+import Dict
import Html exposing (..)
import Html.Attributes exposing (..)
@@ -19,16 +20,29 @@ renderHeader : Address Action -> Model -> Html
renderHeader address model =
header
[]
- [ h1
- []
- [ text (getMessage "SharedCost" model.translations) ]
+ [ button
+ [ class "title" ]
+ [ h1
+ []
+ [ text (getMessage "SharedCost" model.translations) ]
+ ]
, case model.view of
- LoggedInView _ ->
- button
- [ class "icon"
- , onClick address SignOut
+ LoggedInView { users, account } ->
+ div
+ [ class "signedPanel" ]
+ [ button
+ [ class "user" ]
+ [ Dict.get account.me users
+ |> Maybe.map .name
+ |> Maybe.withDefault ""
+ |> text
+ ]
+ , button
+ [ class "icon"
+ , onClick address SignOut
+ ]
+ [ renderIcon "power-off" ]
]
- [ renderIcon "power-off" ]
_ ->
text ""
]
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index a45a7b2..8a348ad 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -4,6 +4,8 @@ module Design.Header
( headerDesign
) where
+import Data.Monoid ((<>))
+
import Clay
import Design.Color as C
@@ -13,28 +15,43 @@ headerDesign :: Css
headerDesign =
header ? do
- let headerHeight = 80
- let sidePercent = (pct blockPercentMargin)
+ let headerHeight = px 80
+ let headerPadding = px 20
+ let darkenedRed = C.red +. 10
+ lineHeight headerHeight
+ height headerHeight
+ marginBottom blockMarginBottom
+ position relative
- h1 ? do
- fontSize (px 45)
- textAlign (alignSide sideLeft)
- backgroundColor C.red
+ button ? do
color C.white
- lineHeight (px headerHeight)
- marginBottom blockMarginBottom
- paddingLeft sidePercent
+ backgroundColor C.red
+ hover & backgroundColor darkenedRed
+ focus & backgroundColor darkenedRed
+
+ ".title" ? do
+ width (pct 100)
+ height (pct 100)
+
+ h1 ? do
+ fontSize (px 35)
+ textAlign (alignSide sideLeft)
+ paddingLeft headerPadding
+ paddingRight headerPadding
- button # ".icon" ? do
- let iconHeight = 50
- let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+ ".signedPanel" ? do
+ float floatRight
+ height (pct 100)
+ display flex
position absolute
- top (px sideMargin)
- right sidePercent
- height (px iconHeight)
- lineHeight (px iconHeight)
- backgroundColor C.red
- color C.white
- fontSize iconFontSize
- hover & i ? transform (scale 1.2 1.2)
- focus & i ? transform (scale 1.2 1.2)
+ top (px 0)
+ right (px 0)
+
+ ".user" <> ".icon" ? do
+ paddingLeft headerPadding
+ paddingRight headerPadding
+ borderLeft solid (px 1) darkenedRed
+
+ ".icon" ? do
+ fontSize iconFontSize
+ borderRight solid (px 1) darkenedRed