mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-17 12:55:12 -05:00
feat: reverted the arguments page
This commit is contained in:
Nick
parent
d9dccdd727
commit
f2c6f1ce26
55 changed files with 272 additions and 619 deletions
|
|
@ -1,9 +1,5 @@
|
|||
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 (..)
|
||||
|
|
@ -13,165 +9,109 @@ 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, id, style)
|
||||
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 Maybe.Extra exposing (isNothing)
|
||||
import Page exposing (Page)
|
||||
import Route exposing (Route)
|
||||
import Shared
|
||||
import View exposing (View)
|
||||
|
||||
|
||||
type alias ArgMakerInput msg =
|
||||
{ arg : Argument
|
||||
, index : Int
|
||||
, isExpanded : Bool
|
||||
, maybeHeight : Maybe Int
|
||||
, titleClickMsg : msg
|
||||
}
|
||||
|
||||
|
||||
argumentMaker : ArgMakerInput msg -> Element msg
|
||||
argumentMaker argMakerInput =
|
||||
-- row [ imageSpacer, E.alignLeft ]
|
||||
-- [ E.image
|
||||
-- (case argMakerInput.maybeHeight of
|
||||
-- Nothing ->
|
||||
-- [ transparent True ]
|
||||
-- Just _ ->
|
||||
-- [ centerX
|
||||
-- , centerY
|
||||
-- , alignTop
|
||||
-- , D.rounded 100
|
||||
-- , E.width <| px 52
|
||||
-- ]
|
||||
-- )
|
||||
-- { src = "arguments/" ++ argMakerInput.arg.argumentImage ++ ".png"
|
||||
-- , description = ""
|
||||
-- }
|
||||
-- ,
|
||||
column
|
||||
(if isNothing argMakerInput.maybeHeight then
|
||||
[ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index)
|
||||
, E.width <| px 600
|
||||
argumentMaker : Argument -> Element msg
|
||||
argumentMaker argument =
|
||||
row
|
||||
[ spacing 20
|
||||
, E.width fill
|
||||
, E.height fill
|
||||
, E.alignTop
|
||||
, E.alignRight
|
||||
]
|
||||
[ column
|
||||
[ E.width <| px 115
|
||||
, E.height <| px 115
|
||||
, E.alignTop
|
||||
, E.alignRight
|
||||
]
|
||||
|
||||
else
|
||||
[ E.width <| px 600, alignTop ]
|
||||
)
|
||||
[ titleMaker argMakerInput
|
||||
, column
|
||||
(case argMakerInput.maybeHeight of
|
||||
Just h ->
|
||||
[ B.color colourTheme.cardBackground
|
||||
, clip
|
||||
, htmlAttribute <| style "transition" "all .7s ease-in-out"
|
||||
, roundEach { topLeft = 0, topRight = 0, bottomRight = 20, bottomLeft = 20 }
|
||||
, height <|
|
||||
px <|
|
||||
if argMakerInput.isExpanded then
|
||||
h
|
||||
|
||||
else
|
||||
0
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
[ transparent True ]
|
||||
)
|
||||
<|
|
||||
List.map (\x -> x argMakerInput)
|
||||
[ propositionMaker
|
||||
, reductioMaker
|
||||
, summaryMaker
|
||||
, strengthMaker
|
||||
, tableMaker
|
||||
, proofTreeMaker
|
||||
[ column
|
||||
[ D.rounded 100
|
||||
, D.width 5
|
||||
, D.color colourTheme.cardBackground
|
||||
]
|
||||
[ E.image
|
||||
[ E.alignRight
|
||||
, alignTop
|
||||
, D.rounded 100
|
||||
, clip
|
||||
, E.width <| px 90
|
||||
, E.height <| px 90
|
||||
]
|
||||
{ src = "arguments/" ++ argument.argumentImage ++ ".png"
|
||||
, description = argument.argumentTitle
|
||||
}
|
||||
]
|
||||
]
|
||||
, column
|
||||
[ E.width <| px 600
|
||||
, alignTop
|
||||
]
|
||||
[ column
|
||||
[ B.color colourTheme.cardBackground
|
||||
, htmlAttribute <| style "transition" "all .7s ease-in-out"
|
||||
, rounded 26
|
||||
]
|
||||
[ titleMaker argument
|
||||
, column [ paddingEach { top = 10, right = 30, bottom = 10, left = 30 }, spacing 10 ]
|
||||
[ propositionMaker argument
|
||||
, reductioMaker argument
|
||||
, summaryMaker argument
|
||||
, strengthMaker argument
|
||||
, tableMaker argument
|
||||
, proofTreeMaker argument
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
||||
-- ]
|
||||
|
||||
|
||||
titleMaker : ArgMakerInput msg -> Element msg
|
||||
titleMaker argMakerInput =
|
||||
titleMaker : Argument -> Element msg
|
||||
titleMaker argument =
|
||||
paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 20
|
||||
, F.color colourTheme.backgroundColour
|
||||
, B.color colourTheme.highlightText
|
||||
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
|
||||
, B.color colourTheme.highlightTextHover
|
||||
, paddingEach { top = 6, bottom = 3, left = 30, right = 30 }
|
||||
, alignBottom
|
||||
, roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }
|
||||
, F.center
|
||||
, pointer
|
||||
, htmlAttribute <| style "transition" "all 0.3s ease-in-out"
|
||||
, mouseOver
|
||||
[ B.color colourTheme.highlightTextHover
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
]
|
||||
, V.onClick <| argMakerInput.titleClickMsg
|
||||
, E.width fill
|
||||
, D.roundEach { topLeft = 26, topRight = 26, bottomRight = 0, bottomLeft = 0 }
|
||||
]
|
||||
++ (case argMakerInput.maybeHeight of
|
||||
Nothing ->
|
||||
[ transparent True ]
|
||||
|
||||
Just _ ->
|
||||
[ roundEach <|
|
||||
if argMakerInput.isExpanded then
|
||||
{ topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 }
|
||||
|
||||
else
|
||||
{ topLeft = 10, topRight = 10, bottomRight = 10, bottomLeft = 10 }
|
||||
, F.alignLeft
|
||||
]
|
||||
)
|
||||
)
|
||||
[ text argMakerInput.arg.argumentTitle ]
|
||||
|
||||
|
||||
propositionMaker : ArgMakerInput msg -> Element msg
|
||||
propositionMaker argMakerInput =
|
||||
row
|
||||
[ paddingEach { top = 20, right = 30, bottom = 0, left = 30 }
|
||||
, E.width fill
|
||||
[ text argument.argumentTitle
|
||||
]
|
||||
|
||||
|
||||
propositionMaker : Argument -> Element msg
|
||||
propositionMaker argument =
|
||||
row []
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, E.width <| px 100
|
||||
]
|
||||
)
|
||||
[ 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 argMakerInput.arg.propositionTitle
|
||||
|> el
|
||||
[ F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
, F.size 16
|
||||
]
|
||||
]
|
||||
]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) [ text argument.propositionTitle |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
|
||||
]
|
||||
|
||||
|
||||
reductioMaker : ArgMakerInput msg -> Element msg
|
||||
reductioMaker argMakerInput =
|
||||
case argMakerInput.arg.propositionReductio of
|
||||
reductioMaker : Argument -> Element msg
|
||||
reductioMaker argument =
|
||||
case argument.propositionReductio of
|
||||
"" ->
|
||||
none
|
||||
|
||||
reductio ->
|
||||
row [ paddingEach { top = 8, right = 30, bottom = 0, left = 30 }, E.width fill ]
|
||||
row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
|
|
@ -179,15 +119,15 @@ reductioMaker argMakerInput =
|
|||
]
|
||||
]
|
||||
, column [ E.width fill, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ])
|
||||
[ paragraph (paragraphFormat ++ [ F.size 18, spacing 3 ])
|
||||
[ text reductio ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
summaryMaker : ArgMakerInput msg -> Element msg
|
||||
summaryMaker argMakerInput =
|
||||
row [ paddingEach { top = 10, right = 30, bottom = 0, left = 30 } ]
|
||||
summaryMaker : Argument -> Element msg
|
||||
summaryMaker argument =
|
||||
row []
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
|
|
@ -196,25 +136,12 @@ summaryMaker argMakerInput =
|
|||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft ]
|
||||
[ paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, spacing 3
|
||||
]
|
||||
)
|
||||
[ text argMakerInput.arg.propositionSummary
|
||||
|> el
|
||||
[ F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
, F.size 16
|
||||
]
|
||||
]
|
||||
]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, spacing 3 ]) [ text argument.propositionSummary |> el [ F.color colourTheme.nonHighlightedText, F.regular, F.size 16 ] ] ]
|
||||
]
|
||||
|
||||
|
||||
strengthMaker : ArgMakerInput msg -> Element msg
|
||||
strengthMaker argMakerInput =
|
||||
strengthMaker : Argument -> Element msg
|
||||
strengthMaker argument =
|
||||
let
|
||||
barMaker : Int -> Element msg
|
||||
barMaker num =
|
||||
|
|
@ -275,7 +202,7 @@ strengthMaker argMakerInput =
|
|||
_ ->
|
||||
"Confidence level out of expected range."
|
||||
in
|
||||
row [ paddingEach { top = 10, right = 30, bottom = 0, left = 30 }, E.width fill ]
|
||||
row [ E.width fill ]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
|
|
@ -283,12 +210,12 @@ strengthMaker argMakerInput =
|
|||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft, centerY ]
|
||||
[ barMaker argMakerInput.arg.argumentCertainty ]
|
||||
[ barMaker argument.argumentCertainty ]
|
||||
]
|
||||
|
||||
|
||||
tableMaker : ArgMakerInput msg -> Element msg
|
||||
tableMaker argMakerInput =
|
||||
tableMaker : Argument -> Element msg
|
||||
tableMaker argument =
|
||||
let
|
||||
formalizationMaker : List (Element msg)
|
||||
formalizationMaker =
|
||||
|
|
@ -299,7 +226,7 @@ tableMaker argMakerInput =
|
|||
in
|
||||
List.indexedMap
|
||||
(\index argumentEntry ->
|
||||
column (paragraphFormat ++ [ spacing 3, centerX, E.width fill, paddingEach { top = 10, right = 30, bottom = 0, left = 30 } ])
|
||||
column (paragraphFormat ++ [ spacing 3, centerX, E.width <| px 500, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ])
|
||||
(List.indexedMap
|
||||
(\premiseIndex premiseWithNotation ->
|
||||
column argumentFormatting
|
||||
|
|
@ -329,13 +256,9 @@ tableMaker argMakerInput =
|
|||
]
|
||||
)
|
||||
)
|
||||
argMakerInput.arg.argumentFormalization
|
||||
argument.argumentFormalization
|
||||
in
|
||||
column
|
||||
[ centerX
|
||||
, paddingEach { top = 8, right = 30, bottom = 0, left = 30 }
|
||||
, E.width fill
|
||||
]
|
||||
column [ centerX, E.width <| px 600 ]
|
||||
[ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
|
||||
[ E.table
|
||||
[ spacing 0
|
||||
|
|
@ -344,7 +267,7 @@ tableMaker argMakerInput =
|
|||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, clip
|
||||
]
|
||||
{ data = argMakerInput.arg.definitionTable
|
||||
{ data = argument.definitionTable
|
||||
, columns =
|
||||
[ { header =
|
||||
el
|
||||
|
|
@ -401,24 +324,21 @@ tableMaker argMakerInput =
|
|||
]
|
||||
|
||||
|
||||
proofTreeMaker : ArgMakerInput msg -> Element msg
|
||||
proofTreeMaker argMakerInput =
|
||||
row
|
||||
[ paddingEach { top = 8, right = 30, bottom = 0, left = 30 }
|
||||
, centerX
|
||||
, E.width fill
|
||||
]
|
||||
[ column [ E.width fill ]
|
||||
proofTreeMaker : Argument -> Element msg
|
||||
proofTreeMaker argument =
|
||||
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
|
||||
, alignBottom
|
||||
, transitionStyle
|
||||
, mouseOver
|
||||
[ B.color colourTheme.highlightTextHover
|
||||
|
|
@ -427,8 +347,19 @@ proofTreeMaker argMakerInput =
|
|||
]
|
||||
]
|
||||
)
|
||||
{ url = argMakerInput.arg.proofLink
|
||||
{ url = argument.proofLink
|
||||
, label = text "Proof Tree"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue