mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 12:25:12 -05:00
feat: still need to remake headers
This commit is contained in:
parent
4686c14667
commit
f9af0e1941
209 changed files with 1057 additions and 953 deletions
307
frontend/src/Config/Helpers/Cardables/Helpers.elm
Normal file
307
frontend/src/Config/Helpers/Cardables/Helpers.elm
Normal file
|
@ -0,0 +1,307 @@
|
|||
module Config.Helpers.Cardables.Helpers exposing (..)
|
||||
|
||||
import Config.Data.Identity
|
||||
exposing
|
||||
( pageNames
|
||||
)
|
||||
import Config.Helpers.Cardables.Types as C exposing (..)
|
||||
import Config.Helpers.Converters exposing (formatName)
|
||||
import Config.Helpers.Format
|
||||
exposing
|
||||
( headerFontSizeMedium
|
||||
, paragraphFontSize
|
||||
, paragraphSpacing
|
||||
)
|
||||
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
|
||||
cardTitleMaker : String -> Element msg
|
||||
cardTitleMaker title =
|
||||
el
|
||||
[ headerFontSizeMedium
|
||||
, F.bold
|
||||
, F.color colourTheme.textLightGrey
|
||||
, B.color colourTheme.textDarkOrange
|
||||
, paddingEach
|
||||
{ top = 6
|
||||
, bottom = 3
|
||||
, left = 20
|
||||
, right = 20
|
||||
}
|
||||
, width fill
|
||||
, F.center
|
||||
, D.roundEach
|
||||
{ topLeft = 26
|
||||
, topRight = 26
|
||||
, bottomRight = 0
|
||||
, bottomLeft = 0
|
||||
}
|
||||
]
|
||||
<|
|
||||
paragraph [] [ text title ]
|
||||
|
||||
cardImageMaker : String -> Element msg
|
||||
cardImageMaker image =
|
||||
el
|
||||
[ alignRight
|
||||
, alignTop
|
||||
, paddingXY 20 20
|
||||
]
|
||||
<|
|
||||
el
|
||||
[ D.rounded 100
|
||||
, D.width 5
|
||||
, glowDeepDarkGrey
|
||||
, D.color colourTheme.backgroundDarkGrey
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
]
|
||||
<|
|
||||
E.image
|
||||
([ alignRight
|
||||
, alignTop
|
||||
, D.rounded 100
|
||||
, clip
|
||||
]
|
||||
++ (case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
[ E.width <| px 45
|
||||
, E.height <| px 45
|
||||
]
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
[ E.width <| px 45
|
||||
, E.height <| px 45
|
||||
]
|
||||
|
||||
_ ->
|
||||
[ E.width <| px 90
|
||||
, E.height <| px 90
|
||||
]
|
||||
)
|
||||
)
|
||||
{ src = image
|
||||
, description = ""
|
||||
}
|
||||
|
||||
cardInner : String -> List (Element msg) -> Element msg
|
||||
cardInner title elements =
|
||||
column
|
||||
[ width fill ]
|
||||
[ cardTitleMaker title
|
||||
, cardStuff <|
|
||||
row
|
||||
[ width fill ]
|
||||
elements
|
||||
]
|
||||
|
||||
cardOuter : Element msg -> Element msg
|
||||
cardOuter elements =
|
||||
el
|
||||
[ width (fill |> minimum 100)
|
||||
, width (fill |> maximum 875)
|
||||
, padding 10
|
||||
, centerX
|
||||
]
|
||||
<|
|
||||
el
|
||||
[ E.width fill
|
||||
, D.width 5
|
||||
, D.color colourTheme.backgroundDarkGrey
|
||||
, D.rounded 32
|
||||
, glowDeepDarkGrey
|
||||
, mouseOver
|
||||
[ D.color colourTheme.textDarkOrange
|
||||
, B.color colourTheme.textDarkOrange
|
||||
, glowDeepDarkOrange
|
||||
]
|
||||
, transitionStyleSlow
|
||||
]
|
||||
elements
|
||||
|
||||
cardWithImageWithLink : Bool -> String -> String -> String -> List (Element msg) -> Element msg
|
||||
cardWithImageWithLink linkBool title image url content =
|
||||
linkChooser
|
||||
linkBool
|
||||
(cardInner title
|
||||
[ cardContentMaker content
|
||||
, cardImageMaker image
|
||||
]
|
||||
)
|
||||
url
|
||||
|
||||
cardWithNoImageWithLink : Bool -> String -> String -> List (Element msg) -> Element msg
|
||||
cardWithNoImageWithLink linkBool title url content =
|
||||
linkChooser
|
||||
linkBool
|
||||
(cardInner title
|
||||
[ cardContentMaker content
|
||||
]
|
||||
)
|
||||
url
|
||||
|
||||
cardWithImage : String -> String -> List (Element msg) -> Element msg
|
||||
cardWithImage title image content =
|
||||
cardOuter <|
|
||||
cardInner title
|
||||
[ cardContentMaker content
|
||||
, cardImageMaker image
|
||||
]
|
||||
|
||||
cardWithNoImage : String -> List (Element msg) -> Element msg
|
||||
cardWithNoImage title content =
|
||||
cardOuter <|
|
||||
cardInner title
|
||||
[ cardContentMaker content
|
||||
]
|
||||
|
||||
linkChooser : Bool -> Element msg -> String -> Element msg
|
||||
linkChooser linkBool element url =
|
||||
cardOuter <|
|
||||
(if linkBool then
|
||||
newTabLink
|
||||
|
||||
else
|
||||
link
|
||||
)
|
||||
[ width fill ]
|
||||
{ url = url
|
||||
, label = element
|
||||
}
|
||||
in
|
||||
case cardable of
|
||||
C.Contact contact ->
|
||||
el [] <| cardTitleMaker contact.contactName
|
||||
|
||||
C.Cuck cuck ->
|
||||
cardWithImageWithLink
|
||||
cuck.isNewTabLink
|
||||
cuck.cuckName
|
||||
("/cucks/" ++ cuck.cuckImage ++ ".png")
|
||||
cuck.cuckSocial
|
||||
contents
|
||||
|
||||
C.BlogArticle blogArticle ->
|
||||
cardWithNoImage
|
||||
blogArticle.articleName
|
||||
contents
|
||||
|
||||
C.BlogCard blogArticle ->
|
||||
cardWithImageWithLink
|
||||
blogArticle.isNewTabLink
|
||||
blogArticle.articleName
|
||||
("/blog/" ++ blogArticle.articleImage ++ "thumb.png")
|
||||
blogArticle.articleLink
|
||||
contents
|
||||
|
||||
C.Argument argument ->
|
||||
cardWithImageWithLink
|
||||
argument.isNewTabLink
|
||||
argument.argumentTitle
|
||||
("/arguments/" ++ argument.argumentImage ++ ".png")
|
||||
argument.proofLink
|
||||
contents
|
||||
|
||||
C.Gibberish gibberish ->
|
||||
cardWithImageWithLink
|
||||
gibberish.isNewTabLink
|
||||
gibberish.gibberishTitle
|
||||
("/gibberish/" ++ gibberish.gibberishImage ++ ".png")
|
||||
gibberish.gibberishLink
|
||||
contents
|
||||
|
||||
C.Service service ->
|
||||
cardWithImageWithLink
|
||||
service.isNewTabLink
|
||||
service.serviceName
|
||||
("/services/" ++ service.serviceImage ++ ".png")
|
||||
service.serviceLink
|
||||
contents
|
||||
|
||||
C.Debate debate ->
|
||||
cardWithImageWithLink
|
||||
debate.isNewTabLink
|
||||
debate.debateTitle
|
||||
("/debate/" ++ debate.debateImage ++ ".png")
|
||||
debate.debateLink
|
||||
contents
|
||||
|
||||
C.Donate donate ->
|
||||
cardWithImageWithLink
|
||||
donate.isNewTabLink
|
||||
donate.donateName
|
||||
("/donate/" ++ donate.donateImage ++ ".png")
|
||||
donate.donateLink
|
||||
contents
|
||||
|
||||
C.Interview interview ->
|
||||
cardWithImage
|
||||
interview.interviewName
|
||||
("/interviews/" ++ interview.interviewImage ++ ".png")
|
||||
contents
|
||||
|
||||
C.NutriDex nutriDex ->
|
||||
cardWithNoImage
|
||||
nutriDex.nutriDexTitle
|
||||
contents
|
||||
|
||||
|
||||
cardContentMaker : List (Element msg) -> Element msg
|
||||
cardContentMaker content =
|
||||
column
|
||||
[ spacing 8
|
||||
, width fill
|
||||
]
|
||||
content
|
||||
|
||||
|
||||
cardStuff : Element msg -> Element msg
|
||||
cardStuff content =
|
||||
el
|
||||
[ E.height fill
|
||||
, E.width fill
|
||||
, centerX
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
, padding 10
|
||||
, D.roundEach
|
||||
{ topLeft = 0
|
||||
, topRight = 0
|
||||
, bottomRight = 26
|
||||
, bottomLeft = 26
|
||||
}
|
||||
, spacing 8
|
||||
]
|
||||
<|
|
||||
el
|
||||
[ paddingEach
|
||||
{ top = 0
|
||||
, bottom = 0
|
||||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, spacing 8
|
||||
, width fill
|
||||
]
|
||||
content
|
Loading…
Add table
Add a link
Reference in a new issue