feat: fixed scrolling on gibberish page

frontend/src/Config/Helpers/Cards/Inner/StrengthBar.elm

@@ -3,7 +3,11 @@ module Config.Helpers.Cards.Inner.StrengthBar exposing
     , barPadding
     )
 
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Style.Colour.Helpers exposing (colourTheme)
 import Element as E
     exposing
@@ -59,7 +63,7 @@ barMaker shared getTooltip num =
                         []
 
                     _ ->
-                        [ tooltip (getTooltip num) True ]
+                        [ tooltip IsLeft (getTooltip num) ]
                )
         )
         none

frontend/src/Config/Helpers/Cards/Inner/Text.elm

@@ -123,6 +123,7 @@ bodyFormat colour =
     , defaultFontSize
     , F.color (getThemeColor colour)
     , width fill
+    , F.alignLeft
     ]
 
 

frontend/src/Config/Helpers/Cards/Inner/ToolTip.elm

@@ -1,5 +1,6 @@
 module Config.Helpers.Cards.Inner.ToolTip exposing
-    ( tooltip
+    ( ToolTipPosition(..)
+    , tooltip
     , tooltipImage
     )
 
@@ -23,6 +24,7 @@ import Element as E
         , moveLeft
         , none
         , padding
+        , pointer
         , px
         , rgba
         , text
@@ -46,24 +48,19 @@ import Element.Font as F
 import Html.Attributes as H exposing (style)
 
 
-tooltip : String -> Bool -> Attribute msg
+tooltip : ToolTipPosition -> String -> Attribute msg
-tooltip content isLeft =
+tooltip toolTipPosition content =
-    inFront <|
+    let
-        el
+        tooltipContent : Attribute msg
-            [ E.width fill
+        tooltipContent =
-            , height fill
+            below <|
-            , transparent True
-            , mouseOver [ transparent False ]
-            , htmlAttribute <| H.style "z-index" "4"
-            , transitionStyleSlow
-            , below <|
                 el
                     [ htmlAttribute (H.style "pointerEvents" "none")
-                    , case isLeft of
+                    , case toolTipPosition of
-                        True ->
+                        IsLeft ->
                             alignLeft
 
-                        False ->
+                        IsRight ->
                             alignRight
                     ]
                 <|
@@ -87,10 +84,26 @@ tooltip content isLeft =
                             }
                         ]
                         (text content)
+    in
+    inFront <|
+        el
+            [ E.width fill
+            , height fill
+            , pointer
+            , transparent True
+            , mouseOver [ transparent False ]
+            , htmlAttribute <| H.style "z-index" "4"
+            , transitionStyleSlow
+            , tooltipContent
             ]
             none
 
 
+type ToolTipPosition
+    = IsLeft
+    | IsRight
+
+
 tooltipImage : String -> Attribute msg
 tooltipImage content =
     inFront <|

frontend/src/Pages/Debate/Arguments.elm

@@ -19,7 +19,11 @@ import Config.Helpers.Cards.Inner.Text
         , generalButton
         , getHoverColours
         )
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
 import Config.Helpers.Converters exposing (toTitleCase)
@@ -335,7 +339,7 @@ copyButton shared model isLinkClicked index argument =
             el
                 (if isLinkClicked then
                     [ transitionStyleSlow
-                    , tooltip "Copied!" False
+                    , tooltip IsRight "Copied!"
                     , case ( shared.device.class, shared.device.orientation ) of
                         ( Phone, Portrait ) ->
                             B.color (getThemeColor BackgroundDarkGrey)
@@ -381,9 +385,8 @@ strengthMaker shared =
 
             _ ->
                 if not shared.isNavbarExpanded then
-                    [ tooltip
+                    [ tooltip IsRight
                         "This represents my confidence that the argument is sound."
-                        True
                     ]
 
                 else

frontend/src/Pages/Debate/Cucklist.elm

@@ -16,7 +16,11 @@ import Config.Helpers.Cards.Inner.Text
         , getHoverColours
         , numberedListItem
         )
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
 import Config.Helpers.Converters exposing (formatSocial)
@@ -288,7 +292,7 @@ copyButton shared model isLinkClicked index cuck =
             el
                 (if isLinkClicked then
                     [ transitionStyleSlow
-                    , tooltip "Copied!" False
+                    , tooltip IsRight "Copied!"
                     , case ( shared.device.class, shared.device.orientation ) of
                         ( Phone, Portrait ) ->
                             B.color (getThemeColor BackgroundDarkGrey)

frontend/src/Pages/Debate/Gibberish.elm

@@ -7,7 +7,12 @@ import Config.Helpers.Cards.Inner.StrengthBar
         ( barMaker
         , barPadding
         )
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.Text exposing (detailBodyMaker, detailFormat, detailTitleMaker, listMaker, listMaker2, numberedListItem)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
 import Config.Helpers.Converters exposing (toTitleCase)
@@ -203,12 +208,7 @@ contentList shared gibberish =
             <|
                 imageSquareMaker shared.device (imagePathMaker M.Gibberish gibberish.gibberishImage) True size
     in
-    [ paragraph
+    [ detailFormat paragraph
-        [ F.color (getThemeColor TextLightGrey)
-        , paragraphSpacing
-        , defaultFontSize
-        , width fill
-        ]
         [ case ( shared.device.class, shared.device.orientation ) of
             ( Phone, Portrait ) ->
                 none
@@ -218,7 +218,7 @@ contentList shared gibberish =
 
             _ ->
                 image Medium
-        , text gibberish.gibberishDescription
+        , detailBodyMaker TextLightGrey (text gibberish.gibberishDescription)
         ]
     , gibberishMakerBody shared gibberish
     ]
@@ -226,201 +226,70 @@ contentList shared gibberish =
 
 gibberishMakerBody : Shared.Model -> Gibberish -> Element msg
 gibberishMakerBody shared gibberish =
-    column
+    detailFormat column
-        [ paddingEach
+        [ listMaker2 (makeTerms shared) gibberish.gibberishTerms
-            { top = 0
-            , bottom = 0
-            , left = 15
-            , right = 15
-            }
-        , spacing 8
-        , width fill
-        ]
-        [ column
-            [ spacing 8
-            , width fill
-            ]
-            [ paragraph
-                [ F.color (getThemeColor TextLightGrey)
-                , paragraphSpacing
-                , defaultFontSize
-                , F.center
-                ]
-                [ domainList shared gibberish
-                ]
-            ]
         ]
 
 
-gibberishImage : Gibberish -> { src : String, description : String }
+makeTerms : Shared.Model -> Terms -> Int -> Element msg
-gibberishImage gibberish =
+makeTerms shared terms index =
-    { src = "/gibberish/" ++ gibberish.gibberishImage ++ ".png"
+    detailFormat column
-    , description = gibberish.gibberishTitle
+        [ detailFormat row
-    }
+            [ detailTitleMaker TextLightGrey
-
+                (String.fromInt index ++ ". ")
-
+            , el
-gibberishTitle : Shared.Model -> Gibberish -> String
+                [ alignLeft
-gibberishTitle shared gibberish =
+                , F.alignLeft
-    gibberish.gibberishTitle
-
-
-domainList : Shared.Model -> Gibberish -> Element msg
-domainList shared gibberish =
-    column
-        [ spacing 8
-        , E.width fill
-        ]
-        (List.indexedMap (makeTerms (intelligibilityBar shared)) gibberish.gibberishTerms)
-
-
-descriptionMaker : Gibberish -> Element msg
-descriptionMaker gibberish =
-    column
-        [ E.width fill
-        , centerX
-        ]
-        [ paragraph
-            [ F.color (getThemeColor TextLightGrey)
-            , paragraphSpacing
-            , defaultFontSize
-            , spacing 3
-            , F.regular
-            , F.alignLeft
-            ]
-            [ text gibberish.gibberishDescription
-            ]
-        ]
-
-
-makeTerms : (Terms -> Element msg) -> Int -> Terms -> Element msg
-makeTerms bar index terms =
-    column
-        [ F.color (getThemeColor TextLightGrey)
-        , paragraphSpacing
-        , defaultFontSize
-        , F.bold
-        , E.alignLeft
-        , spacing 8
-        , E.width fill
-        ]
-        [ row
-            [ F.color (getThemeColor TextLightGrey)
-            , F.regular
-            , defaultFontSize
-            , F.bold
-            , F.alignLeft
-            , E.width fill
-            ]
-            [ column
-                [ E.alignRight
-                , alignTop
-                ]
-                [ paragraph
-                    []
-                    [ text (String.fromInt (index + 1) ++ ". ") ]
-                ]
-            , column
-                [ E.width fill
-                , paddingEach
-                    { top = 0
-                    , bottom = 0
-                    , left = 10
-                    , right = 10
-                    }
-                , spacing 3
-                ]
-                [ paragraph
-                    []
-                    [ el [ F.color (getThemeColor TextLightOrange) ] <|
-                        text <|
-                            "\""
-                                ++ String.toLower terms.term
-                                ++ "\""
-                    ]
-                , bar terms
-                , paragraph
-                    [ F.color (getThemeColor TextLightGrey)
-                    , F.regular
-                    , defaultFontSize
-                    , F.alignLeft
-                    ]
-                    [ text
-                        (case terms.explanation of
-                            NoClue ->
-                                "I have no fucking clue what this means."
-
-                            SpecificExplanation str ->
-                                str
-                        )
-                    ]
-                ]
-            ]
-        ]
-
-
-intelligibilityBar : Shared.Model -> Terms -> Element msg
-intelligibilityBar shared terms =
-    row
-        [ E.width fill
-        , height fill
-        ]
-        [ column
-            [ E.alignTop
-            , E.alignLeft
-            ]
-            [ paragraph
-                [ F.color (getThemeColor TextLightGrey)
                 , F.bold
-                , defaultFontSize
+                , F.color (getThemeColor TextLightOrange)
-                , paragraphSpacing
+                , width fill
-                , E.alignLeft
-                , E.width fill
-                ]
-                [ el
-                    (case ( shared.device.class, shared.device.orientation ) of
-                        ( Phone, Portrait ) ->
-                            []
-
-                        ( Tablet, Portrait ) ->
-                            []
-
-                        _ ->
-                            if not shared.isNavbarExpanded then
-                                [ tooltip tooltipMessage True
-                                ]
-
-                            else
-                                []
-                    )
-                  <|
-                    (el
-                        [ paddingEach
-                            { top = 0
-                            , right = 10
-                            , bottom = 0
-                            , left = 0
-                            }
-                        ]
-                     <|
-                        text barTitle
-                    )
                 ]
+              <|
+                text
+                    ("\"" ++ String.toLower terms.term ++ "\"")
             ]
+        , detailFormat column
+            [ intelligibilityMaker shared terms
+            , detailBodyMaker TextLightGrey <|
+                text
+                    (case terms.explanation of
+                        NoClue ->
+                            "I have no fucking clue what this means."
+
+                        SpecificExplanation str ->
+                            str
+                    )
+            ]
+        ]
+
+
+intelligibilityMaker : Shared.Model -> Terms -> Element msg
+intelligibilityMaker shared terms =
+    detailFormat row
+        [ el
+            (case ( shared.device.class, shared.device.orientation ) of
+                ( Phone, Portrait ) ->
+                    []
+
+                ( Tablet, Portrait ) ->
+                    []
+
+                _ ->
+                    if not shared.isNavbarExpanded then
+                        [ tooltip IsLeft
+                            "This represents my confidence that the term can be understood from at least one viewpoint."
+                        ]
+
+                    else
+                        []
+            )
+          <|
+            detailTitleMaker TextLightGrey "Intelligibility:"
         , barPadding
             [ barMaker shared getIntelligibilityTooltip terms.strength ]
         ]
 
 
-tooltipMessage : String
-tooltipMessage =
-    "This represents my confidence that the term can be understood from at least one viewpoint."
-
-
-barTitle : String
-barTitle =
-    "Intelligibility:"
-
-
 getIntelligibilityTooltip : Int -> String
 getIntelligibilityTooltip num =
     case num of

frontend/src/Pages/Donate.elm

@@ -21,7 +21,11 @@ import Config.Helpers.Cards.Inner.Text
         , listItem
         , listMaker
         )
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
 import Config.Helpers.Headers.Helpers exposing (headerMaker)
@@ -274,9 +278,8 @@ preferenceMaker shared donate =
 
                 _ ->
                     if not shared.isNavbarExpanded then
-                        [ tooltip
+                        [ tooltip IsLeft
                             "This represents how strongly I prefer a given platform relative to other platforms."
-                            True
                         ]
 
                     else

frontend/src/Pages/Interviews.elm

@@ -26,7 +26,11 @@ import Config.Helpers.Cards.Inner.Text
         , listMaker2
         , socialMaker
         )
-import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip)
+import Config.Helpers.Cards.Inner.ToolTip
+    exposing
+        ( ToolTipPosition(..)
+        , tooltip
+        )
 import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker)
 import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..))
 import Config.Helpers.Converters exposing (formatSocial)
@@ -76,6 +80,7 @@ import Element as E
         , alignTop
         , column
         , el
+        , explain
         , fill
         , newTabLink
         , none
@@ -277,9 +282,8 @@ experienceMaker shared appearanceEntry =
 
                 _ ->
                     if not shared.isNavbarExpanded then
-                        [ tooltip
+                        [ tooltip IsLeft
                             "This represents the pleasantness of the host."
-                            True
                         ]
 
                     else