feat: changed argument formatting

This commit is contained in:
Nick 2024-11-22 02:19:27 -06:00
parent 9a8594d560
commit 73a5a13100
55 changed files with 223 additions and 30 deletions

View file

@ -9,7 +9,7 @@ import Element.Background as B exposing (..)
import Element.Border as D exposing (..)
import Element.Events as V exposing (..)
import Element.Font as F exposing (..)
import Html
import Html exposing (div, hr)
import Html.Attributes as H exposing (style, title, wrap)
import Layouts
import Page exposing (Page)
@ -30,7 +30,7 @@ argumentMaker argument =
in
List.indexedMap
(\index argumentEntry ->
column (paragraphFormat ++ [ spacing 3, paddingEach { top = 30, right = 0, bottom = 0, left = 0 } ])
column (paragraphFormat ++ [ spacing 3, paddingEach { top = 0, right = 0, bottom = 0, left = 0 }, E.width <| px 550, centerX ])
(List.indexedMap
(\premiseIndex premiseWithNotation ->
column argumentFormatting
@ -40,7 +40,7 @@ argumentMaker argument =
|> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
]
, paragraph argumentFormatting
[ text premiseWithNotation.notation
[ text ("(" ++ premiseWithNotation.notation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ]
]
]
@ -53,7 +53,7 @@ argumentMaker argument =
|> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ]
]
, paragraph argumentFormatting
[ text argumentEntry.conclusionNotation
[ text ("(" ++ argumentEntry.conclusionNotation ++ ")")
|> el [ F.color colourTheme.highlightText, F.bold ]
]
]
@ -84,12 +84,26 @@ argumentMaker argument =
]
in
column
[ 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
}
[ paragraphWidth, E.alignLeft, spacing 8, paddingEach { top = 0, right = 0, bottom = 0, left = 0 } ]
[ paragraph
(paragraphBoldFormat
++ [ F.size 20
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, alignBottom
, F.center
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
]
)
[ text argument.argumentTitle
--create expandable text for this in the future
]
@ -115,11 +129,11 @@ argumentMaker argument =
[ 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 ++ [ E.alignLeft, E.width fill ])
, wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill, paddingEach { top = 10, right = 0, bottom = 10, left = 0 } ])
[ E.table
[ spacing 0
, D.rounded 10
, D.width 1
, D.width 2
, D.color colourTheme.nonHighlightedDarkText
, clip
]
@ -176,5 +190,69 @@ argumentMaker argument =
]
}
]
, column [ centerX ] argRows
, column [ centerX ]
(argRows
++ [ column [ paragraphWidth, paddingEach { top = 5, right = 0, bottom = 0, left = 0 } ]
[ row [ centerX, E.width fill ]
[ column [ E.alignLeft ]
[ newTabLink
(paragraphBoldFormat
++ [ F.size 18
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, E.width <| px 120
, F.center
, E.alignRight
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
]
)
{ url = argument.proofLink
, label = text "Proof Tree"
}
]
, column [ E.alignRight ]
[ newTabLink
(paragraphBoldFormat
++ [ F.size 18
, F.color colourTheme.backgroundColour
, B.color colourTheme.highlightText
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
, D.width 1
, D.rounded 20
, E.width <| px 120
, F.center
, transitionStyle
, mouseOver
[ B.color colourTheme.highlightTextHover
, F.color colourTheme.nonHighlightedText
, D.color colourTheme.highlightTextHover
]
]
)
{ url = argument.proofLink
, label = text "Back to Top"
}
]
], basicDivider
]
]
)
]
basicDivider =
el
[ E.width fill
, padding 20
, D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
, D.color (rgb255 200 200 200)
]
none