website/frontend/src/Config/Format.elm

module Config.Format exposing (..)

import Config.Colour exposing (..)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D exposing (..)
import Element.Font as F
import Html exposing (col)
import Html.Attributes as H exposing (style)


topLevelContainer : Element msg -> Element msg
topLevelContainer =
    el
        [ E.width fill
        , height fill
        , B.color colourTheme.backgroundColour
        ]


pageList : List (Attribute msg)
pageList =
    [ spacing 30
    , centerX
    , centerY
    , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
    ]


transitionStyle : Attribute msg
transitionStyle =
    htmlAttribute <| style "transition" "all 0.3s ease-in-out"


transitionHighlightedLinkHover : Element msg -> Element msg
transitionHighlightedLinkHover =
    el
        [ mouseOver [ F.color colourTheme.highlightTextHover ]
        , transitionStyle
        ]


transitionNonHighlightedLinkHover : Element msg -> Element msg
transitionNonHighlightedLinkHover =
    el
        [ mouseOver [ F.color colourTheme.highlightText ]
        , transitionStyle
        ]


transitionNonHighlightedLinkHoverWithMove : Element msg -> Element msg
transitionNonHighlightedLinkHoverWithMove content =
    el
        [ E.width fill
        , height (px 30)
        ]
        (el
            [ centerX
            , centerY
            , mouseOver [ F.color colourTheme.highlightText, F.size 25 ]
            , transitionStyle
            ]
            content
        )


spartanFont : F.Font
spartanFont =
    F.typeface "League Spartan"


navBarLinkFormat : List (Attr () msg)
navBarLinkFormat =
    [ F.size 17
    ]


titleFormat : List (Attr () msg)
titleFormat =
    [ F.size 23
    , F.bold
    ]


nonHighlightedTitleFormat : List (Attr () msg)
nonHighlightedTitleFormat =
    [ F.color colourTheme.nonHighlightedText
    ]
        ++ titleFormat


highlightedTitleFormat : List (Attr () msg)
highlightedTitleFormat =
    [ F.color colourTheme.highlightText
    ]
        ++ titleFormat


paragraphFontSize : Attr decorative msg
paragraphFontSize =
    F.size 17


paragraphLinkFormat : { url : String, label : Element msg } -> Element msg
paragraphLinkFormat =
    newTabLink
        [ paragraphFontSize
        , F.color colourTheme.highlightText
        ]


paragraphSpacing : Attribute msg
paragraphSpacing =
    spacing 3


paragraphText : List (Attr () msg)
paragraphText =
    [ F.color colourTheme.nonHighlightedText
    , paragraphSpacing
    , paragraphFontSize
    ]


paragraphHightlightedBoldText : List (Attr () msg)
paragraphHightlightedBoldText =
    [ F.color colourTheme.highlightText
    , F.bold
    , paragraphSpacing
    , paragraphFontSize
    ]


paragraphFormat : List (Attr () msg)
paragraphFormat =
    []
        ++ paragraphText


paragraphBoldFormat : List (Attr () msg)
paragraphBoldFormat =
    [ F.bold ]
        ++ paragraphText


paragraphWidth : Attribute msg
paragraphWidth =
    E.width <| px 700


paragraphAlignLeft : List (Attr () msg)
paragraphAlignLeft =
    [ alignLeft, paragraphWidth ]
        ++ paragraphText


paragraphAlignCenter : List (Attr () msg)
paragraphAlignCenter =
    [ centerX, paragraphWidth ]
        ++ paragraphText


myTooltip : String -> Element msg
myTooltip str =
    el
        [ B.color colourTheme.backgroundColour
        , F.color colourTheme.nonHighlightedText
        , padding 15
        , D.rounded 5
        , D.width 2
        , F.center
        , E.width <| px 300
        , D.color colourTheme.highlightText
        , F.size 15
        , D.shadow
            { offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 }
        ]
        (text str)
        |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 14 ]


tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg
tooltip usher tooltip_ =
    inFront <|
        el
            [ E.width fill
            , height fill
            , transparent True
            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
            , mouseOver [ transparent False ]
            , (usher << map never) <|
                el [ htmlAttribute (style "pointerEvents" "none") ]
                    tooltip_
            ]
            none


basicDivider : Element msg
basicDivider =
    el
        [ E.width fill
        , centerX
        , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
        , D.color (rgb255 200 200 200)
        , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
        ]
        none