mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: very close to v1
This commit is contained in:
Nick
parent
a9fb4fb14b
commit
cf580a71d0
38 changed files with 428 additions and 246 deletions
334
frontend/src/Config/Helpers/Cards/Helpers.elm
Normal file → Executable file
334
frontend/src/Config/Helpers/Cards/Helpers.elm
Normal file → Executable file
|
|
@ -8,7 +8,9 @@ import Config.Helpers.Cards.Types as C exposing (..)
|
|||
import Config.Helpers.Converters exposing (formatName)
|
||||
import Config.Helpers.Format
|
||||
exposing
|
||||
( headerFontSizeMedium
|
||||
( divider
|
||||
, headerFontSizeBig
|
||||
, headerFontSizeMedium
|
||||
, paragraphFontSize
|
||||
, paragraphSpacing
|
||||
)
|
||||
|
|
@ -78,37 +80,195 @@ cardMaker device cardable contents =
|
|||
C.ServicePage _ ->
|
||||
False
|
||||
|
||||
cardTitleMaker : String -> Element msg
|
||||
cardTitleMaker title =
|
||||
cardTitleMaker : String -> Maybe String -> Element msg
|
||||
cardTitleMaker title maybeUrl =
|
||||
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
|
||||
}
|
||||
]
|
||||
([ 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
|
||||
}
|
||||
]
|
||||
)
|
||||
)
|
||||
<|
|
||||
paragraph [] [ text title ]
|
||||
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!"
|
||||
)
|
||||
}
|
||||
|
||||
cardImageMaker : String -> Element msg
|
||||
cardImageMaker image =
|
||||
el
|
||||
[ alignRight
|
||||
, alignTop
|
||||
, paddingXY 20 20
|
||||
, padding 10
|
||||
]
|
||||
<|
|
||||
el
|
||||
|
|
@ -146,16 +306,32 @@ cardMaker device cardable contents =
|
|||
, description = ""
|
||||
}
|
||||
|
||||
cardInner : String -> List (Element msg) -> Element msg
|
||||
cardInner title elements =
|
||||
cardInner : String -> Maybe String -> List (Element msg) -> Element msg
|
||||
cardInner title maybeUrl elements =
|
||||
column
|
||||
[ width fill
|
||||
, spacing 0
|
||||
]
|
||||
[ cardTitleMaker title
|
||||
, cardStuff <|
|
||||
[ 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
|
||||
, height fill
|
||||
]
|
||||
elements
|
||||
]
|
||||
|
|
@ -165,22 +341,33 @@ cardMaker device cardable contents =
|
|||
contentContainer <|
|
||||
el
|
||||
([ 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
|
||||
]
|
||||
++ (case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
[]
|
||||
|
||||
else
|
||||
[]
|
||||
( 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
|
||||
|
|
@ -190,8 +377,22 @@ cardMaker device cardable contents =
|
|||
linkChooser
|
||||
linkBool
|
||||
(cardInner title
|
||||
(if hasLink then
|
||||
Just url
|
||||
|
||||
else
|
||||
Nothing
|
||||
)
|
||||
[ cardContentMaker content
|
||||
, cardImageMaker image
|
||||
, case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
none
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
none
|
||||
|
||||
_ ->
|
||||
cardImageMaker image
|
||||
]
|
||||
)
|
||||
url
|
||||
|
|
@ -201,6 +402,7 @@ cardMaker device cardable contents =
|
|||
linkChooser
|
||||
linkBool
|
||||
(cardInner title
|
||||
(Just url)
|
||||
[ cardContentMaker content
|
||||
]
|
||||
)
|
||||
|
|
@ -210,30 +412,48 @@ cardMaker device cardable contents =
|
|||
cardWithImage title image content =
|
||||
cardOuter <|
|
||||
cardInner title
|
||||
Nothing
|
||||
[ cardContentMaker content
|
||||
, cardImageMaker image
|
||||
, case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
none
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
none
|
||||
|
||||
_ ->
|
||||
cardImageMaker image
|
||||
]
|
||||
|
||||
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 <|
|
||||
(if linkBool then
|
||||
newTabLink
|
||||
case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
el [ width fill ] <| element
|
||||
|
||||
else
|
||||
link
|
||||
)
|
||||
[ width fill ]
|
||||
{ url = url
|
||||
, label = 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 ->
|
||||
|
|
@ -242,11 +462,9 @@ cardMaker device cardable contents =
|
|||
contents
|
||||
|
||||
C.Cuck cuck ->
|
||||
cardWithImageWithLink
|
||||
cuck.isNewTabLink
|
||||
cardWithImage
|
||||
cuck.cuckName
|
||||
("/cucks/" ++ cuck.cuckImage ++ "/" ++ cuck.cuckImage ++ ".png")
|
||||
cuck.cuckSocial
|
||||
contents
|
||||
|
||||
C.BlogArticle blogArticle ->
|
||||
|
|
@ -340,7 +558,6 @@ cardStuff content =
|
|||
, bottomRight = 26
|
||||
, bottomLeft = 26
|
||||
}
|
||||
, spacing 8
|
||||
]
|
||||
<|
|
||||
el
|
||||
|
|
@ -350,7 +567,6 @@ cardStuff content =
|
|||
, left = 15
|
||||
, right = 15
|
||||
}
|
||||
, spacing 8
|
||||
, width fill
|
||||
, height fill
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue