mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-08-10 12:24:39 -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
|
||||
]
|
||||
|
|
|
|||
0
frontend/src/Config/Helpers/Cards/Types.elm
Normal file → Executable file
0
frontend/src/Config/Helpers/Cards/Types.elm
Normal file → Executable file
|
|
@ -120,6 +120,12 @@ headerMaker headerable =
|
|||
C.Interviews interview ->
|
||||
headerHelper interview.headerTitle interview.headerBody
|
||||
|
||||
C.NutriDex nutriDex ->
|
||||
headerHelper nutriDex.headerTitle nutriDex.headerBody
|
||||
|
||||
C.Contact contact ->
|
||||
headerHelper contact.headerTitle contact.headerBody
|
||||
|
||||
|
||||
cardContentMaker : List (Element msg) -> Element msg
|
||||
cardContentMaker content =
|
||||
|
|
|
|||
22
frontend/src/Config/Helpers/Headers/Records.elm
Normal file → Executable file
22
frontend/src/Config/Helpers/Headers/Records.elm
Normal file → Executable file
|
|
@ -89,3 +89,25 @@ interviewHeader =
|
|||
{ headerTitle = String.toUpper name
|
||||
, headerBody = "This page showcases various podcasts and shows I've been on. If you’d like to have me as a guest on your podcast, feel free to reach out—I’d love to share my perspectives with your audience!"
|
||||
}
|
||||
|
||||
|
||||
nutriDexHeader : Header
|
||||
nutriDexHeader =
|
||||
let
|
||||
name =
|
||||
"The NutriDex"
|
||||
in
|
||||
{ headerTitle = String.toUpper name
|
||||
, headerBody = ""
|
||||
}
|
||||
|
||||
|
||||
contactHeader : Header
|
||||
contactHeader =
|
||||
let
|
||||
name =
|
||||
"Contact"
|
||||
in
|
||||
{ headerTitle = String.toUpper name
|
||||
, headerBody = ""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ type Headerable
|
|||
| Gibberish Header
|
||||
| Services Header
|
||||
| Interviews Header
|
||||
| NutriDex Header
|
||||
| Contact Header
|
||||
|
||||
|
||||
type alias Header =
|
||||
|
|
|
|||
|
|
@ -59,12 +59,14 @@ renderDeviceMarkdown : String -> Element msg
|
|||
renderDeviceMarkdown markdown =
|
||||
case renderMarkdown markdown of
|
||||
Ok ( toc, renderedMarkdown ) ->
|
||||
column
|
||||
[ width fill
|
||||
, centerX
|
||||
, spacing 10
|
||||
paragraph []
|
||||
[ column
|
||||
[ width fill
|
||||
, centerX
|
||||
, spacing 10
|
||||
]
|
||||
(tocView toc :: renderedMarkdown)
|
||||
]
|
||||
(tocView toc :: renderedMarkdown)
|
||||
|
||||
Err error ->
|
||||
E.text error
|
||||
|
|
|
|||
|
|
@ -15,23 +15,31 @@ topLevelContainer =
|
|||
]
|
||||
|
||||
|
||||
pageListCenter : List (Attribute msg)
|
||||
pageListCenter =
|
||||
pageListCenter : Device -> List (Attribute msg)
|
||||
pageListCenter device =
|
||||
[ centerY
|
||||
]
|
||||
++ pageListFormat
|
||||
++ pageListFormat device
|
||||
|
||||
|
||||
pageList : List (Attribute msg)
|
||||
pageList =
|
||||
pageList : Device -> List (Attribute msg)
|
||||
pageList device =
|
||||
[ alignTop
|
||||
]
|
||||
++ pageListFormat
|
||||
++ pageListFormat device
|
||||
|
||||
|
||||
pageListFormat : List (Attribute msg)
|
||||
pageListFormat =
|
||||
[ spacing 30
|
||||
pageListFormat : Device -> List (Attribute msg)
|
||||
pageListFormat device =
|
||||
[ case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
spacing 0
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
spacing 0
|
||||
|
||||
_ ->
|
||||
spacing 20
|
||||
, centerX
|
||||
, padding 30
|
||||
, width fill
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ type alias Theme =
|
|||
, backgroundLightGrey : Color
|
||||
, backgroundDarkGrey : Color
|
||||
, backgroundDeepDarkGrey : Color
|
||||
, backgroundSpreadsheet : Color
|
||||
, shadow : Color
|
||||
, barGreen : Color
|
||||
, barRed : Color
|
||||
|
|
@ -46,6 +47,7 @@ colourTheme =
|
|||
, backgroundLightGrey = rgb255 40 40 40
|
||||
, backgroundDarkGrey = rgb255 30 30 30
|
||||
, backgroundDeepDarkGrey = rgb255 20 20 20
|
||||
, backgroundSpreadsheet = rgb255 36 36 36
|
||||
, shadow = rgb255 10 10 10
|
||||
, barGreen = rgb255 0 102 0
|
||||
, barRed = rgb255 102 0 0
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue