From 7f509d057265bd03e36622ff2c2cd3c91f050616 Mon Sep 17 00:00:00 2001 From: Nick Date: Fri, 3 Jan 2025 21:41:45 -0600 Subject: [PATCH] feat: fixed scrolling on gibberish page --- .../Helpers/Cards/Inner/StrengthBar.elm | 8 +- .../src/Config/Helpers/Cards/Inner/Text.elm | 1 + .../Config/Helpers/Cards/Inner/ToolTip.elm | 43 +-- frontend/src/Pages/Debate/Arguments.elm | 11 +- frontend/src/Pages/Debate/Cucklist.elm | 8 +- frontend/src/Pages/Debate/Gibberish.elm | 253 +++++------------- frontend/src/Pages/Donate.elm | 9 +- frontend/src/Pages/Interviews.elm | 10 +- 8 files changed, 122 insertions(+), 221 deletions(-) diff --git a/frontend/src/Config/Helpers/Cards/Inner/StrengthBar.elm b/frontend/src/Config/Helpers/Cards/Inner/StrengthBar.elm index 0152869..85b86fc 100755 --- a/frontend/src/Config/Helpers/Cards/Inner/StrengthBar.elm +++ b/frontend/src/Config/Helpers/Cards/Inner/StrengthBar.elm @@ -3,7 +3,11 @@ module Config.Helpers.Cards.Inner.StrengthBar exposing , barPadding ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Style.Colour.Helpers exposing (colourTheme) import Element as E exposing @@ -59,7 +63,7 @@ barMaker shared getTooltip num = [] _ -> - [ tooltip (getTooltip num) True ] + [ tooltip IsLeft (getTooltip num) ] ) ) none diff --git a/frontend/src/Config/Helpers/Cards/Inner/Text.elm b/frontend/src/Config/Helpers/Cards/Inner/Text.elm index 781df9d..1e7f40a 100755 --- a/frontend/src/Config/Helpers/Cards/Inner/Text.elm +++ b/frontend/src/Config/Helpers/Cards/Inner/Text.elm @@ -123,6 +123,7 @@ bodyFormat colour = , defaultFontSize , F.color (getThemeColor colour) , width fill + , F.alignLeft ] diff --git a/frontend/src/Config/Helpers/Cards/Inner/ToolTip.elm b/frontend/src/Config/Helpers/Cards/Inner/ToolTip.elm index 92771aa..01ef031 100755 --- a/frontend/src/Config/Helpers/Cards/Inner/ToolTip.elm +++ b/frontend/src/Config/Helpers/Cards/Inner/ToolTip.elm @@ -1,5 +1,6 @@ module Config.Helpers.Cards.Inner.ToolTip exposing - ( tooltip + ( ToolTipPosition(..) + , tooltip , tooltipImage ) @@ -23,6 +24,7 @@ import Element as E , moveLeft , none , padding + , pointer , px , rgba , text @@ -46,24 +48,19 @@ import Element.Font as F import Html.Attributes as H exposing (style) -tooltip : String -> Bool -> Attribute msg -tooltip content isLeft = - inFront <| - el - [ E.width fill - , height fill - , transparent True - , mouseOver [ transparent False ] - , htmlAttribute <| H.style "z-index" "4" - , transitionStyleSlow - , below <| +tooltip : ToolTipPosition -> String -> Attribute msg +tooltip toolTipPosition content = + let + tooltipContent : Attribute msg + tooltipContent = + below <| el [ htmlAttribute (H.style "pointerEvents" "none") - , case isLeft of - True -> + , case toolTipPosition of + IsLeft -> alignLeft - False -> + IsRight -> alignRight ] <| @@ -87,10 +84,26 @@ tooltip content isLeft = } ] (text content) + in + inFront <| + el + [ E.width fill + , height fill + , pointer + , transparent True + , mouseOver [ transparent False ] + , htmlAttribute <| H.style "z-index" "4" + , transitionStyleSlow + , tooltipContent ] none +type ToolTipPosition + = IsLeft + | IsRight + + tooltipImage : String -> Attribute msg tooltipImage content = inFront <| diff --git a/frontend/src/Pages/Debate/Arguments.elm b/frontend/src/Pages/Debate/Arguments.elm index f6f4172..c87550b 100755 --- a/frontend/src/Pages/Debate/Arguments.elm +++ b/frontend/src/Pages/Debate/Arguments.elm @@ -19,7 +19,11 @@ import Config.Helpers.Cards.Inner.Text , generalButton , getHoverColours ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Converters exposing (toTitleCase) @@ -335,7 +339,7 @@ copyButton shared model isLinkClicked index argument = el (if isLinkClicked then [ transitionStyleSlow - , tooltip "Copied!" False + , tooltip IsRight "Copied!" , case ( shared.device.class, shared.device.orientation ) of ( Phone, Portrait ) -> B.color (getThemeColor BackgroundDarkGrey) @@ -381,9 +385,8 @@ strengthMaker shared = _ -> if not shared.isNavbarExpanded then - [ tooltip + [ tooltip IsRight "This represents my confidence that the argument is sound." - True ] else diff --git a/frontend/src/Pages/Debate/Cucklist.elm b/frontend/src/Pages/Debate/Cucklist.elm index f25eaf0..32772cc 100755 --- a/frontend/src/Pages/Debate/Cucklist.elm +++ b/frontend/src/Pages/Debate/Cucklist.elm @@ -16,7 +16,11 @@ import Config.Helpers.Cards.Inner.Text , getHoverColours , numberedListItem ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Converters exposing (formatSocial) @@ -288,7 +292,7 @@ copyButton shared model isLinkClicked index cuck = el (if isLinkClicked then [ transitionStyleSlow - , tooltip "Copied!" False + , tooltip IsRight "Copied!" , case ( shared.device.class, shared.device.orientation ) of ( Phone, Portrait ) -> B.color (getThemeColor BackgroundDarkGrey) diff --git a/frontend/src/Pages/Debate/Gibberish.elm b/frontend/src/Pages/Debate/Gibberish.elm index f5cdef8..8044c20 100755 --- a/frontend/src/Pages/Debate/Gibberish.elm +++ b/frontend/src/Pages/Debate/Gibberish.elm @@ -7,7 +7,12 @@ import Config.Helpers.Cards.Inner.StrengthBar ( barMaker , barPadding ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.Text exposing (detailBodyMaker, detailFormat, detailTitleMaker, listMaker, listMaker2, numberedListItem) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Converters exposing (toTitleCase) @@ -203,12 +208,7 @@ contentList shared gibberish = <| imageSquareMaker shared.device (imagePathMaker M.Gibberish gibberish.gibberishImage) True size in - [ paragraph - [ F.color (getThemeColor TextLightGrey) - , paragraphSpacing - , defaultFontSize - , width fill - ] + [ detailFormat paragraph [ case ( shared.device.class, shared.device.orientation ) of ( Phone, Portrait ) -> none @@ -218,7 +218,7 @@ contentList shared gibberish = _ -> image Medium - , text gibberish.gibberishDescription + , detailBodyMaker TextLightGrey (text gibberish.gibberishDescription) ] , gibberishMakerBody shared gibberish ] @@ -226,201 +226,70 @@ contentList shared gibberish = gibberishMakerBody : Shared.Model -> Gibberish -> Element msg gibberishMakerBody shared gibberish = - column - [ paddingEach - { top = 0 - , bottom = 0 - , left = 15 - , right = 15 - } - , spacing 8 - , width fill - ] - [ column - [ spacing 8 - , width fill - ] - [ paragraph - [ F.color (getThemeColor TextLightGrey) - , paragraphSpacing - , defaultFontSize - , F.center - ] - [ domainList shared gibberish - ] - ] + detailFormat column + [ listMaker2 (makeTerms shared) gibberish.gibberishTerms ] -gibberishImage : Gibberish -> { src : String, description : String } -gibberishImage gibberish = - { src = "/gibberish/" ++ gibberish.gibberishImage ++ ".png" - , description = gibberish.gibberishTitle - } - - -gibberishTitle : Shared.Model -> Gibberish -> String -gibberishTitle shared gibberish = - gibberish.gibberishTitle - - -domainList : Shared.Model -> Gibberish -> Element msg -domainList shared gibberish = - column - [ spacing 8 - , E.width fill - ] - (List.indexedMap (makeTerms (intelligibilityBar shared)) gibberish.gibberishTerms) - - -descriptionMaker : Gibberish -> Element msg -descriptionMaker gibberish = - column - [ E.width fill - , centerX - ] - [ paragraph - [ F.color (getThemeColor TextLightGrey) - , paragraphSpacing - , defaultFontSize - , spacing 3 - , F.regular - , F.alignLeft - ] - [ text gibberish.gibberishDescription - ] - ] - - -makeTerms : (Terms -> Element msg) -> Int -> Terms -> Element msg -makeTerms bar index terms = - column - [ F.color (getThemeColor TextLightGrey) - , paragraphSpacing - , defaultFontSize - , F.bold - , E.alignLeft - , spacing 8 - , E.width fill - ] - [ row - [ F.color (getThemeColor TextLightGrey) - , F.regular - , defaultFontSize - , F.bold - , F.alignLeft - , E.width fill - ] - [ column - [ E.alignRight - , alignTop - ] - [ paragraph - [] - [ text (String.fromInt (index + 1) ++ ". ") ] - ] - , column - [ E.width fill - , paddingEach - { top = 0 - , bottom = 0 - , left = 10 - , right = 10 - } - , spacing 3 - ] - [ paragraph - [] - [ el [ F.color (getThemeColor TextLightOrange) ] <| - text <| - "\"" - ++ String.toLower terms.term - ++ "\"" - ] - , bar terms - , paragraph - [ F.color (getThemeColor TextLightGrey) - , F.regular - , defaultFontSize - , F.alignLeft - ] - [ text - (case terms.explanation of - NoClue -> - "I have no fucking clue what this means." - - SpecificExplanation str -> - str - ) - ] - ] - ] - ] - - -intelligibilityBar : Shared.Model -> Terms -> Element msg -intelligibilityBar shared terms = - row - [ E.width fill - , height fill - ] - [ column - [ E.alignTop - , E.alignLeft - ] - [ paragraph - [ F.color (getThemeColor TextLightGrey) +makeTerms : Shared.Model -> Terms -> Int -> Element msg +makeTerms shared terms index = + detailFormat column + [ detailFormat row + [ detailTitleMaker TextLightGrey + (String.fromInt index ++ ". ") + , el + [ alignLeft + , F.alignLeft , F.bold - , defaultFontSize - , paragraphSpacing - , E.alignLeft - , E.width fill - ] - [ el - (case ( shared.device.class, shared.device.orientation ) of - ( Phone, Portrait ) -> - [] - - ( Tablet, Portrait ) -> - [] - - _ -> - if not shared.isNavbarExpanded then - [ tooltip tooltipMessage True - ] - - else - [] - ) - <| - (el - [ paddingEach - { top = 0 - , right = 10 - , bottom = 0 - , left = 0 - } - ] - <| - text barTitle - ) + , F.color (getThemeColor TextLightOrange) + , width fill ] + <| + text + ("\"" ++ String.toLower terms.term ++ "\"") ] + , detailFormat column + [ intelligibilityMaker shared terms + , detailBodyMaker TextLightGrey <| + text + (case terms.explanation of + NoClue -> + "I have no fucking clue what this means." + + SpecificExplanation str -> + str + ) + ] + ] + + +intelligibilityMaker : Shared.Model -> Terms -> Element msg +intelligibilityMaker shared terms = + detailFormat row + [ el + (case ( shared.device.class, shared.device.orientation ) of + ( Phone, Portrait ) -> + [] + + ( Tablet, Portrait ) -> + [] + + _ -> + if not shared.isNavbarExpanded then + [ tooltip IsLeft + "This represents my confidence that the term can be understood from at least one viewpoint." + ] + + else + [] + ) + <| + detailTitleMaker TextLightGrey "Intelligibility:" , barPadding [ barMaker shared getIntelligibilityTooltip terms.strength ] ] -tooltipMessage : String -tooltipMessage = - "This represents my confidence that the term can be understood from at least one viewpoint." - - -barTitle : String -barTitle = - "Intelligibility:" - - getIntelligibilityTooltip : Int -> String getIntelligibilityTooltip num = case num of diff --git a/frontend/src/Pages/Donate.elm b/frontend/src/Pages/Donate.elm index cee69b4..4e20df5 100755 --- a/frontend/src/Pages/Donate.elm +++ b/frontend/src/Pages/Donate.elm @@ -21,7 +21,11 @@ import Config.Helpers.Cards.Inner.Text , listItem , listMaker ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Headers.Helpers exposing (headerMaker) @@ -274,9 +278,8 @@ preferenceMaker shared donate = _ -> if not shared.isNavbarExpanded then - [ tooltip + [ tooltip IsLeft "This represents how strongly I prefer a given platform relative to other platforms." - True ] else diff --git a/frontend/src/Pages/Interviews.elm b/frontend/src/Pages/Interviews.elm index c2ba8c1..5c90edb 100755 --- a/frontend/src/Pages/Interviews.elm +++ b/frontend/src/Pages/Interviews.elm @@ -26,7 +26,11 @@ import Config.Helpers.Cards.Inner.Text , listMaker2 , socialMaker ) -import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) +import Config.Helpers.Cards.Inner.ToolTip + exposing + ( ToolTipPosition(..) + , tooltip + ) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Converters exposing (formatSocial) @@ -76,6 +80,7 @@ import Element as E , alignTop , column , el + , explain , fill , newTabLink , none @@ -277,9 +282,8 @@ experienceMaker shared appearanceEntry = _ -> if not shared.isNavbarExpanded then - [ tooltip + [ tooltip IsLeft "This represents the pleasantness of the host." - True ] else