Merge branch 'main' into 'main'

fix: argument box scale transition working

See merge request BRBWaffles/website!1
This commit is contained in:
Nick Hiebert 2024-11-23 09:19:03 +00:00
commit b0bfebf044
3 changed files with 49 additions and 28 deletions

View file

@ -13,6 +13,7 @@ type alias Theme =
, highlightTextHover : Color , highlightTextHover : Color
, backgroundColour : Color , backgroundColour : Color
, debugColour : Color , debugColour : Color
, darker : Color
} }
@ -24,4 +25,5 @@ colourTheme =
, highlightTextHover = rgb255 120 60 0 , highlightTextHover = rgb255 120 60 0
, backgroundColour = rgb255 40 40 40 , backgroundColour = rgb255 40 40 40
, debugColour = rgb255 227 28 121 , debugColour = rgb255 227 28 121
, darker = rgb255 49 50 68
} }

View file

@ -20,8 +20,9 @@ topLevelContainer =
pageList : List (Attribute msg) pageList : List (Attribute msg)
pageList = pageList =
[ spacing 40 [ spacing 10
, centerX , -- Isaac yote me, fix me.
centerX
, centerY , centerY
, alignTop , alignTop
, paddingEach { top = 30, bottom = 30, left = 30, right = 30 } , paddingEach { top = 30, bottom = 30, left = 30, right = 30 }
@ -30,7 +31,7 @@ pageList =
transitionStyle : Attribute msg transitionStyle : Attribute msg
transitionStyle = transitionStyle =
htmlAttribute <| style "transition" "all .4s" htmlAttribute <| style "transition" "all 4s"
transitionHighlightedLinkHover : Element msg -> Element msg transitionHighlightedLinkHover : Element msg -> Element msg

View file

@ -33,14 +33,18 @@ argumentMaker onClickMsg areArgsExpanded argument indexExpand =
isArgumentExpanded = isArgumentExpanded =
withDefault False <| getAt indexExpand areArgsExpanded withDefault False <| getAt indexExpand areArgsExpanded
in in
column [ explain Debug.todo ] column
[ titleMaker onClickMsg indexExpand argument.argumentTitle [ B.color colourTheme.darker
, rounded 10
]
-- [ explain Debug.todo ]
[ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded
, paragraphMaker argument isArgumentExpanded , paragraphMaker argument isArgumentExpanded
] ]
titleMaker : (Int -> msg) -> Int -> String -> Element msg titleMaker : (Int -> msg) -> Int -> String -> Bool -> Element msg
titleMaker onClickMsg indexExpand title = titleMaker onClickMsg indexExpand title isArgExpanded =
paragraph paragraph
(paragraphBoldFormat (paragraphBoldFormat
++ [ F.size 20 ++ [ F.size 20
@ -48,17 +52,24 @@ titleMaker onClickMsg indexExpand title =
, B.color colourTheme.highlightText , B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 } , paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1 , D.width 1
, D.rounded 20 , roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }
, alignBottom , alignBottom
, F.center , F.center
, transitionStyle , transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover -- , mouseOver
, F.color colourTheme.nonHighlightedText -- [ B.color colourTheme.highlightTextHover
, D.color colourTheme.highlightTextHover -- , F.color colourTheme.nonHighlightedText
] -- , D.color colourTheme.highlightTextHover
-- ]
, V.onClick <| onClickMsg indexExpand , V.onClick <| onClickMsg indexExpand
] ]
++ (if isArgExpanded then
[ rounded 10 ]
else
[ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ]
)
) )
[ text title [ text title
] ]
@ -66,22 +77,29 @@ titleMaker onClickMsg indexExpand title =
paragraphMaker : Argument -> Bool -> Element msg paragraphMaker : Argument -> Bool -> Element msg
paragraphMaker argument isArgumentExpanded = paragraphMaker argument isArgumentExpanded =
row [] paragraph
[ -- column (if isArgumentExpanded then
-- [ E.alignTop, E.alignLeft ] [ height <| px 0
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) , transitionStyle
-- [-- el [ tooltip below (myTooltip titleTooltip) ] (text title) |> el [ F.color colourTheme.highlightText ] , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
-- ]
-- ]
-- ,
paragraph
(if isArgumentExpanded then
[ F.size 0, transitionStyle ]
else -- , B.color colourTheme.debugColour
[ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] ]
) -- []
[ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ]
else
[ height <| px 100
, transitionStyle
-- , B.color colourTheme.debugColour
]
)
[ text argument.propositionSummary
|> el
[ F.color colourTheme.nonHighlightedText
, F.regular
, F.size 16
]
] ]