mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-15 20:15:12 -05:00
511 lines
17 KiB
Elm
Executable file
511 lines
17 KiB
Elm
Executable file
module Config.Helpers.Cards.Helpers exposing (..)
|
|
|
|
import Config.Data.Identity
|
|
exposing
|
|
( pageNames
|
|
)
|
|
import Config.Helpers.Cards.Types as C exposing (..)
|
|
import Config.Helpers.Converters exposing (formatName)
|
|
import Config.Helpers.Format
|
|
exposing
|
|
( divider
|
|
, headerFontSizeBig
|
|
, headerFontSizeMedium
|
|
, paragraphFontSize
|
|
, paragraphSpacing
|
|
)
|
|
import Config.Helpers.ImageFolders as M exposing (..)
|
|
import Config.Helpers.Response exposing (contentContainer)
|
|
import Config.Pages.Debate.Arguments.Records.Template exposing (argument)
|
|
import Config.Style.Colour exposing (colourTheme)
|
|
import Config.Style.Glow
|
|
exposing
|
|
( glowDeepDarkGrey
|
|
, glowDeepDarkOrange
|
|
)
|
|
import Config.Style.Icons.Icons exposing (construction)
|
|
import Config.Style.Transitions
|
|
exposing
|
|
( hoverCircleButtonDarkOrange
|
|
, transitionStyleMedium
|
|
, transitionStyleSlow
|
|
)
|
|
import Element as E exposing (..)
|
|
import Element.Background as B
|
|
import Element.Border as D
|
|
import Element.Font as F
|
|
import Html.Attributes as H
|
|
import Route.Path as Path exposing (..)
|
|
import Shared
|
|
|
|
|
|
cardMaker : Device -> Cardable msg -> List (Element msg) -> Element msg
|
|
cardMaker device cardable contents =
|
|
let
|
|
hasLink : Bool
|
|
hasLink =
|
|
case cardable of
|
|
C.Contact _ ->
|
|
False
|
|
|
|
C.Cuck c ->
|
|
True
|
|
|
|
C.BlogArticle _ ->
|
|
False
|
|
|
|
C.BlogCard _ ->
|
|
True
|
|
|
|
C.Argument _ ->
|
|
False
|
|
|
|
C.Gibberish _ ->
|
|
True
|
|
|
|
C.Service _ ->
|
|
True
|
|
|
|
C.Debate _ ->
|
|
True
|
|
|
|
C.Donate _ ->
|
|
True
|
|
|
|
C.Interview _ ->
|
|
False
|
|
|
|
C.NutriDex _ ->
|
|
False
|
|
|
|
C.ServicePage _ ->
|
|
False
|
|
|
|
cardTitleMaker : String -> Maybe String -> Element msg
|
|
cardTitleMaker title maybeUrl =
|
|
el
|
|
([ headerFontSizeMedium
|
|
, F.bold
|
|
, F.color colourTheme.textLightGrey
|
|
, width fill
|
|
]
|
|
++ (case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
[]
|
|
|
|
( Tablet, Portrait ) ->
|
|
[]
|
|
|
|
_ ->
|
|
[ F.center
|
|
, B.color colourTheme.textDarkOrange
|
|
, D.roundEach
|
|
{ topLeft = 26
|
|
, topRight = 26
|
|
, bottomRight = 0
|
|
, bottomLeft = 0
|
|
}
|
|
, paddingEach
|
|
{ top = 6
|
|
, bottom = 3
|
|
, left = 20
|
|
, right = 20
|
|
}
|
|
]
|
|
)
|
|
)
|
|
<|
|
|
column
|
|
[ width fill
|
|
, spacing 10
|
|
]
|
|
[ case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
case cardable of
|
|
C.NutriDex _ ->
|
|
none
|
|
|
|
C.Contact _ ->
|
|
none
|
|
|
|
_ ->
|
|
divider
|
|
|
|
( Tablet, Portrait ) ->
|
|
case cardable of
|
|
C.NutriDex _ ->
|
|
none
|
|
|
|
C.Contact _ ->
|
|
none
|
|
|
|
_ ->
|
|
divider
|
|
|
|
_ ->
|
|
none
|
|
, case cardable of
|
|
C.BlogCard blogArticle ->
|
|
case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
image
|
|
[ width fill
|
|
, paddingEach
|
|
{ top = 8
|
|
, bottom = 0
|
|
, left = 0
|
|
, right = 0
|
|
}
|
|
]
|
|
{ src = "/blog/" ++ blogArticle.articleImage ++ ".png", description = "" }
|
|
|
|
( Tablet, Portrait ) ->
|
|
image
|
|
[ width fill
|
|
, paddingEach
|
|
{ top = 8
|
|
, bottom = 0
|
|
, left = 0
|
|
, right = 0
|
|
}
|
|
]
|
|
{ src = "/blog/" ++ blogArticle.articleImage ++ ".png", description = "" }
|
|
|
|
_ ->
|
|
none
|
|
|
|
_ ->
|
|
none
|
|
, row [ width fill, spacing 10 ]
|
|
[ case cardable of
|
|
C.NutriDex _ ->
|
|
case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
none
|
|
|
|
( Tablet, Portrait ) ->
|
|
none
|
|
|
|
_ ->
|
|
paragraph [] [ text title ]
|
|
|
|
C.Contact _ ->
|
|
case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
none
|
|
|
|
( Tablet, Portrait ) ->
|
|
none
|
|
|
|
_ ->
|
|
paragraph [] [ text title ]
|
|
|
|
_ ->
|
|
paragraph [] [ text title ]
|
|
, el
|
|
[ alignRight
|
|
]
|
|
(case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
case maybeUrl of
|
|
Just url ->
|
|
readMoreLink url
|
|
|
|
Nothing ->
|
|
none
|
|
|
|
( Tablet, Portrait ) ->
|
|
case maybeUrl of
|
|
Just url ->
|
|
readMoreLink url
|
|
|
|
Nothing ->
|
|
none
|
|
|
|
_ ->
|
|
none
|
|
)
|
|
]
|
|
]
|
|
|
|
readMoreLink : String -> Element msg
|
|
readMoreLink url =
|
|
link [ alignTop, paddingXY 0 5 ]
|
|
{ url = url
|
|
, label =
|
|
el
|
|
[ F.color colourTheme.textLightGrey
|
|
, B.color colourTheme.textDarkOrange
|
|
, D.rounded 10
|
|
, paddingEach
|
|
{ top = 6
|
|
, bottom = 3
|
|
, left = 10
|
|
, right = 10
|
|
}
|
|
, mouseOver
|
|
[ F.color colourTheme.textLightOrange
|
|
, B.color colourTheme.textDeepDarkOrange
|
|
]
|
|
, transitionStyleSlow
|
|
, paragraphFontSize
|
|
]
|
|
<|
|
|
text
|
|
(case cardable of
|
|
C.Donate _ ->
|
|
"Support!"
|
|
|
|
C.Argument _ ->
|
|
"Proof Tree!"
|
|
|
|
_ ->
|
|
"Read More!"
|
|
)
|
|
}
|
|
|
|
cardInner : String -> Maybe String -> List (Element msg) -> Element msg
|
|
cardInner title maybeUrl elements =
|
|
column
|
|
[ width fill
|
|
, spacing 0
|
|
]
|
|
[ cardTitleMaker title maybeUrl
|
|
, (case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
el
|
|
[ E.width fill
|
|
, centerX
|
|
]
|
|
|
|
( Tablet, Portrait ) ->
|
|
el
|
|
[ E.width fill
|
|
, centerX
|
|
]
|
|
|
|
_ ->
|
|
cardStuff
|
|
)
|
|
<|
|
|
row
|
|
[ width fill
|
|
]
|
|
elements
|
|
]
|
|
|
|
cardOuter : Element msg -> Element msg
|
|
cardOuter elements =
|
|
contentContainer <|
|
|
el
|
|
([ E.width fill
|
|
]
|
|
++ (case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
[]
|
|
|
|
( Tablet, Portrait ) ->
|
|
[]
|
|
|
|
_ ->
|
|
[ E.width fill
|
|
, D.width 5
|
|
, D.color colourTheme.backgroundDarkGrey
|
|
, D.rounded 32
|
|
, glowDeepDarkGrey
|
|
]
|
|
++ (if hasLink then
|
|
[ mouseOver
|
|
[ D.color colourTheme.textDarkOrange
|
|
, B.color colourTheme.textDarkOrange
|
|
, glowDeepDarkOrange
|
|
]
|
|
, transitionStyleSlow
|
|
]
|
|
|
|
else
|
|
[]
|
|
)
|
|
)
|
|
)
|
|
elements
|
|
|
|
cardWithImageWithLink : Bool -> String -> String -> String -> List (Element msg) -> Element msg
|
|
cardWithImageWithLink linkBool title image url content =
|
|
linkChooser
|
|
linkBool
|
|
(cardInner title
|
|
(if hasLink then
|
|
Just url
|
|
|
|
else
|
|
Nothing
|
|
)
|
|
[ cardContentMaker content
|
|
]
|
|
)
|
|
url
|
|
|
|
cardWithNoImageWithLink : Bool -> String -> String -> List (Element msg) -> Element msg
|
|
cardWithNoImageWithLink linkBool title url content =
|
|
linkChooser
|
|
linkBool
|
|
(cardInner title
|
|
(Just url)
|
|
[ cardContentMaker content
|
|
]
|
|
)
|
|
url
|
|
|
|
cardWithImage : String -> String -> List (Element msg) -> Element msg
|
|
cardWithImage title image content =
|
|
cardOuter <|
|
|
cardInner title
|
|
Nothing
|
|
[ cardContentMaker content
|
|
]
|
|
|
|
cardWithNoImage : String -> List (Element msg) -> Element msg
|
|
cardWithNoImage title content =
|
|
cardOuter <|
|
|
cardInner title
|
|
Nothing
|
|
[ cardContentMaker content
|
|
]
|
|
|
|
linkChooser : Bool -> Element msg -> String -> Element msg
|
|
linkChooser linkBool element url =
|
|
cardOuter <|
|
|
case ( device.class, device.orientation ) of
|
|
( Phone, Portrait ) ->
|
|
el [ width fill ] <| element
|
|
|
|
( Tablet, Portrait ) ->
|
|
el [ width fill ] <| element
|
|
|
|
_ ->
|
|
(if linkBool then
|
|
newTabLink
|
|
|
|
else
|
|
link
|
|
)
|
|
[ width fill ]
|
|
{ url = url
|
|
, label = element
|
|
}
|
|
in
|
|
case cardable of
|
|
C.Contact contact ->
|
|
cardWithNoImage
|
|
(String.toUpper contact.contactName)
|
|
contents
|
|
|
|
C.Cuck cuck ->
|
|
cardWithImage
|
|
cuck.cuckName
|
|
(imagePathMaker M.Cuck cuck.cuckImage)
|
|
contents
|
|
|
|
C.BlogArticle blogArticle ->
|
|
cardWithNoImage
|
|
(String.toUpper blogArticle.articleName)
|
|
contents
|
|
|
|
C.BlogCard blogArticle ->
|
|
cardWithImageWithLink
|
|
blogArticle.isNewTabLink
|
|
blogArticle.articleName
|
|
(imagePathMaker M.BlogCard blogArticle.articleImage)
|
|
blogArticle.articleLink
|
|
contents
|
|
|
|
C.Argument argument ->
|
|
cardWithNoImage
|
|
argument.argumentTitle
|
|
contents
|
|
|
|
C.Gibberish gibberish ->
|
|
cardWithImageWithLink
|
|
gibberish.isNewTabLink
|
|
gibberish.gibberishTitle
|
|
(imagePathMaker M.Gibberish gibberish.gibberishImage)
|
|
gibberish.gibberishLink
|
|
contents
|
|
|
|
C.Service service ->
|
|
cardWithImageWithLink
|
|
service.isNewTabLink
|
|
service.serviceName
|
|
(imagePathMaker M.Service service.serviceImage)
|
|
service.serviceLink
|
|
contents
|
|
|
|
C.Debate debate ->
|
|
cardWithImageWithLink
|
|
debate.isNewTabLink
|
|
debate.debateTitle
|
|
(imagePathMaker M.Debate debate.debateImage)
|
|
debate.debateLink
|
|
contents
|
|
|
|
C.Donate donate ->
|
|
cardWithImageWithLink
|
|
donate.isNewTabLink
|
|
donate.donateName
|
|
(imagePathMaker M.Donate donate.donateImage)
|
|
donate.donateLink
|
|
contents
|
|
|
|
C.Interview interview ->
|
|
cardWithImage
|
|
interview.interviewName
|
|
(imagePathMaker M.Interviews interview.interviewImage)
|
|
contents
|
|
|
|
C.NutriDex nutriDex ->
|
|
cardWithNoImage
|
|
(String.toUpper nutriDex.nutriDexTitle)
|
|
contents
|
|
|
|
C.ServicePage service ->
|
|
cardWithNoImage
|
|
(String.toUpper service.serviceName)
|
|
contents
|
|
|
|
|
|
cardContentMaker : List (Element msg) -> Element msg
|
|
cardContentMaker content =
|
|
column
|
|
[ spacing 8
|
|
, width fill
|
|
]
|
|
content
|
|
|
|
|
|
cardStuff : Element msg -> Element msg
|
|
cardStuff content =
|
|
el
|
|
[ E.width fill
|
|
, centerX
|
|
, B.color colourTheme.backgroundDarkGrey
|
|
, padding 10
|
|
, D.roundEach
|
|
{ topLeft = 0
|
|
, topRight = 0
|
|
, bottomRight = 26
|
|
, bottomLeft = 26
|
|
}
|
|
]
|
|
<|
|
|
el
|
|
[ paddingEach
|
|
{ top = 0
|
|
, bottom = 0
|
|
, left = 15
|
|
, right = 15
|
|
}
|
|
, width fill
|
|
, height fill
|
|
]
|
|
content
|