mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
Merge branch 'main' into 'main'
fix: argument box scale transition working See merge request BRBWaffles/website!1
This commit is contained in:
commit
b0bfebf044
3 changed files with 49 additions and 28 deletions
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 []
|
|
||||||
[ -- column
|
|
||||||
-- [ E.alignTop, E.alignLeft ]
|
|
||||||
-- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
|
||||||
-- [-- el [ tooltip below (myTooltip titleTooltip) ] (text title) |> el [ F.color colourTheme.highlightText ]
|
|
||||||
-- ]
|
|
||||||
-- ]
|
|
||||||
-- ,
|
|
||||||
paragraph
|
paragraph
|
||||||
(if isArgumentExpanded then
|
(if isArgumentExpanded then
|
||||||
[ F.size 0, transitionStyle ]
|
[ height <| px 0
|
||||||
|
, transitionStyle
|
||||||
|
, roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 }
|
||||||
|
|
||||||
|
-- , B.color colourTheme.debugColour
|
||||||
|
]
|
||||||
|
-- []
|
||||||
|
|
||||||
else
|
else
|
||||||
[ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
|
[ height <| px 100
|
||||||
|
, transitionStyle
|
||||||
|
|
||||||
|
-- , B.color colourTheme.debugColour
|
||||||
|
]
|
||||||
)
|
)
|
||||||
[ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ]
|
[ text argument.propositionSummary
|
||||||
|
|> el
|
||||||
|
[ F.color colourTheme.nonHighlightedText
|
||||||
|
, F.regular
|
||||||
|
, F.size 16
|
||||||
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue