upRootNutrition/website
1
0
Fork 0
mirror of https://gitlab.com/upRootNutrition/website.git synced 2025-06-16 04:25:11 -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

42
frontend/src/Config/Format.elm
View file

@ -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

60
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
@ -68,30 +69,55 @@ argumentMaker argument =
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 ]