mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 12:25:12 -05:00
409 lines
13 KiB
Elm
Executable file
409 lines
13 KiB
Elm
Executable file
module Pages.Services.Elm exposing (Model, Msg, page)
|
|
|
|
import Config.Helpers.CardFormat exposing (..)
|
|
import Config.Helpers.Format exposing (..)
|
|
import Config.Helpers.Headers.Header exposing (headerMaker)
|
|
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)
|
|
|
|
|
|
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.none
|
|
)
|
|
|
|
|
|
|
|
-- 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 pageList <|
|
|
List.concat
|
|
(case ( device.class, device.orientation ) of
|
|
_ ->
|
|
[ [ serviceMaker ] ]
|
|
)
|
|
|
|
|
|
serviceMaker : Element msg
|
|
serviceMaker =
|
|
row
|
|
topLevelBox
|
|
[ cardMaker
|
|
[ cardTitleMaker (String.toUpper servicesElmBuilds.serviceName)
|
|
, cardFormatter
|
|
[ cardContentSpacing
|
|
[ column
|
|
fieldSpacer
|
|
[ cardSubTitleMaker
|
|
[ 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"
|
|
]
|
|
]
|