mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: refactored some stuff
This commit is contained in:
Nick
parent
5e25267fbe
commit
ed73a38cbe
6 changed files with 380 additions and 141 deletions
|
|
@ -160,46 +160,6 @@ paragraphAlignCenter =
|
|||
++ paragraphText
|
||||
|
||||
|
||||
myTooltip : String -> Element msg
|
||||
myTooltip str =
|
||||
el
|
||||
[ B.color colourTheme.backgroundColour
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
, padding 15
|
||||
, D.rounded 5
|
||||
, D.width 2
|
||||
, F.center
|
||||
, clip
|
||||
, E.width <| px 300
|
||||
, D.color colourTheme.highlightText
|
||||
, F.size 15
|
||||
, D.shadow
|
||||
{ offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 }
|
||||
, E.htmlAttribute (H.style "position" "fixed")
|
||||
, E.htmlAttribute (H.style "z-index" "9999")
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
, F.size 14
|
||||
]
|
||||
(text str)
|
||||
|
||||
|
||||
tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg
|
||||
tooltip usher tooltip_ =
|
||||
inFront <|
|
||||
el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, transparent True
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
, mouseOver [ transparent False ]
|
||||
, (usher << map never) <|
|
||||
el [ htmlAttribute (style "pointerEvents" "none") ]
|
||||
tooltip_
|
||||
]
|
||||
none
|
||||
|
||||
|
||||
basicDivider : Element msg
|
||||
basicDivider =
|
||||
el
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ module Config.StrengthBar exposing (..)
|
|||
|
||||
import Config.Colour exposing (..)
|
||||
import Config.Format exposing (..)
|
||||
import Config.ToolTip exposing (..)
|
||||
import Cuckery.Types exposing (..)
|
||||
import Effect exposing (Effect)
|
||||
import Element as E exposing (..)
|
||||
|
|
@ -33,6 +34,6 @@ barMaker getTooltip num =
|
|||
]
|
||||
}
|
||||
]
|
||||
++ [ tooltip below (myTooltip (getTooltip num)) ]
|
||||
++ [ tooltip (getTooltip num) ]
|
||||
)
|
||||
none
|
||||
|
|
|
|||
45
frontend/src/Config/ToolTip.elm
Normal file
45
frontend/src/Config/ToolTip.elm
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
module Config.ToolTip exposing (..)
|
||||
|
||||
import Config.Colour exposing (..)
|
||||
import Element as E exposing (..)
|
||||
import Element.Background as B
|
||||
import Element.Border as D exposing (..)
|
||||
import Element.Font as F
|
||||
import Html exposing (col)
|
||||
import Html.Attributes as H exposing (style)
|
||||
|
||||
|
||||
tooltip : String -> Attribute msg
|
||||
tooltip content =
|
||||
inFront <|
|
||||
el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, transparent True
|
||||
, mouseOver [ transparent False ]
|
||||
, htmlAttribute <| H.style "z-index" "4"
|
||||
, htmlAttribute <| style "transition" "all 0.3s ease-in-out"
|
||||
, below <|
|
||||
el [ htmlAttribute (H.style "pointerEvents" "none") ] <|
|
||||
el
|
||||
[ E.width <| px 300
|
||||
, htmlAttribute <| H.style "z-index" "4"
|
||||
, F.size 15
|
||||
, F.center
|
||||
, F.regular
|
||||
, B.color colourTheme.backgroundColour
|
||||
, F.color colourTheme.nonHighlightedText
|
||||
, padding 15
|
||||
, D.color colourTheme.highlightText
|
||||
, D.rounded 5
|
||||
, D.width 2
|
||||
, D.shadow
|
||||
{ offset = ( 0, 3 )
|
||||
, blur = 6
|
||||
, size = 0
|
||||
, color = rgba 0 0 0 0.32
|
||||
}
|
||||
]
|
||||
(text content)
|
||||
]
|
||||
none
|
||||
|
|
@ -39,7 +39,12 @@ cuckMaker cuck =
|
|||
]
|
||||
|
||||
|
||||
cuckImage : Cuck -> { src : String, description : String }
|
||||
cuckImage :
|
||||
Cuck
|
||||
->
|
||||
{ src : String
|
||||
, description : String
|
||||
}
|
||||
cuckImage cuck =
|
||||
{ src = "cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png"
|
||||
, description = cuck.cuckName
|
||||
|
|
@ -53,7 +58,11 @@ cuckTitle cuck =
|
|||
|
||||
dodgeMaker : Cuck -> Element msg
|
||||
dodgeMaker cuck =
|
||||
column [ spacing 15, width fill ] <|
|
||||
column
|
||||
[ spacing 15
|
||||
, width fill
|
||||
]
|
||||
<|
|
||||
List.map2 (\x y -> makeDodge x y)
|
||||
cuck.cuckDodges
|
||||
(List.range 1 (List.length cuck.cuckDodges))
|
||||
|
|
@ -217,7 +226,10 @@ circumstanceMaker dodgeEntry =
|
|||
propositionMaker : Dodge -> Element msg
|
||||
propositionMaker dodgeEntry =
|
||||
row paragraphBoldFormat
|
||||
[ column [ alignTop, dodgeWidth ]
|
||||
[ column
|
||||
[ alignTop
|
||||
, dodgeWidth
|
||||
]
|
||||
[ text "Proposition:"
|
||||
]
|
||||
, column
|
||||
|
|
@ -232,10 +244,16 @@ propositionMaker dodgeEntry =
|
|||
attitudeMaker : Dodge -> Element msg
|
||||
attitudeMaker dodgeEntry =
|
||||
row (paragraphBoldFormat ++ [ width fill ])
|
||||
[ column [ alignTop, dodgeWidth ]
|
||||
[ column
|
||||
[ alignTop
|
||||
, dodgeWidth
|
||||
]
|
||||
[ text "Attitude:"
|
||||
]
|
||||
, column [ E.width fill, alignLeft ]
|
||||
, column
|
||||
[ E.width fill
|
||||
, alignLeft
|
||||
]
|
||||
[ case dodgeEntry.dodgeNicksDoxasticState of
|
||||
Nothing ->
|
||||
paragraph [ F.regular ] [ text "I don't form a doxastic state." ]
|
||||
|
|
@ -309,10 +327,16 @@ reductioMaker dodgeEntry =
|
|||
reasonMaker : Dodge -> Element msg
|
||||
reasonMaker dodgeEntry =
|
||||
row (paragraphBoldFormat ++ [ width fill ])
|
||||
[ column [ alignTop, dodgeWidth ]
|
||||
[ column
|
||||
[ alignTop
|
||||
, dodgeWidth
|
||||
]
|
||||
[ text "Reason:"
|
||||
]
|
||||
, column [ E.width fill, alignLeft ]
|
||||
, column
|
||||
[ E.width fill
|
||||
, alignLeft
|
||||
]
|
||||
[ paragraph [ F.regular ]
|
||||
[ text <|
|
||||
case dodgeEntry.dodgeNicksDoxasticReason of
|
||||
|
|
@ -332,10 +356,16 @@ reasonMaker dodgeEntry =
|
|||
displayFallacy : String -> Element msg
|
||||
displayFallacy fallacyText =
|
||||
row paragraphBoldFormat
|
||||
[ column [ alignTop, dodgeWidth ]
|
||||
[ column
|
||||
[ alignTop
|
||||
, dodgeWidth
|
||||
]
|
||||
[ text "Fallacy:"
|
||||
]
|
||||
, column [ E.width fill, alignLeft ]
|
||||
, column
|
||||
[ E.width fill
|
||||
, alignLeft
|
||||
]
|
||||
[ paragraph [ F.regular ]
|
||||
[ text fallacyText ]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Config.CardFormat exposing (..)
|
|||
import Config.Colour as T exposing (..)
|
||||
import Config.Format as O exposing (..)
|
||||
import Config.StrengthBar exposing (..)
|
||||
import Config.ToolTip exposing (..)
|
||||
import Debate.Types exposing (..)
|
||||
import Effect exposing (Effect)
|
||||
import Element as E exposing (..)
|
||||
|
|
@ -64,11 +65,25 @@ propositionMaker argument =
|
|||
[ 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 ] ]
|
||||
[ el
|
||||
[ tooltip
|
||||
"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 ] ] ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18 ])
|
||||
[ text argument.propositionTitle
|
||||
|> el
|
||||
[ F.color colourTheme.nonHighlightedText
|
||||
, F.regular
|
||||
, F.size 16
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
|
@ -79,15 +94,37 @@ reductioMaker argument =
|
|||
none
|
||||
|
||||
reductio ->
|
||||
row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ]
|
||||
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 "This is the position from which the reductio ad absurdum is derived.") ] (text "Reductio:") |> el [ F.color colourTheme.highlightText ]
|
||||
[ paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, E.width <| px 100
|
||||
]
|
||||
)
|
||||
[ el
|
||||
[ tooltip
|
||||
"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 (paragraphFormat ++ [ F.size 18, spacing 3 ])
|
||||
[ paragraph
|
||||
(paragraphFormat
|
||||
++ [ F.size 18
|
||||
, spacing 3
|
||||
]
|
||||
)
|
||||
[ text reductio ]
|
||||
]
|
||||
]
|
||||
|
|
@ -97,14 +134,41 @@ summaryMaker : Argument -> Element msg
|
|||
summaryMaker argument =
|
||||
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 ]
|
||||
[ E.alignTop
|
||||
, E.alignLeft
|
||||
]
|
||||
[ paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, E.width <| px 100
|
||||
]
|
||||
)
|
||||
[ el
|
||||
[ tooltip
|
||||
"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 ] ] ]
|
||||
[ 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
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
|
@ -112,12 +176,28 @@ strengthMaker : Argument -> Element msg
|
|||
strengthMaker argument =
|
||||
row [ E.width fill ]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 100 ])
|
||||
[ el [ tooltip below (myTooltip "This represents my confidence in the soundness of the argument.") ] (text "Confidence:") |> el [ F.color colourTheme.highlightText ] ]
|
||||
[ E.alignTop
|
||||
, E.alignLeft
|
||||
]
|
||||
[ paragraph
|
||||
(paragraphBoldFormat
|
||||
++ [ F.size 18
|
||||
, E.width <| px 100
|
||||
]
|
||||
)
|
||||
[ el
|
||||
[ tooltip
|
||||
"This represents my confidence in the soundness of the argument."
|
||||
]
|
||||
(text "Confidence:")
|
||||
|> el [ F.color colourTheme.highlightText ]
|
||||
]
|
||||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft, centerY ]
|
||||
[ E.width fill
|
||||
, E.alignLeft
|
||||
, centerY
|
||||
]
|
||||
[ barMaker getConfidenceTooltip argument.argumentCertainty ]
|
||||
]
|
||||
|
||||
|
|
@ -164,50 +244,17 @@ getConfidenceTooltip num =
|
|||
|
||||
tableMaker : Argument -> Element msg
|
||||
tableMaker argument =
|
||||
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, centerX, E.width <| px 500, paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ])
|
||||
(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, E.width <| px 600 ]
|
||||
[ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ])
|
||||
column
|
||||
[ centerX
|
||||
, E.width <| px 600
|
||||
]
|
||||
([ wrappedRow
|
||||
(paragraphBoldFormat
|
||||
++ [ E.alignLeft
|
||||
, E.width fill
|
||||
, htmlAttribute <| H.style "position" "relative"
|
||||
]
|
||||
)
|
||||
[ E.table
|
||||
[ spacing 0
|
||||
, D.rounded 10
|
||||
|
|
@ -220,18 +267,30 @@ tableMaker argument =
|
|||
[ { header =
|
||||
el
|
||||
[ F.bold
|
||||
, D.widthEach { bottom = 1, top = 1, left = 1, right = 1 }
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 1
|
||||
, left = 1
|
||||
, right = 1
|
||||
}
|
||||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, padding 8
|
||||
, E.width fill
|
||||
]
|
||||
(text "Definiendum" |> el [ F.color colourTheme.highlightText ])
|
||||
(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.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 1
|
||||
, right = 1
|
||||
}
|
||||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, padding 8
|
||||
, E.height fill
|
||||
|
|
@ -244,18 +303,30 @@ tableMaker argument =
|
|||
, { header =
|
||||
el
|
||||
[ F.bold
|
||||
, D.widthEach { bottom = 1, top = 1, left = 0, right = 1 }
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 1
|
||||
, left = 0
|
||||
, right = 1
|
||||
}
|
||||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, padding 8
|
||||
, E.width fill
|
||||
]
|
||||
(text "Definiens" |> el [ F.color colourTheme.highlightText ])
|
||||
(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.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 0
|
||||
, right = 1
|
||||
}
|
||||
, D.color colourTheme.nonHighlightedDarkText
|
||||
, padding 8
|
||||
, E.height fill
|
||||
|
|
@ -268,20 +339,113 @@ tableMaker argument =
|
|||
]
|
||||
}
|
||||
]
|
||||
, column [ centerX ] formalizationMaker
|
||||
]
|
||||
]
|
||||
++ formalizationMaker argument
|
||||
)
|
||||
|
||||
|
||||
formalizationMaker : Argument -> List (Element msg)
|
||||
formalizationMaker argument =
|
||||
let
|
||||
argumentFormatting : List (Attribute msg)
|
||||
argumentFormatting =
|
||||
[ centerX
|
||||
, F.center
|
||||
, spacing 3
|
||||
]
|
||||
in
|
||||
List.indexedMap
|
||||
(\index argumentEntry ->
|
||||
column
|
||||
(paragraphFormat
|
||||
++ [ spacing 3
|
||||
, centerX
|
||||
, E.width <| px 500
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
)
|
||||
(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
|
||||
|
||||
|
||||
proofTreeMaker : Argument -> Element msg
|
||||
proofTreeMaker argument =
|
||||
row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ]
|
||||
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.nonHighlightedText
|
||||
, B.color colourTheme.highlightTextHover
|
||||
, paddingEach { top = 6, bottom = 2, left = 12, right = 12 }
|
||||
, paddingEach
|
||||
{ top = 6
|
||||
, bottom = 2
|
||||
, left = 12
|
||||
, right = 12
|
||||
}
|
||||
, D.rounded 10
|
||||
, E.width <| px 105
|
||||
, F.center
|
||||
|
|
@ -305,8 +469,18 @@ basicDivider =
|
|||
el
|
||||
[ E.width fill
|
||||
, centerX
|
||||
, D.widthEach { bottom = 1, top = 0, left = 0, right = 0 }
|
||||
, 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 }
|
||||
, paddingEach
|
||||
{ top = 40
|
||||
, bottom = 0
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
]
|
||||
none
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Config.CardFormat exposing (..)
|
|||
import Config.Colour exposing (..)
|
||||
import Config.Format exposing (..)
|
||||
import Config.StrengthBar exposing (..)
|
||||
import Config.ToolTip exposing (..)
|
||||
import Cuckery.Types exposing (..)
|
||||
import Effect exposing (Effect)
|
||||
import Element as E exposing (..)
|
||||
|
|
@ -97,14 +98,17 @@ makeAppearance appearanceEntry index =
|
|||
]
|
||||
)
|
||||
[ row
|
||||
[ width fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 35
|
||||
}
|
||||
]
|
||||
(paragraphFormat
|
||||
++ [ F.size 18
|
||||
, E.width fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 35
|
||||
, right = 0
|
||||
}
|
||||
]
|
||||
)
|
||||
[ column
|
||||
(paragraphFormat
|
||||
++ [ F.size 18
|
||||
|
|
@ -118,20 +122,34 @@ makeAppearance appearanceEntry index =
|
|||
[ spacing 8
|
||||
, width fill
|
||||
]
|
||||
[ column
|
||||
[ spacing 8
|
||||
, width fill
|
||||
]
|
||||
[ experienceMaker appearanceEntry
|
||||
, dateMaker appearanceEntry
|
||||
, subjectMaker appearanceEntry
|
||||
, subjectList appearanceEntry
|
||||
]
|
||||
[ episodeMaker appearanceEntry
|
||||
, experienceMaker appearanceEntry
|
||||
, dateMaker appearanceEntry
|
||||
, subjectMaker appearanceEntry
|
||||
, subjectList appearanceEntry
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
episodeMaker : Appearance -> Element msg
|
||||
episodeMaker appearanceEntry =
|
||||
paragraphLinkFormat
|
||||
{ url = appearanceEntry.appearanceLink
|
||||
, label =
|
||||
row
|
||||
[ F.size 18
|
||||
]
|
||||
[ text ("#" ++ appearanceEntry.appearanceEpisode ++ ": " ++ appearanceEntry.appearanceTitle)
|
||||
|> el
|
||||
[ F.color colourTheme.highlightText
|
||||
, mouseOver [ F.color colourTheme.highlightTextHover ]
|
||||
, transitionStyle
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
experienceMaker : Appearance -> Element msg
|
||||
experienceMaker appearanceEntry =
|
||||
row
|
||||
|
|
@ -139,12 +157,23 @@ experienceMaker appearanceEntry =
|
|||
, height fill
|
||||
]
|
||||
[ column
|
||||
[ E.alignTop, E.alignLeft ]
|
||||
[ E.alignTop
|
||||
, E.alignLeft
|
||||
]
|
||||
[ paragraph (paragraphBoldFormat ++ [ F.size 18, E.width <| px 112 ])
|
||||
[ el [ tooltip below (myTooltip "This represents how pleasant it was to interact with the host(s).") ] (text "Pleasantness:") ]
|
||||
[ el
|
||||
[ tooltip
|
||||
"This represents how pleasant it was to interact with the host(s)."
|
||||
]
|
||||
(text "Pleasantness:")
|
||||
]
|
||||
]
|
||||
, column
|
||||
[ E.width fill, E.alignLeft ]
|
||||
[ E.width fill
|
||||
, E.alignLeft
|
||||
, centerY
|
||||
, height fill
|
||||
]
|
||||
[ barMaker getExperienceTooltip appearanceEntry.appearanceExperience ]
|
||||
]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue