upRootNutrition/website
1
0
Fork 0
mirror of https://gitlab.com/upRootNutrition/website.git synced 2025-06-16 12:25:12 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added tooltips

Browse source
This commit is contained in:
Nick 2024-11-20 22:47:57 -06:00
parent af6d19720a
commit d437fa785e
2 changed files with 83 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/Debate/Helpers.elm
View file

@ -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 ])
[ text "Reductio: " |> el [ F.color colourTheme.highlightText ]
, text reductio |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ], text " Ⓘ" -- create a tooltip for this in the future
row []
[ column
[ 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 ])
[ text "Proposition: " |> el [ F.color colourTheme.highlightText ]
, text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
, row []
[ column
[ 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 ])
[ text "Summary: " |> el [ F.color colourTheme.highlightText ]
, text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ]
, row [ E.alignTop ]
[ column
[ 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 ])
[ Element.table
, wrappedRow (paragraphBoldFormat ++ [ E.alignLeft ])
[ 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 ]