From f79e2d9fcad2649b570fed0ae1fa493b259a1f07 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 23 Nov 2024 02:28:14 -0600 Subject: [PATCH] feat: push --- Helpers copy.elm | 239 +++++++++++++++ frontend/elm.json | 1 + frontend/src/Config/Format.elm | 2 +- frontend/src/Debate/Helpers.elm | 489 ++++++++++++++++++------------- frontend/src/Pages/Arguments.elm | 134 +++++---- 5 files changed, 601 insertions(+), 264 deletions(-) create mode 100755 Helpers copy.elm diff --git a/Helpers copy.elm b/Helpers copy.elm new file mode 100755 index 0000000..87e2a5e --- /dev/null +++ b/Helpers copy.elm @@ -0,0 +1,239 @@ +module Debate.Helpers%20copy exposing (..)module Debate.Helpers exposing (..) + +import Config.Colour as T exposing (..) +import Config.Format as O exposing (..) +import Debate.Types exposing (..) +import Effect exposing (Effect) +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 exposing (..) +import Html exposing (div, hr) +import Html.Attributes as H exposing (style, title, wrap) +import Layouts +import Page exposing (Page) +import Route exposing (Route) +import Shared +import View exposing (View) + + +argumentMaker : Argument -> Element msg +argumentMaker argument = + let + 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, 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 + ] + , 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 + ] + ) + ] + + +basicDivider : Element msg +basicDivider = + el + [ E.width fill + , centerX + , D.widthEach { bottom = 1, top = 0, left = 0, right = 0 } + , D.color (rgb255 200 200 200) + , paddingEach { top = 40, bottom = 0, left = 0, right = 0 } + ] + none diff --git a/frontend/elm.json b/frontend/elm.json index cfbfc8f..f9efb79 100755 --- a/frontend/elm.json +++ b/frontend/elm.json @@ -13,6 +13,7 @@ "elm/html": "1.0.0", "elm/json": "1.1.3", "elm/url": "1.0.0", + "elm-community/list-extra": "8.7.0", "mdgriffith/elm-ui": "1.1.8" }, "indirect": { diff --git a/frontend/src/Config/Format.elm b/frontend/src/Config/Format.elm index b744b2c..995045d 100755 --- a/frontend/src/Config/Format.elm +++ b/frontend/src/Config/Format.elm @@ -30,7 +30,7 @@ pageList = transitionStyle : Attribute msg transitionStyle = - htmlAttribute <| style "transition" "all .1s" + htmlAttribute <| style "transition" "all .4s" transitionHighlightedLinkHover : Element msg -> Element msg diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index 34e2816..40c465a 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -1,5 +1,9 @@ module Debate.Helpers exposing (..) +-- import Html exposing (div, hr) +-- import Html.Attributes as H exposing (style, title, wrap) +-- import Config.Types exposing (..) + import Config.Colour as T exposing (..) import Config.Format as O exposing (..) import Debate.Types exposing (..) @@ -9,217 +13,294 @@ 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 exposing (div, hr) -import Html.Attributes as H exposing (style, title, wrap) import Layouts +import List.Extra exposing (..) +import Maybe exposing (withDefault) import Page exposing (Page) import Route exposing (Route) import Shared import View exposing (View) -argumentMaker : Argument -> Element msg -argumentMaker argument = + +-- argumentMaker : List Bool -> Argument -> Int -> Element msg + + +argumentMaker : (Int -> msg) -> List Bool -> Argument -> Int -> Element msg +argumentMaker onClickMsg areArgsExpanded argument indexExpand = let - 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 ] - ] - ] - ] + isArgumentExpanded : Bool + isArgumentExpanded = + withDefault False <| getAt indexExpand areArgsExpanded in - column - [ 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 - ] - , row [] - [ 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 = 5, 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 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 [ explain Debug.todo ] + [ titleMaker onClickMsg indexExpand argument.argumentTitle + , paragraphMaker argument isArgumentExpanded ] + + +titleMaker : (Int -> msg) -> Int -> String -> Element msg +titleMaker onClickMsg indexExpand title = + 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 title + ] + + +paragraphMaker : Argument -> Bool -> Element msg +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 + (if isArgumentExpanded then + [ F.size 0, transitionStyle ] + + else + [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] + ) + [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] + ] + + + +-- 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 +-- ] +-- ) +-- ] +-- ] diff --git a/frontend/src/Pages/Arguments.elm b/frontend/src/Pages/Arguments.elm index e1428f1..1497771 100755 --- a/frontend/src/Pages/Arguments.elm +++ b/frontend/src/Pages/Arguments.elm @@ -60,6 +60,7 @@ import Element.Font as F import Html import Html.Attributes as H exposing (style, title, wrap) import Layouts +import List.Extra as L exposing (..) import Page exposing (Page) import Route exposing (Route) import Shared @@ -87,12 +88,16 @@ toLayout model = type alias Model = - {} + { areArgsExpanded : List Bool } init : () -> ( Model, Effect Msg ) init () = - ( {} + ( { areArgsExpanded = + [ False + , False + ] + } , Effect.none ) @@ -102,14 +107,19 @@ init () = type Msg - = NoOp + = ToggleExpandArg Int update : Msg -> Model -> ( Model, Effect Msg ) update msg model = case msg of - NoOp -> - ( model + ToggleExpandArg index -> + ( case getAt index model.areArgsExpanded of + Nothing -> + model + + Just isExpanded -> + { model | areArgsExpanded = setAt index (not isExpanded) model.areArgsExpanded } , Effect.none ) @@ -131,68 +141,74 @@ view : Model -> View Msg view model = { title = debateName , attributes = [] - , element = debateContainer + , element = debateContainer model } -debateContainer : Element msg -debateContainer = - topLevelContainer debateList +debateContainer : Model -> Element Msg +debateContainer model = + topLevelContainer <| debateList model -debateList : Element msg -debateList = +debateList : Model -> Element Msg +debateList model = column pageList <| - List.map argumentMaker + 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