feat: massive refactor

frontend/src/Pages/Services.elm

@@ -1,6 +1,27 @@
 module Pages.Services exposing (Model, Msg, page)
 
+import Browser
 import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.CardFormat
+    exposing
+        ( cardContentSpacing
+        , cardFormatter
+        , cardMaker
+        , cardTitleMaker
+        , desktopCardMaker
+        , desktopImageBoxSize
+        , desktopImageSize
+        , fieldSpacer
+        , mobileCardMaker
+        , mobileImageBoxSize
+        , mobileImageSize
+        , topLevelBox
+        )
+import Config.Helpers.Format
+    exposing
+        ( paragraphFontSize
+        , paragraphSpacing
+        )
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -8,16 +29,19 @@ import Config.Helpers.Response
         )
 import Config.Helpers.Viewport exposing (resetViewport)
 import Config.Pages.Headers.Helpers exposing (headerMaker)
-import Config.Pages.Headers.Pages.Services exposing (servicesHeader)
-import Config.Pages.Services.Helpers exposing (..)
-import Config.Pages.Services.Services.DebateAnalysis exposing (..)
-import Config.Pages.Services.Services.DebateCoaching exposing (..)
-import Config.Pages.Services.Services.ElmBuilds exposing (..)
-import Config.Pages.Services.Services.NixBuilds exposing (..)
-import Config.Pages.Services.Services.NutritionScience exposing (..)
+import Config.Pages.Headers.Records.Services exposing (servicesHeader)
+import Config.Pages.Services.Records.DebateAnalysis exposing (..)
+import Config.Pages.Services.Records.DebateCoaching exposing (..)
+import Config.Pages.Services.Records.ElmBuilds exposing (..)
+import Config.Pages.Services.Records.NixBuilds exposing (..)
+import Config.Pages.Services.Records.NutritionScience exposing (..)
+import Config.Pages.Services.Types exposing (..)
 import Config.Style.Colour as T exposing (..)
 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 Layouts
 import Page exposing (Page)
 import Route exposing (Route)
@@ -129,3 +153,139 @@ servicesList device =
                 , servicesElmBuilds
                 ]
             ]
+
+
+serviceMaker : Service msg -> Element msg
+serviceMaker service =
+    row
+        topLevelBox
+        [ desktopCardMaker desktopImageBoxSize desktopImageSize (serviceImage service) service.serviceLink
+        , cardMaker
+            [ cardTitleMaker service.serviceName
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ rateMaker service
+                        , descriptionMaker service
+                        , offeringMaker service
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+serviceMakerMobile : Service msg -> Element msg
+serviceMakerMobile service =
+    row
+        topLevelBox
+        [ column [] []
+        , cardMaker
+            [ cardTitleMaker service.serviceName
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ row [ spacing 10 ] [ mobileCardMaker mobileImageBoxSize mobileImageSize (serviceImage service) service.serviceLink, rateMaker service ]
+                        , descriptionMaker service
+                        , offeringMaker service
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+serviceImage : Service msg -> { src : String, description : String }
+serviceImage service =
+    { src = "services/" ++ service.serviceImage ++ ".png"
+    , description = service.serviceName
+    }
+
+
+serviceWidth =
+    width <| px 45
+
+
+rateMaker : Service msg -> Element msg
+rateMaker service =
+    row
+        ([ F.color colourTheme.textLightGrey
+         , paragraphSpacing
+         , paragraphFontSize
+         , F.bold
+         ]
+            ++ [ F.size 18
+               , E.width fill
+               ]
+        )
+        [ column
+            [ alignTop
+            , serviceWidth
+            ]
+            [ E.text "Rate:"
+            ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
+            [ paragraph [ F.regular ]
+                [ el [ F.color colourTheme.textLightOrange ] <|
+                    E.text service.serviceRate
+                ]
+            ]
+        ]
+
+
+descriptionMaker : Service msg -> Element msg
+descriptionMaker service =
+    row
+        [ F.color colourTheme.textLightGrey
+        , paragraphSpacing
+        , paragraphFontSize
+        , F.bold
+        ]
+        [ column
+            [ alignTop
+            , width <| px 80
+            ]
+            [ E.text "Offerings:"
+            ]
+        ]
+
+
+offeringMaker : Service msg -> Element msg
+offeringMaker service =
+    column
+        [ spacing 8
+        , width fill
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 35
+            }
+        ]
+    <|
+        List.map2 (\x y -> makeDescription x)
+            service.serviceDescription
+            (List.range 1 (List.length service.serviceDescription))
+
+
+makeDescription : Description -> Element msg
+makeDescription description =
+    column
+        ([ F.color colourTheme.textLightGrey
+         , paragraphSpacing
+         , paragraphFontSize
+         , F.bold
+         , alignLeft
+         ]
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ paragraph [ F.regular ]
+            [ E.text ("‣ " ++ description.point) ]
+        ]