mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-15 12:05:12 -05:00
feat: fixed scrolling on gibberish page
This commit is contained in:
Nick
parent
86430b122c
commit
7f509d0572
8 changed files with 122 additions and 221 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ bodyFormat colour =
|
|||
, defaultFontSize
|
||||
, F.color (getThemeColor colour)
|
||||
, width fill
|
||||
, F.alignLeft
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <|
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue