feat: added tooltips

frontend/src/Config/Format.elm

@@ -1,16 +1,18 @@
 module Config.Format exposing (..)
 
 import Config.Colour exposing (..)
-import Element 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)
 
 
 topLevelContainer : Element msg -> Element msg
 topLevelContainer =
     el
-        [ width fill
+        [ E.width fill
         , height fill
         , B.color colourTheme.backgroundColour
         ]
@@ -50,7 +52,7 @@ transitionNonHighlightedLinkHover =
 transitionNonHighlightedLinkHoverWithMove : Element msg -> Element msg
 transitionNonHighlightedLinkHoverWithMove content =
     el
-        [ width fill
+        [ E.width fill
         , height (px 30)
         ]
         (el
@@ -152,7 +154,7 @@ paragraphBoldFormat =
 
 paragraphWidth : Attribute msg
 paragraphWidth =
-    width <| px 700
+    E.width <| px 700
 
 
 paragraphAlignLeft : List (Attr () msg)
@@ -172,3 +174,35 @@ paragraphColumnFormat =
     [ spacing 20
     , paragraphWidth
     ]
+
+
+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
+        , 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 }
+        ]
+        (text str)
+
+tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg
+tooltip usher tooltip_ =
+    inFront <|
+        el
+            [ E.width fill
+            , height fill
+            , transparent True
+            , mouseOver [ transparent False ]
+            , (usher << map never) <|
+                el [ htmlAttribute (style "pointerEvents" "none") ]
+                    tooltip_
+            ]
+            none

frontend/src/Debate/Helpers.elm

@@ -4,10 +4,11 @@ import Config.Colour as T exposing (..)
 import Config.Format as O exposing (..)
 import Debate.Types exposing (..)
 import Effect exposing (Effect)
-import Element exposing (..)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
 import Element.Border as D exposing (..)
 import Element.Events as V exposing (..)
-import Element.Font as F
+import Element.Font as F exposing (..)
 import Html
 import Html.Attributes as H exposing (style, title, wrap)
 import Layouts
@@ -64,34 +65,59 @@ argumentMaker argument =
         maybeReductioField : Element msg
         maybeReductioField =
             case argument.propositionReductio of
-                "" -> 
+                "" ->
                     none
-                    
+
                 reductio ->
-                    paragraph (paragraphBoldFormat ++ [ F.size 18 ])
+                    row []
-                        [ text "Reductio: " |> el [ F.color colourTheme.highlightText ]
+                        [ column
-                        , text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ], text " Ⓘ" -- create a tooltip for this in the future
+                            [ E.alignTop, E.alignLeft ]
+                            [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+                                [ text "Reductio:" |> el [ F.color colourTheme.highlightText ]
+                                ]
+                            ]
+                        , column [ E.width fill, E.alignLeft ]
+                            [ paragraph []
+                                [ text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
+                                , el [ tooltip below (myTooltip "These are the propositions from which the reductio ad absurdum is derived") ] (text " Ⓘ") |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
+                                ]
+                            ]
                         ]
     in
     column
-        [ paragraphWidth, alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 60, left = 0 } ]
+        [ paragraphWidth, E.alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 60, left = 0 } ]
         [ paragraph (paragraphBoldFormat ++ [ F.size 20 ])
             [ newTabLink []
                 { url = argument.proofLink
                 , label = transitionNonHighlightedLinkHover <| text argument.argumentTitle
-                } --create expandable text for this in the future
+                }
+
+            --create expandable text for this in the future
             ]
-        , paragraph (paragraphBoldFormat ++ [ F.size 18 ])
+        , row []
-            [ text "Proposition: " |> el [ F.color colourTheme.highlightText ]
+            [ column
-            , text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
+                [ E.alignTop, E.alignLeft ]
+                [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+                    [ 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 ] ] ]
             ]
         , maybeReductioField
-        , paragraph (paragraphBoldFormat ++ [ F.size 18 ])
+        , row [ E.alignTop ]
-            [ text "Summary: " |> el [ F.color colourTheme.highlightText ]
+            [ column
-            , text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
+                [ E.alignTop, E.alignLeft ]
+                [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
+                    [ text "Summary:" |> el [ F.color colourTheme.highlightText ]
+                    ]
+                ]
+            , column
+                [ E.width fill, E.alignLeft ]
+                [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
             ]
-        , wrappedRow (paragraphBoldFormat ++ [ alignLeft ])
+        , wrappedRow (paragraphBoldFormat ++ [ E.alignLeft ])
-            [ Element.table
+            [ E.table
                 [ spacing 0
                 , D.rounded 10
                 , D.width 1
@@ -117,7 +143,7 @@ argumentMaker argument =
                                     , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 }
                                     , D.color colourTheme.nonHighlightedDarkText
                                     , padding 8
-                                    , Element.height fill
+                                    , E.height fill
                                     ]
                                     [ row [ centerX ]
                                         [ paragraph [] [ text definition.definiendum ]
@@ -141,7 +167,7 @@ argumentMaker argument =
                                     , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 }
                                     , D.color colourTheme.nonHighlightedDarkText
                                     , padding 8
-                                    , Element.height fill
+                                    , E.height fill
                                     ]
                                     [ row []
                                         [ paragraph [] [ text definition.definiens ]