feat: standardized formatting conventions across pages

frontend/src/Interviews/Helpers.elm

@@ -1,7 +1,9 @@
 module Interviews.Helpers exposing (..)
 
+import Config.CardFormat exposing (..)
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
+import Config.StrengthBar exposing (..)
 import Cuckery.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -20,44 +22,15 @@ import View exposing (View)
 interviewMaker : Interview -> Element msg
 interviewMaker interview =
     row
-        [ spacing 20
-        , width fill
-        , E.height fill
-        , alignTop
-        , alignRight
-        ]
-        [ imageMaker interview
-        , column
-            [ E.width <| px 650 ]
-            [ nameMaker interview
-            , column
-                [ E.height fill
-                , E.width fill
-                , B.color colourTheme.cardBackground
-                , paddingEach
-                    { top = 10
-                    , bottom = 10
-                    , left = 10
-                    , right = 10
-                    }
-                , D.roundEach
-                    { topLeft = 0
-                    , topRight = 0
-                    , bottomRight = 26
-                    , bottomLeft = 26
-                    }
-                , spacing 3
-                ]
-                [ column
-                    [ paddingEach
-                        { top = 0
-                        , bottom = 0
-                        , left = 15
-                        , right = 15
-                        }
-                    ]
+        topLevelBox
+        [ cardImageMaker (interviewImage interview)
+        , cardMaker
+            [ cardTitleMaker (interviewTitle interview)
+            , cardFormatter
+                [ cardContentSpacing
                     [ column
-                        [ spacing 8
+                        [ fieldSpacer
+                        , width fill
                         ]
                         [ socialMaker interview
                         , appearanceTitle interview
@@ -69,58 +42,16 @@ interviewMaker interview =
         ]
 
 
-imageMaker : Interview -> Element msg
-imageMaker interview =
-    column
-        [ E.width <| px 115
-        , E.height <| px 115
-        , alignTop
-        , alignRight
-        ]
-        [ column
-            [ D.rounded 100
-            , D.width 5
-            , D.color colourTheme.cardBackground
-            , B.color colourTheme.cardBackground
-            ]
-            [ E.image
-                [ alignRight
-                , alignTop
-                , D.rounded 100
-                , clip
-                , E.width <| px 90
-                , E.height <| px 90
-                ]
-                { src = "interviews/" ++ interview.interviewImage ++ ".png"
-                , description = interview.interviewImage
-                }
-            ]
-        ]
+interviewImage : Interview -> { src : String, description : String }
+interviewImage interview =
+    { src = "interviews/" ++ interview.interviewImage ++ ".png"
+    , description = interview.interviewImage
+    }
 
 
-nameMaker : Interview -> Element msg
-nameMaker interview =
-    row
-        (nonHighlightedTitleFormat
-            ++ [ F.size 20
-               , paddingEach
-                    { top = 6
-                    , bottom = 3
-                    , left = 25
-                    , right = 15
-                    }
-               , alignBottom
-               , width fill
-               , B.color colourTheme.highlightTextHover
-               , D.roundEach
-                    { topLeft = 26
-                    , topRight = 26
-                    , bottomRight = 0
-                    , bottomLeft = 0
-                    }
-               ]
-        )
-        [ text interview.interviewName ]
+interviewTitle : Interview -> String
+interviewTitle interview =
+    interview.interviewName
 
 
 socialMaker : Interview -> Element msg
@@ -166,7 +97,9 @@ makeAppearance appearanceEntry index =
                ]
         )
         [ appearanceEpisode appearanceEntry index
-        , subjectMaker appearanceEntry index
+        , experienceMaker appearanceEntry
+        , dateMaker appearanceEntry
+        , subjectMaker appearanceEntry
         , subjectList appearanceEntry
         ]
 
@@ -203,8 +136,103 @@ appearanceEpisode appearanceEntry index =
         ]
 
 
-subjectMaker : Appearance -> Int -> Element msg
-subjectMaker appearanceEntry index =
+experienceMaker : Appearance -> Element msg
+experienceMaker appearanceEntry =
+    row
+        [ width fill
+        , height fill
+        , paddingEach
+            { top = 0
+            , bottom = 0
+            , left = 55
+            , right = 0
+            }
+        ]
+        [ column
+            [ E.alignTop, E.alignLeft ]
+            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 112 ])
+                [ el [ tooltip below (myTooltip "This represents how pleasant it was to interact with the host(s).") ] (text "Pleasantness:") ]
+            ]
+        , column
+            [ E.width fill, E.alignLeft, centerY, height fill ]
+            [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
+        ]
+
+
+getExperienceTooltip : Int -> String
+getExperienceTooltip num =
+    case num of
+        0 ->
+            "Nightmare. Deliberately malicious."
+
+        1 ->
+            "Toxic. Utter fucking twat(s)."
+
+        2 ->
+            "Hostile. Consistently disruptive."
+
+        3 ->
+            "Belligerent. Consistently disrespectful."
+
+        4 ->
+            "Uncivil. Frequently dismissive."
+
+        5 ->
+            "Neutral. Unremarkable social interaction."
+
+        6 ->
+            "Civil. Slightly considerate."
+
+        7 ->
+            "Pleasant. Genuinely respectful."
+
+        8 ->
+            "Very kind. Consistently supportive."
+
+        9 ->
+            "Compassionate. Went out of their way."
+
+        10 ->
+            "Absolute angel. Perfectly empathetic."
+
+        _ ->
+            "Behavior level out of expected range."
+
+
+dateMaker : Appearance -> Element msg
+dateMaker appearanceEntry =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , paddingEach
+                { top = 0
+                , right = 0
+                , bottom = 0
+                , left = 55
+                }
+            ]
+            [ text "Published:"
+            ]
+        , column
+            [ alignTop
+            , width fill
+            ]
+            [ paragraph
+                [ F.regular
+                , paddingEach
+                    { top = 0
+                    , right = 0
+                    , bottom = 0
+                    , left = 3
+                    }
+                ]
+                [ text appearanceEntry.appearanceYear ]
+            ]
+        ]
+
+
+subjectMaker : Appearance -> Element msg
+subjectMaker appearanceEntry =
     row paragraphBoldFormat
         [ column
             [ alignTop