diff --git a/frontend/src/Config/Format.elm b/frontend/src/Config/Format.elm index 277d617..d943420 100755 --- a/frontend/src/Config/Format.elm +++ b/frontend/src/Config/Format.elm @@ -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 diff --git a/frontend/src/Config/StrengthBar.elm b/frontend/src/Config/StrengthBar.elm index 926216e..50696bb 100644 --- a/frontend/src/Config/StrengthBar.elm +++ b/frontend/src/Config/StrengthBar.elm @@ -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 diff --git a/frontend/src/Config/ToolTip.elm b/frontend/src/Config/ToolTip.elm new file mode 100644 index 0000000..5a9958f --- /dev/null +++ b/frontend/src/Config/ToolTip.elm @@ -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 diff --git a/frontend/src/Cuckery/Helpers.elm b/frontend/src/Cuckery/Helpers.elm index 40564c9..371e45f 100755 --- a/frontend/src/Cuckery/Helpers.elm +++ b/frontend/src/Cuckery/Helpers.elm @@ -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 ] ] diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index ed7c474..83b2fa2 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -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 diff --git a/frontend/src/Interviews/Helpers.elm b/frontend/src/Interviews/Helpers.elm index 10c2889..43deead 100755 --- a/frontend/src/Interviews/Helpers.elm +++ b/frontend/src/Interviews/Helpers.elm @@ -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 ] ]