module Pages.Services.Elm exposing (Model, Msg, page) import Config.Helpers.Cards.Helpers exposing (cardMaker) import Config.Helpers.Cards.Types as C import Config.Helpers.Format exposing (..) import Config.Helpers.Headers.Helpers exposing (..) import Config.Helpers.Headers.Types exposing (Header) import Config.Helpers.Response exposing ( pageList , topLevelContainer ) import Config.Helpers.ServiceFormat exposing (..) import Config.Helpers.ToolTip exposing (..) import Config.Pages.Services.Records.ElmBuilds exposing (servicesElmBuilds) import Config.Style.Colour exposing (..) import Config.Style.Transitions exposing ( hoverFontDarkOrange , transitionStyleFast , transitionStyleSlow ) import Effect exposing (Effect) import Element as E exposing (..) import Element.Background as B import Element.Border as D import Element.Font as F import Html import Html.Attributes as H exposing (style) import Layouts import Page exposing (Page) import Route exposing (Route) import Route.Path as Path import Shared import View exposing (View) import Config.Helpers.Viewport exposing (resetViewport) page : Shared.Model -> Route () -> Page Model Msg page shared route = Page.new { init = init , update = update , subscriptions = subscriptions , view = view shared } |> Page.withLayout toLayout toLayout : Model -> Layouts.Layout Msg toLayout model = Layouts.Navbar {} -- INIT type alias Model = {} init : () -> ( Model, Effect Msg ) init () = ( {} , Effect.map (\_ -> NoOp) (Effect.sendCmd resetViewport) ) -- UPDATE type Msg = NoOp update : Msg -> Model -> ( Model, Effect Msg ) update msg model = case msg of NoOp -> ( model , Effect.none ) -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = Sub.none -- VIEW view : Shared.Model -> Model -> View Msg view shared model = { title = "services (elmBuilds)" , attributes = [] , element = elmBuildsContainer shared.device } elmBuildsContainer : Device -> Element msg elmBuildsContainer device = topLevelContainer (elmBuildsList device) elmBuildsList : Device -> Element msg elmBuildsList device = column (case ( device.class, device.orientation ) of _ -> pageList device ) <| List.concat [ List.map (\service -> cardMaker device (C.ServicePage service) contentList ) [ servicesElmBuilds ] ] contentList : List (Element msg) contentList = [ column bodyFormat [ chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph1 , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph2 , chunkMaker servicesElmBuilds.serviceArticle.articleParagraph.paragraph3 , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title1 , numberMaker servicesElmBuilds.serviceArticle.articleListEntries.list1 , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title2 , bulletPointMaker servicesElmBuilds.serviceArticle.articleListEntries.list2 , titleMaker servicesElmBuilds.serviceArticle.articleTitles.title3 , elmCodeRenderer ] ] elmCodeRenderer : Element msg elmCodeRenderer = el [ paddingEach { top = 15 , bottom = 15 , left = 20 , right = 20 } , B.color colourTheme.backgroundLightGrey , D.rounded 10 , width fill , spacing 8 ] <| column [ F.size 14 , spacing 5 , width fill ] [ renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 0 0 ] , text "barMaker" |> el [ F.color syntaxTheme.key ] , text " : " |> el [ F.color syntaxTheme.operator ] , text "(" |> el [ F.color syntaxTheme.punctuation ] , text "Int" |> el [ F.color syntaxTheme.keyword ] , text " -> " |> el [ F.color syntaxTheme.operator ] , text "String" |> el [ F.color syntaxTheme.keyword ] , text ")" |> el [ F.color syntaxTheme.punctuation ] , text " -> " |> el [ F.color syntaxTheme.operator ] , text "Int" |> el [ F.color syntaxTheme.keyword ] , text " -> " |> el [ F.color syntaxTheme.operator ] , text "Element" |> el [ F.color syntaxTheme.keyword ] , text " msg" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 0 0 ] , text "barMaker" |> el [ F.color syntaxTheme.key ] , text " getToolTip" , text " num" , text " =" |> el [ F.color syntaxTheme.operator ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 16 0 ] , text "el" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 28 0 ] , text "(" |> el [ F.color syntaxTheme.punctuation ] , text "[" |> el [ F.color syntaxTheme.punctuation ] , text " Element" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "height" , text " <| " |> el [ F.color syntaxTheme.operator ] , text "px" , text " 12" |> el [ F.color syntaxTheme.string ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 32 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " Element" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "width" , text " fill" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 32 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " Border" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "rounded" , text " 10" |> el [ F.color syntaxTheme.string ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 32 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " Border" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "color" , text " colourTheme" , text "." |> el [ F.color syntaxTheme.punctuation ] , text "textDarkGrey" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 32 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " Border" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "width" , text " 2" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 32 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " Background" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "gradient" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 48 0 ] , text "{" |> el [ F.color syntaxTheme.punctuation ] , text " angle" , text " = " |> el [ F.color syntaxTheme.operator ] , text "1.57" |> el [ F.color syntaxTheme.string ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 48 0 ] , text "," |> el [ F.color syntaxTheme.punctuation ] , text " steps" , text " = " ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 56 0 ] , text "List" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "concat" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 62 0 ] , text "[ " |> el [ F.color syntaxTheme.punctuation ] , text "List" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "repeat" , text " num " , text "colourTheme" , text "." |> el [ F.color syntaxTheme.punctuation ] , text "barGreen" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 62 0 ] , text ", " |> el [ F.color syntaxTheme.punctuation ] , text "List" |> el [ F.color syntaxTheme.keyword ] , text "." |> el [ F.color syntaxTheme.punctuation ] , text "repeat" , text " (" |> el [ F.color syntaxTheme.punctuation ] , text "10" |> el [ F.color syntaxTheme.string ] , text " - " |> el [ F.color syntaxTheme.operator ] , text "num" , text " )" |> el [ F.color syntaxTheme.punctuation ] , text " colourTheme" , text "." |> el [ F.color syntaxTheme.punctuation ] , text "barRed" ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 62 0 ] , text "]" |> el [ F.color syntaxTheme.punctuation ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 48 0 ] , text "}" |> el [ F.color syntaxTheme.punctuation ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 40 0 ] , text "]" |> el [ F.color syntaxTheme.punctuation ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 48 0 ] , text "++" |> el [ F.color syntaxTheme.operator ] , text " [ " |> el [ F.color syntaxTheme.punctuation ] , text "tooltip" , text " (" |> el [ F.color syntaxTheme.punctuation ] , text "getToolTip" , text " num" , text ")" |> el [ F.color syntaxTheme.punctuation ] , text " ]" |> el [ F.color syntaxTheme.punctuation ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 28 0 ] , text ")" |> el [ F.color syntaxTheme.punctuation ] ] , renderCodeLine syntaxTheme [ text "" |> el [ paddingXY 28 0 ] , text "none" ] ]