feat: standardized formatting conventions across pages

frontend/src/Config/CardFormat.elm

@@ -0,0 +1,133 @@
+module Config.CardFormat exposing (..)
+
+import Config.Colour exposing (..)
+import Config.Format exposing (..)
+import Cuckery.Types exposing (..)
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import View exposing (View)
+
+
+topLevelBox =
+    [ spacing 20
+    , E.width fill
+    , E.height fill
+    , E.alignTop
+    , E.alignRight
+    ]
+
+
+cardMaker : List (Element msg) -> Element msg
+cardMaker =
+    column
+        [ E.width <| px 650
+        , D.width 5
+        , D.color colourTheme.cardBackground
+        , D.roundEach
+            { topLeft = 32
+            , topRight = 32
+            , bottomRight = 32
+            , bottomLeft = 32
+            }
+        ]
+
+
+cardFormatter : List (Element msg) -> Element msg
+cardFormatter =
+    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 8
+        ]
+
+
+cardContentSpacing : List (Element msg) -> Element msg
+cardContentSpacing =
+    column
+        [ paddingEach
+            { top = 0
+            , bottom = 0
+            , left = 15
+            , right = 15
+            }
+        , spacing 8
+        , width fill
+        ]
+
+
+cardImageMaker : { src : String, description : String } -> Element msg
+cardImageMaker image =
+    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
+                ]
+                image
+            ]
+        ]
+
+
+cardTitleMaker : String -> Element msg
+cardTitleMaker title =
+    row
+        (nonHighlightedTitleFormat
+            ++ [ F.size 20
+               , B.color colourTheme.highlightTextHover
+               , paddingEach
+                    { top = 6
+                    , bottom = 3
+                    , left = 25
+                    , right = 15
+                    }
+               , alignBottom
+               , width fill
+               , D.roundEach
+                    { topLeft = 26
+                    , topRight = 26
+                    , bottomRight = 0
+                    , bottomLeft = 0
+                    }
+               ]
+        )
+        [ text title ]
+
+
+fieldSpacer : Attribute msg
+fieldSpacer =
+    spacing 8