diff --git a/frontend/src/Config/Colour.elm b/frontend/src/Config/Colour.elm index bb4837c..4e22888 100755 --- a/frontend/src/Config/Colour.elm +++ b/frontend/src/Config/Colour.elm @@ -25,5 +25,5 @@ colourTheme = , highlightTextHover = rgb255 120 60 0 , backgroundColour = rgb255 40 40 40 , debugColour = rgb255 227 28 121 - , darker = rgb255 49 50 68 + , darker = rgb255 30 30 30 } diff --git a/frontend/src/Config/Format.elm b/frontend/src/Config/Format.elm index 41abb44..f388e0b 100755 --- a/frontend/src/Config/Format.elm +++ b/frontend/src/Config/Format.elm @@ -31,7 +31,7 @@ pageList = transitionStyle : Attribute msg transitionStyle = - htmlAttribute <| style "transition" "all 4s" + htmlAttribute <| style "transition" "all 0.4s ease-in-out" transitionHighlightedLinkHover : Element msg -> Element msg diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index d5334c2..f0510c9 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -13,6 +13,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.Attributes exposing (form) import Layouts import List.Extra exposing (..) import Maybe exposing (withDefault) @@ -23,7 +24,15 @@ import View exposing (View) --- argumentMaker : List Bool -> Argument -> Int -> Element msg +-- (if isArgumentExpanded then +-- [ height <| px 0 +-- , transitionStyle +-- , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 } +-- ] +-- else +-- [ +-- ] +-- ) argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg @@ -36,15 +45,34 @@ argumentMaker onClickMsg areArgsExpanded argument indexExpand = column [ B.color colourTheme.darker , rounded 10 + , E.width <| px 700 ] - -- [ explain Debug.todo ] [ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded - , paragraphMaker argument isArgumentExpanded + , column + ([ E.width <| px 650, centerX, transitionStyle ] + ++ (if not isArgumentExpanded then + [ height shrink + , transitionStyle + , clip + , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 } + ] + + else + [ transitionStyle + ] + ) + ) + [ propositionMaker argument isArgumentExpanded + , reductioMaker argument isArgumentExpanded + , summaryMaker argument isArgumentExpanded + , tableMaker argument isArgumentExpanded + , proofTreeMaker argument isArgumentExpanded + ] ] titleMaker : (Int -> msg) -> Int -> String -> Bool -> Element msg -titleMaker onClickMsg indexExpand title isArgExpanded = +titleMaker onClickMsg indexExpand title isArgumentExpanded = paragraph (paragraphBoldFormat ++ [ F.size 20 @@ -56,15 +84,15 @@ titleMaker onClickMsg indexExpand title isArgExpanded = , alignBottom , F.center , transitionStyle - - -- , mouseOver - -- [ B.color colourTheme.highlightTextHover - -- , F.color colourTheme.nonHighlightedText - -- , D.color colourTheme.highlightTextHover - -- ] + , pointer + , mouseOver + [ B.color colourTheme.highlightTextHover + , F.color colourTheme.nonHighlightedText + , D.color colourTheme.highlightTextHover + ] , V.onClick <| onClickMsg indexExpand ] - ++ (if isArgExpanded then + ++ (if not isArgumentExpanded then [ rounded 10 ] else @@ -75,250 +103,191 @@ titleMaker onClickMsg indexExpand title isArgExpanded = ] -paragraphMaker : Argument -> Bool -> Element msg -paragraphMaker argument isArgumentExpanded = - paragraph - (if isArgumentExpanded then - [ height <| px 0 - , transitionStyle - , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 } - - -- , B.color colourTheme.debugColour +propositionMaker : Argument -> Bool -> Element msg +propositionMaker argument isArgumentExpanded = + row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ el [ tooltip below (myTooltip "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate.") ] (text "Proposition:") |> el [ F.color colourTheme.highlightText ] ] ] - -- [] - - else - [ height <| px 100 - , transitionStyle - - -- , B.color colourTheme.debugColour - ] - ) - [ text argument.propositionSummary - |> el - [ F.color colourTheme.nonHighlightedText - , F.regular - , F.size 16 - ] + , column + [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ] ] +reductioMaker : Argument -> Bool -> Element msg +reductioMaker argument isArgumentExpanded = + case argument.propositionReductio of + "" -> + none --- argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg --- argumentMaker onClickMsg areArgsExpanded argument indexExpand = --- let --- maybeIsExpanded : Maybe Bool --- maybeIsExpanded = --- getAt indexExpand areArgsExpanded --- argRows : List (Element msg) --- argRows = --- let --- argumentFormatting : List (Attribute msg) --- argumentFormatting = --- [ centerX, F.center, spacing 3 ] --- in --- List.indexedMap --- (\index argumentEntry -> --- column (paragraphFormat ++ [ spacing 3, paddingEach { top = 0, right = 0, bottom = 0, left = 0 }, E.width <| px 550, centerX ]) --- (List.indexedMap --- (\premiseIndex premiseWithNotation -> --- column argumentFormatting --- [ paragraph paragraphHightlightedBoldText --- [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")") --- , text premiseWithNotation.premise --- |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ] --- ] --- , paragraph argumentFormatting --- [ text ("(" ++ premiseWithNotation.notation ++ ")") --- |> el [ F.color colourTheme.highlightText, F.bold ] --- ] --- ] --- ) --- argumentEntry.premises --- ++ [ column argumentFormatting --- [ paragraph paragraphHightlightedBoldText --- [ text "C)" --- , text argumentEntry.conclusion --- |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ] --- ] --- , paragraph argumentFormatting --- [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")") --- |> el [ F.color colourTheme.highlightText, F.bold ] --- ] --- ] --- ] --- ) --- ) --- argument.argumentFormalization --- maybeReductioField : Element msg --- maybeReductioField = --- case argument.propositionReductio of --- "" -> --- none --- reductio -> --- row [] --- [ column --- [ E.alignTop, E.alignLeft ] --- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) --- [ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (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 ] --- ] --- ] --- ] --- in --- column --- [ paragraphWidth --- , E.alignLeft --- , spacing 8 --- , explain Debug.todo --- ] --- [ 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 --- ] --- , V.onClick <| onClickMsg indexExpand --- ] --- ) --- [ text argument.argumentTitle --- ] --- , paragraph --- (case maybeIsExpanded of --- Just True -> --- [ F.size 0, transitionStyle ] --- _ -> --- [ transitionStyle, F.size 50 ] --- ) --- [ row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] --- [ column --- [ E.alignTop, E.alignLeft ] --- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) --- [ el [ tooltip below (myTooltip "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate.") ] (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 --- , row [ E.alignTop ] --- [ column --- [ E.alignTop, E.alignLeft ] --- [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) --- [ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (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 ++ [ E.alignLeft, E.width fill, paddingEach { top = 10, right = 0, bottom = 10, left = 0 } ]) --- [ E.table --- [ spacing 0 --- , D.rounded 10 --- , D.width 2 --- , D.color colourTheme.nonHighlightedDarkText --- , clip --- ] --- { data = argument.definitionTable --- , columns = --- [ { header = --- el --- [ F.bold --- , D.widthEach { bottom = 1, top = 1, left = 1, right = 1 } --- , D.color colourTheme.nonHighlightedDarkText --- , padding 8 --- ] --- (text "Definiendum" |> el [ F.color colourTheme.highlightText ]) --- , width = fill |> maximum 50 --- , view = --- \definition -> --- row --- [ F.color colourTheme.highlightText --- , F.bold --- , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 } --- , D.color colourTheme.nonHighlightedDarkText --- , padding 8 --- , E.height fill --- ] --- [ row [ centerX ] --- [ paragraph [] [ text definition.definiendum ] --- ] --- ] --- } --- , { header = --- el --- [ F.bold --- , D.widthEach { bottom = 1, top = 1, left = 0, right = 1 } --- , D.color colourTheme.nonHighlightedDarkText --- , padding 8 --- ] --- (text "Definiens" |> el [ F.color colourTheme.highlightText ]) --- , width = fill --- , view = --- \definition -> --- paragraph --- [ F.color colourTheme.nonHighlightedText --- , F.regular --- , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 } --- , D.color colourTheme.nonHighlightedDarkText --- , padding 8 --- , E.height fill --- ] --- [ row [] --- [ paragraph [] [ text definition.definiens ] --- ] --- ] --- } --- ] --- } --- ] --- , column [ centerX ] --- (argRows --- ++ [ column [ paragraphWidth, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] --- [ row [ centerX, E.width fill ] --- [ 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 105 --- , 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" --- } --- ] --- ] --- ] --- -- , basicDivider --- ] --- ) --- ] --- ] + reductio -> + row [] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ el [ tooltip below (myTooltip "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ] + ] + ] + , column [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) + [ text reductio ] + ] + ] + + +summaryMaker : Argument -> Bool -> Element msg +summaryMaker argument isArgumentExpanded = + row [] + [ column + [ E.alignTop, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ]) + [ el [ tooltip below (myTooltip "The following information provides additional context and insight into the reasoning behind the argument") ] (text "Summary:") |> el [ F.color colourTheme.highlightText ] + ] + ] + , column + [ E.width fill, E.alignLeft ] + [ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ] + ] + + +tableMaker : Argument -> Bool -> Element msg +tableMaker argument isArgumentExpanded = + let + formalizationMaker : List (Element msg) + formalizationMaker = + let + argumentFormatting : List (Attribute msg) + argumentFormatting = + [ centerX, F.center, spacing 3 ] + in + List.indexedMap + (\index argumentEntry -> + column (paragraphFormat ++ [ spacing 3, E.width <| px 500, centerX ]) + (List.indexedMap + (\premiseIndex premiseWithNotation -> + column argumentFormatting + [ paragraph paragraphHightlightedBoldText + [ text ("P" ++ String.fromInt (premiseIndex + 1) ++ ")") + , text premiseWithNotation.premise + |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ] + ] + , paragraph argumentFormatting + [ text ("(" ++ premiseWithNotation.notation ++ ")") + |> el [ F.color colourTheme.highlightText, F.bold ] + ] + ] + ) + argumentEntry.premises + ++ [ column argumentFormatting + [ paragraph paragraphHightlightedBoldText + [ text "C)" + , text argumentEntry.conclusion + |> el [ F.color colourTheme.nonHighlightedText, F.regular, paddingEach { top = 0, right = 0, bottom = 0, left = 5 } ] + ] + , paragraph argumentFormatting + [ text ("(∴" ++ argumentEntry.conclusionNotation ++ ")") + |> el [ F.color colourTheme.highlightText, F.bold ] + ] + ] + ] + ) + ) + argument.argumentFormalization + in + column [ centerX ] + [ 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 2 + , D.color colourTheme.nonHighlightedDarkText + , clip + ] + { data = argument.definitionTable + , columns = + [ { header = + el + [ F.bold + , D.widthEach { bottom = 1, top = 1, left = 1, right = 1 } + , D.color colourTheme.nonHighlightedDarkText + , padding 8 + ] + (text "Definiendum" |> el [ F.color colourTheme.highlightText ]) + , width = fill |> maximum 50 + , view = + \definition -> + row + [ F.color colourTheme.highlightText + , F.bold + , D.widthEach { bottom = 1, top = 0, left = 1, right = 1 } + , D.color colourTheme.nonHighlightedDarkText + , padding 8 + , E.height fill + ] + [ row [ centerX ] + [ paragraph [] [ text definition.definiendum ] + ] + ] + } + , { header = + el + [ F.bold + , D.widthEach { bottom = 1, top = 1, left = 0, right = 1 } + , D.color colourTheme.nonHighlightedDarkText + , padding 8 + ] + (text "Definiens" |> el [ F.color colourTheme.highlightText ]) + , width = fill + , view = + \definition -> + paragraph + [ F.color colourTheme.nonHighlightedText + , F.regular + , D.widthEach { bottom = 1, top = 0, left = 0, right = 1 } + , D.color colourTheme.nonHighlightedDarkText + , padding 8 + , E.height fill + ] + [ row [] + [ paragraph [] [ text definition.definiens ] + ] + ] + } + ] + } + ] + , column [ centerX ] formalizationMaker + ] + + +proofTreeMaker : Argument -> Bool -> Element msg +proofTreeMaker argument isArgumentExpanded = + row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ] + [ 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 10 + , E.width <| px 105 + , 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" + } + ] + ] diff --git a/frontend/src/Pages/Arguments.elm b/frontend/src/Pages/Arguments.elm index 1497771..17f281f 100755 --- a/frontend/src/Pages/Arguments.elm +++ b/frontend/src/Pages/Arguments.elm @@ -158,57 +158,54 @@ debateList model = List.map2 (argumentMaker ToggleExpandArg model.areArgsExpanded) [ argumentApoBCVD , argumentAnabolicKeto + , argumentAntagonisticPleiotropy + , argumentCarbsObesity + , argumentDietaryCholesterol + , argumentFructoseNAFLD + , argumentHealthPromotingFoods + , argumentHealthSeeker + , argumentHealthyChocolate + , argumentHealthyDairy + , argumentHealthyFattyFish + , argumentHealthyFibre + , argumentHealthyFood + , argumentHealthyPlantFoods + , argumentHealthySeedOils + , argumentHealthySoy + , argumentMalondialdehyde + , argumentOmega3Omega6Ratio + , argumentPlantBasedCVDReversal + , argumentPolyphenolReductio + , argumentSodiumCVD + , argumentTMAOCausality + , argumentUnhealthyCoconutOil + , argumentUnhealthyProcessedMeat + , argumentUnhealthyRedMeat + , argumentUnhealthySaturatedFat + , argumentAbortion + , argumentAgnosticism + , argumentAgriculturalPredation + , argumentAnimalRights + , argumentAntiRewilding + , argumentAntiVandalism + , argumentColonizingNature + , argumentCropDeaths + , argumentDairyCowRape + , argumentEfilismPatrolSquad + , argumentEthicalSlurs + , argumentFineTuning + , argumentImmortalityReductio + , argumentOddOrderPredators + , argumentOstroveganism + , argumentPollinationReductio + , argumentScratcherPioneers + , argumentTransPeople + , argumentVeganSocietyReductio + , argumentBoobyTrapPagers + , argumentEpidemiologyCausality + , argumentFlatEarthDebunk + , argumentTruncatedMeta ] <| List.range 0 <| List.length model.areArgsExpanded - - - --- , argumentAntagonisticPleiotropy --- , argumentCarbsObesity --- , argumentDietaryCholesterol --- , argumentFructoseNAFLD --- , argumentHealthPromotingFoods --- , argumentHealthSeeker --- , argumentHealthyChocolate --- , argumentHealthyDairy --- , argumentHealthyFattyFish --- , argumentHealthyFibre --- , argumentHealthyFood --- , argumentHealthyPlantFoods --- , argumentHealthySeedOils --- , argumentHealthySoy --- , argumentMalondialdehyde --- , argumentOmega3Omega6Ratio --- , argumentPlantBasedCVDReversal --- , argumentPolyphenolReductio --- , argumentSodiumCVD --- , argumentTMAOCausality --- , argumentUnhealthyCoconutOil --- , argumentUnhealthyProcessedMeat --- , argumentUnhealthyRedMeat --- , argumentUnhealthySaturatedFat --- , argumentAbortion --- , argumentAgnosticism --- , argumentAgriculturalPredation --- , argumentAnimalRights --- , argumentAntiRewilding --- , argumentAntiVandalism --- , argumentColonizingNature --- , argumentCropDeaths --- , argumentDairyCowRape --- , argumentEfilismPatrolSquad --- , argumentEthicalSlurs --- , argumentFineTuning --- , argumentImmortalityReductio --- , argumentOddOrderPredators --- , argumentOstroveganism --- , argumentPollinationReductio --- , argumentScratcherPioneers --- , argumentTransPeople --- , argumentVeganSocietyReductio --- , argumentBoobyTrapPagers --- , argumentEpidemiologyCausality --- , argumentFlatEarthDebunk --- , argumentTruncatedMeta