feat: refactored some stuff

frontend/src/Config/Format.elm

@@ -160,46 +160,6 @@ paragraphAlignCenter =
         ++ paragraphText
 
 
-myTooltip : String -> Element msg
-myTooltip str =
-    el
-        [ B.color colourTheme.backgroundColour
-        , F.color colourTheme.nonHighlightedText
-        , padding 15
-        , D.rounded 5
-        , D.width 2
-        , F.center
-        , clip
-        , E.width <| px 300
-        , D.color colourTheme.highlightText
-        , F.size 15
-        , D.shadow
-            { offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 }
-        , E.htmlAttribute (H.style "position" "fixed")
-        , E.htmlAttribute (H.style "z-index" "9999")
-        , F.color colourTheme.nonHighlightedText
-        , F.regular
-        , F.size 14
-        ]
-        (text str)
-
-
-tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg
-tooltip usher tooltip_ =
-    inFront <|
-        el
-            [ E.width fill
-            , height fill
-            , transparent True
-            , htmlAttribute <| style "transition" "all 0.1s ease-in-out"
-            , mouseOver [ transparent False ]
-            , (usher << map never) <|
-                el [ htmlAttribute (style "pointerEvents" "none") ]
-                    tooltip_
-            ]
-            none
-
-
 basicDivider : Element msg
 basicDivider =
     el

frontend/src/Config/StrengthBar.elm

@@ -2,6 +2,7 @@ module Config.StrengthBar exposing (..)
 
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
+import Config.ToolTip exposing (..)
 import Cuckery.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -33,6 +34,6 @@ barMaker getTooltip num =
                     ]
             }
          ]
-            ++ [ tooltip below (myTooltip (getTooltip num)) ]
+            ++ [ tooltip (getTooltip num) ]
         )
         none

frontend/src/Config/ToolTip.elm

@@ -0,0 +1,45 @@
+module Config.ToolTip exposing (..)
+
+import Config.Colour exposing (..)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D exposing (..)
+import Element.Font as F
+import Html exposing (col)
+import Html.Attributes as H exposing (style)
+
+
+tooltip : String -> Attribute msg
+tooltip content =
+    inFront <|
+        el
+            [ E.width fill
+            , height fill
+            , transparent True
+            , mouseOver [ transparent False ]
+            , htmlAttribute <| H.style "z-index" "4"
+            , htmlAttribute <| style "transition" "all 0.3s ease-in-out"
+            , below <|
+                el [ htmlAttribute (H.style "pointerEvents" "none") ] <|
+                    el
+                        [ E.width <| px 300
+                        , htmlAttribute <| H.style "z-index" "4"
+                        , F.size 15
+                        , F.center
+                        , F.regular
+                        , B.color colourTheme.backgroundColour
+                        , F.color colourTheme.nonHighlightedText
+                        , padding 15
+                        , D.color colourTheme.highlightText
+                        , D.rounded 5
+                        , D.width 2
+                        , D.shadow
+                            { offset = ( 0, 3 )
+                            , blur = 6
+                            , size = 0
+                            , color = rgba 0 0 0 0.32
+                            }
+                        ]
+                        (text content)
+            ]
+            none

frontend/src/Cuckery/Helpers.elm

@@ -39,7 +39,12 @@ cuckMaker cuck =
         ]
 
 
-cuckImage : Cuck -> { src : String, description : String }
+cuckImage :
+    Cuck
+    ->
+        { src : String
+        , description : String
+        }
 cuckImage cuck =
     { src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
     , description = cuck.cuckName
@@ -53,7 +58,11 @@ cuckTitle cuck =
 
 dodgeMaker : Cuck -> Element msg
 dodgeMaker cuck =
-    column [ spacing 15, width fill ] <|
+    column
+        [ spacing 15
+        , width fill
+        ]
+    <|
         List.map2 (\x y -> makeDodge x y)
             cuck.cuckDodges
             (List.range 1 (List.length cuck.cuckDodges))
@@ -217,7 +226,10 @@ circumstanceMaker dodgeEntry =
 propositionMaker : Dodge -> Element msg
 propositionMaker dodgeEntry =
     row paragraphBoldFormat
-        [ column [ alignTop, dodgeWidth ]
+        [ column
+            [ alignTop
+            , dodgeWidth
+            ]
             [ text "Proposition:"
             ]
         , column
@@ -232,10 +244,16 @@ propositionMaker dodgeEntry =
 attitudeMaker : Dodge -> Element msg
 attitudeMaker dodgeEntry =
     row (paragraphBoldFormat ++ [ width fill ])
-        [ column [ alignTop, dodgeWidth ]
+        [ column
+            [ alignTop
+            , dodgeWidth
+            ]
             [ text "Attitude:"
             ]
-        , column [ E.width fill, alignLeft ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
             [ case dodgeEntry.dodgeNicksDoxasticState of
                 Nothing ->
                     paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
@@ -309,10 +327,16 @@ reductioMaker dodgeEntry =
 reasonMaker : Dodge -> Element msg
 reasonMaker dodgeEntry =
     row (paragraphBoldFormat ++ [ width fill ])
-        [ column [ alignTop, dodgeWidth ]
+        [ column
+            [ alignTop
+            , dodgeWidth
+            ]
             [ text "Reason:"
             ]
-        , column [ E.width fill, alignLeft ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
             [ paragraph [ F.regular ]
                 [ text <|
                     case dodgeEntry.dodgeNicksDoxasticReason of
@@ -332,10 +356,16 @@ reasonMaker dodgeEntry =
 displayFallacy : String -> Element msg
 displayFallacy fallacyText =
     row paragraphBoldFormat
-        [ column [ alignTop, dodgeWidth ]
+        [ column
+            [ alignTop
+            , dodgeWidth
+            ]
             [ text "Fallacy:"
             ]
-        , column [ E.width fill, alignLeft ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
             [ paragraph [ F.regular ]
                 [ text fallacyText ]
             ]

frontend/src/Debate/Helpers.elm

@@ -4,6 +4,7 @@ import Config.CardFormat exposing (..)
 import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Config.StrengthBar exposing (..)
+import Config.ToolTip exposing (..)
 import Debate.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -64,11 +65,25 @@ propositionMaker argument =
         [ column
             [ E.alignTop, E.alignLeft ]
             [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
-                [ el [ tooltip below (myTooltip "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate.") ] (text "Proposition:") |> el [ F.color colourTheme.highlightText ] ]
+                [ el
+                    [ tooltip
+                        "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
+                    ]
+                    (text "Proposition:")
+                    |> el [ F.color colourTheme.highlightText ]
+                ]
             ]
         , column
             [ E.width fill, E.alignLeft ]
-            [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
+            [ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
+                [ text argument.propositionTitle
+                    |> el
+                        [ F.color colourTheme.nonHighlightedText
+                        , F.regular
+                        , F.size 16
+                        ]
+                ]
+            ]
         ]
 
 
@@ -79,15 +94,37 @@ reductioMaker argument =
             none
 
         reductio ->
-            row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
+            row
+                [ paddingEach
+                    { top = 10
+                    , right = 0
+                    , bottom = 0
+                    , left = 0
+                    }
+                ]
                 [ column
                     [ E.alignTop, E.alignLeft ]
-                    [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+                    [ paragraph
-                        [ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ]
+                        (paragraphBoldFormat
+                            ++ [ F.size 18
+                               , E.width <| px 100
+                               ]
+                        )
+                        [ el
+                            [ tooltip
+                                "This is the position from which the reductio ad absurdum is derived."
+                            ]
+                            (text "Reductio:")
+                            |> el [ F.color colourTheme.highlightText ]
                         ]
                     ]
                 , column [ E.width fill, E.alignLeft ]
-                    [ paragraph (paragraphFormat ++ [ F.size 18, spacing 3 ])
+                    [ paragraph
+                        (paragraphFormat
+                            ++ [ F.size 18
+                               , spacing 3
+                               ]
+                        )
                         [ text reductio ]
                     ]
                 ]
@@ -97,14 +134,41 @@ summaryMaker : Argument -> Element msg
 summaryMaker argument =
     row []
         [ column
-            [ E.alignTop, E.alignLeft ]
+            [ E.alignTop
-            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+            , E.alignLeft
-                [ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (text "Summary:") |> el [ F.color colourTheme.highlightText ]
+            ]
+            [ paragraph
+                (paragraphBoldFormat
+                    ++ [ F.size 18
+                       , E.width <| px 100
+                       ]
+                )
+                [ el
+                    [ tooltip
+                        "The following information provides additional context and insight into the reasoning behind the argument."
+                    ]
+                    (text "Summary:")
+                    |> el [ F.color colourTheme.highlightText ]
                 ]
             ]
         , column
-            [ E.width fill, E.alignLeft ]
+            [ E.width fill
-            [ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
+            , E.alignLeft
+            ]
+            [ paragraph
+                (paragraphBoldFormat
+                    ++ [ F.size 18
+                       , spacing 3
+                       ]
+                )
+                [ text argument.propositionSummary
+                    |> el
+                        [ F.color colourTheme.nonHighlightedText
+                        , F.regular
+                        , F.size 16
+                        ]
+                ]
+            ]
         ]
 
 
@@ -112,12 +176,28 @@ strengthMaker : Argument -> Element msg
 strengthMaker argument =
     row [ E.width fill ]
         [ column
-            [ E.alignTop, E.alignLeft ]
+            [ E.alignTop
-            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+            , E.alignLeft
-                [ el [ tooltip below (myTooltip "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ]
+            ]
+            [ paragraph
+                (paragraphBoldFormat
+                    ++ [ F.size 18
+                       , E.width <| px 100
+                       ]
+                )
+                [ el
+                    [ tooltip
+                        "This represents my confidence in the soundness of the argument."
+                    ]
+                    (text "Confidence:")
+                    |> el [ F.color colourTheme.highlightText ]
+                ]
             ]
         , column
-            [ E.width fill, E.alignLeft, centerY ]
+            [ E.width fill
+            , E.alignLeft
+            , centerY
+            ]
             [ barMaker getConfidenceTooltip argument.argumentCertainty ]
         ]
 
@@ -164,50 +244,17 @@ getConfidenceTooltip num =
 
 tableMaker : Argument -> Element msg
 tableMaker argument =
-    let
+    column
-        formalizationMaker : List (Element msg)
+        [ centerX
-        formalizationMaker =
+        , E.width <| px 600
-            let
-                argumentFormatting : List (Attribute msg)
-                argumentFormatting =
-                    [ centerX, F.center, spacing 3 ]
-            in
-            List.indexedMap
-                (\index argumentEntry ->
-                    column (paragraphFormat ++ [ spacing 3, centerX, E.width <| px 500, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ])
-                        (List.indexedMap
-                            (\premiseIndex premiseWithNotation ->
-                                column argumentFormatting
-                                    [ paragraph paragraphHightlightedBoldText
-                                        [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
-                                        , text premiseWithNotation.premise
-                                            |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
-                                        ]
-                                    , paragraph argumentFormatting
-                                        [ text ("(" ++ premiseWithNotation.notation ++ ")")
-                                            |> el [ F.color colourTheme.highlightText, F.bold ]
         ]
+        ([ wrappedRow
+            (paragraphBoldFormat
+                ++ [ E.alignLeft
+                   , E.width fill
+                   , htmlAttribute <| H.style "position" "relative"
                    ]
             )
-                            argumentEntry.premises
-                            ++ [ column argumentFormatting
-                                    [ paragraph paragraphHightlightedBoldText
-                                        [ text "C)"
-                                        , text argumentEntry.conclusion
-                                            |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
-                                        ]
-                                    , paragraph argumentFormatting
-                                        [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")")
-                                            |> el [ F.color colourTheme.highlightText, F.bold ]
-                                        ]
-                                    ]
-                               ]
-                        )
-                )
-                argument.argumentFormalization
-    in
-    column [ centerX, E.width <| px 600 ]
-        [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
             [ E.table
                 [ spacing 0
                 , D.rounded 10
@@ -220,18 +267,30 @@ tableMaker argument =
                     [ { header =
                             el
                                 [ F.bold
-                                , D.widthEach { bottom = 1, top = 1, left = 1, right = 1 }
+                                , D.widthEach
+                                    { bottom = 1
+                                    , top = 1
+                                    , left = 1
+                                    , right = 1
+                                    }
                                 , D.color colourTheme.nonHighlightedDarkText
                                 , padding 8
+                                , E.width fill
                                 ]
-                                (text "Definiendum" |> el [ F.color colourTheme.highlightText ])
+                                (text "Definiendum")
+                                |> el [ F.color colourTheme.highlightText ]
                       , width = fill |> maximum 50
                       , view =
                             \definition ->
                                 row
                                     [ F.color colourTheme.highlightText
                                     , F.bold
-                                    , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 }
+                                    , D.widthEach
+                                        { bottom = 1
+                                        , top = 0
+                                        , left = 1
+                                        , right = 1
+                                        }
                                     , D.color colourTheme.nonHighlightedDarkText
                                     , padding 8
                                     , E.height fill
@@ -244,18 +303,30 @@ tableMaker argument =
                     , { header =
                             el
                                 [ F.bold
-                                , D.widthEach { bottom = 1, top = 1, left = 0, right = 1 }
+                                , D.widthEach
+                                    { bottom = 1
+                                    , top = 1
+                                    , left = 0
+                                    , right = 1
+                                    }
                                 , D.color colourTheme.nonHighlightedDarkText
                                 , padding 8
+                                , E.width fill
                                 ]
-                                (text "Definiens" |> el [ F.color colourTheme.highlightText ])
+                                (text "Definiens")
+                                |> el [ F.color colourTheme.highlightText ]
                       , width = fill
                       , view =
                             \definition ->
                                 paragraph
                                     [ F.color colourTheme.nonHighlightedText
                                     , F.regular
-                                    , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 }
+                                    , D.widthEach
+                                        { bottom = 1
+                                        , top = 0
+                                        , left = 0
+                                        , right = 1
+                                        }
                                     , D.color colourTheme.nonHighlightedDarkText
                                     , padding 8
                                     , E.height fill
@@ -268,20 +339,113 @@ tableMaker argument =
                     ]
                 }
             ]
-        , column [ centerX ] formalizationMaker
          ]
+            ++ formalizationMaker argument
+        )
+
+
+formalizationMaker : Argument -> List (Element msg)
+formalizationMaker argument =
+    let
+        argumentFormatting : List (Attribute msg)
+        argumentFormatting =
+            [ centerX
+            , F.center
+            , spacing 3
+            ]
+    in
+    List.indexedMap
+        (\index argumentEntry ->
+            column
+                (paragraphFormat
+                    ++ [ spacing 3
+                       , centerX
+                       , E.width <| px 500
+                       , paddingEach
+                            { top = 10
+                            , right = 0
+                            , bottom = 0
+                            , left = 0
+                            }
+                       ]
+                )
+                (List.indexedMap
+                    (\premiseIndex premiseWithNotation ->
+                        column argumentFormatting
+                            [ paragraph paragraphHightlightedBoldText
+                                [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")")
+                                , text premiseWithNotation.premise
+                                    |> el
+                                        [ F.color colourTheme.nonHighlightedText
+                                        , F.regular
+                                        , paddingEach
+                                            { top = 0
+                                            , right = 0
+                                            , bottom = 0
+                                            , left = 5
+                                            }
+                                        ]
+                                ]
+                            , paragraph argumentFormatting
+                                [ text ("(" ++ premiseWithNotation.notation ++ ")")
+                                    |> el [ F.color colourTheme.highlightText, F.bold ]
+                                ]
+                            ]
+                    )
+                    argumentEntry.premises
+                    ++ [ column argumentFormatting
+                            [ paragraph paragraphHightlightedBoldText
+                                [ text "C)"
+                                , text argumentEntry.conclusion
+                                    |> el
+                                        [ F.color colourTheme.nonHighlightedText
+                                        , F.regular
+                                        , paddingEach
+                                            { top = 0
+                                            , right = 0
+                                            , bottom = 0
+                                            , left = 5
+                                            }
+                                        ]
+                                ]
+                            , paragraph argumentFormatting
+                                [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")")
+                                    |> el
+                                        [ F.color colourTheme.highlightText
+                                        , F.bold
+                                        ]
+                                ]
+                            ]
+                       ]
+                )
+        )
+        argument.argumentFormalization
 
 
 proofTreeMaker : Argument -> Element msg
 proofTreeMaker argument =
-    row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ]
+    row
+        [ paddingEach
+            { top = 10
+            , right = 0
+            , bottom = 10
+            , left = 0
+            }
+        , centerX
+        , E.width fill
+        ]
         [ column [ E.alignRight ]
             [ newTabLink
                 (paragraphBoldFormat
                     ++ [ F.size 18
                        , F.color colourTheme.nonHighlightedText
                        , B.color colourTheme.highlightTextHover
-                       , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
+                       , paddingEach
+                            { top = 6
+                            , bottom = 2
+                            , left = 12
+                            , right = 12
+                            }
                        , D.rounded 10
                        , E.width <| px 105
                        , F.center
@@ -305,8 +469,18 @@ basicDivider =
     el
         [ E.width fill
         , centerX
-        , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
+        , D.widthEach
+            { bottom = 1
+            , top = 0
+            , left = 0
+            , right = 0
+            }
         , D.color (rgb255 200 200 200)
-        , paddingEach { top = 40, bottom = 0, left = 0, right = 0 }
+        , paddingEach
+            { top = 40
+            , bottom = 0
+            , left = 0
+            , right = 0
+            }
         ]
         none

frontend/src/Interviews/Helpers.elm

@@ -4,6 +4,7 @@ import Config.CardFormat exposing (..)
 import Config.Colour exposing (..)
 import Config.Format exposing (..)
 import Config.StrengthBar exposing (..)
+import Config.ToolTip exposing (..)
 import Cuckery.Types exposing (..)
 import Effect exposing (Effect)
 import Element as E exposing (..)
@@ -97,14 +98,17 @@ makeAppearance appearanceEntry index =
                ]
         )
         [ row
-            [ width fill
+            (paragraphFormat
+                ++ [ F.size 18
+                   , E.width fill
                    , paddingEach
                         { top = 0
-                , right = 0
                         , bottom = 0
                         , left = 35
+                        , right = 0
                         }
                    ]
+            )
             [ column
                 (paragraphFormat
                     ++ [ F.size 18
@@ -118,18 +122,32 @@ makeAppearance appearanceEntry index =
                 [ spacing 8
                 , width fill
                 ]
-                [ column
+                [ episodeMaker appearanceEntry
-                    [ spacing 8
+                , experienceMaker appearanceEntry
-                    , width fill
-                    ]
-                    [ experienceMaker appearanceEntry
                 , dateMaker appearanceEntry
                 , subjectMaker appearanceEntry
                 , subjectList appearanceEntry
                 ]
             ]
         ]
+
+
+episodeMaker : Appearance -> Element msg
+episodeMaker appearanceEntry =
+    paragraphLinkFormat
+        { url = appearanceEntry.appearanceLink
+        , label =
+            row
+                [ F.size 18
                 ]
+                [ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
+                    |> el
+                        [ F.color colourTheme.highlightText
+                        , mouseOver [ F.color colourTheme.highlightTextHover ]
+                        , transitionStyle
+                        ]
+                ]
+        }
 
 
 experienceMaker : Appearance -> Element msg
@@ -139,12 +157,23 @@ experienceMaker appearanceEntry =
         , height fill
         ]
         [ column
-            [ E.alignTop, E.alignLeft ]
+            [ 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:") ]
+                [ el
+                    [ tooltip
+                        "This represents how pleasant it was to interact with the host(s)."
+                    ]
+                    (text "Pleasantness:")
+                ]
             ]
         , column
-            [ E.width fill, E.alignLeft ]
+            [ E.width fill
+            , E.alignLeft
+            , centerY
+            , height fill
+            ]
             [ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
         ]