mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: lots of work
This commit is contained in:
Nick
parent
4a19d6eb06
commit
848038b62b
158 changed files with 1361 additions and 685 deletions
|
|
@ -28,7 +28,7 @@ layout props shared route =
|
|||
, update = update
|
||||
, view =
|
||||
\layoutArgs ->
|
||||
view
|
||||
view shared
|
||||
{ props = props
|
||||
, content = layoutArgs.content
|
||||
, model = layoutArgs.model
|
||||
|
|
@ -76,130 +76,339 @@ subscriptions model =
|
|||
|
||||
|
||||
|
||||
-- image [spacing 30, width <| px 150] {src = "navbar/nutrivorelogo.png", description = ""}
|
||||
-- VIEW
|
||||
|
||||
|
||||
view :
|
||||
{ content : View contentMsg
|
||||
, model : Model
|
||||
, toContentMsg : Msg -> contentMsg
|
||||
, props : Props
|
||||
}
|
||||
Shared.Model
|
||||
->
|
||||
{ content : View contentMsg
|
||||
, model : Model
|
||||
, toContentMsg : Msg -> contentMsg
|
||||
, props : Props
|
||||
}
|
||||
-> View contentMsg
|
||||
view { content, model, toContentMsg, props } =
|
||||
view shared { content, model, toContentMsg, props } =
|
||||
{ title = "uRN :: " ++ content.title
|
||||
, attributes = [ F.family [ spartanFont ] ]
|
||||
, element =
|
||||
row
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
, E.height E.fill
|
||||
]
|
||||
[ column
|
||||
[ htmlAttribute (H.style "position" "fixed")
|
||||
, htmlAttribute (H.style "left" "0")
|
||||
, htmlAttribute (H.style "top" "0")
|
||||
, htmlAttribute (H.style "height" "100vh")
|
||||
, htmlAttribute (H.style "z-index" "10")
|
||||
, htmlAttribute (H.style "transform-style" "preserve-3d")
|
||||
, D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
|
||||
, D.color colourTheme.textDarkOrange
|
||||
]
|
||||
[ column
|
||||
[ alignLeft
|
||||
, height fill
|
||||
, F.color colourTheme.textLightGrey
|
||||
]
|
||||
[ column
|
||||
[ centerX
|
||||
, E.width <| px 200
|
||||
]
|
||||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 140
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 20
|
||||
, right = 0
|
||||
, bottom = 20
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
{ src = "assets/logo.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 140
|
||||
, alignTop
|
||||
, centerX
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
, D.color colourTheme.textDarkGrey
|
||||
]
|
||||
none
|
||||
]
|
||||
, column
|
||||
[ padding 20, alignTop, alignLeft ]
|
||||
[ column
|
||||
[ F.bold
|
||||
, F.color colourTheme.textLightGrey
|
||||
, F.size 17
|
||||
, spacing 8
|
||||
]
|
||||
(homeButtonMaker
|
||||
:: List.map pagesButtonMaker
|
||||
[ pageNames.pageServices
|
||||
, pageNames.pageHyperBlog
|
||||
, pageNames.pageDebate
|
||||
, pageNames.pageGibberish
|
||||
, pageNames.pageCucks
|
||||
, pageNames.pageNutriDex
|
||||
, pageNames.pageInterviews
|
||||
, pageNames.pageDonate
|
||||
, pageNames.pageContact
|
||||
]
|
||||
)
|
||||
]
|
||||
]
|
||||
, footerIcons
|
||||
]
|
||||
, el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = 200
|
||||
}
|
||||
]
|
||||
content.element
|
||||
]
|
||||
, element = navbarContainer shared.device content.element
|
||||
}
|
||||
|
||||
|
||||
navbarContainer : Device -> Element msg -> Element msg
|
||||
navbarContainer device content =
|
||||
row
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
, E.height E.fill
|
||||
]
|
||||
[ column
|
||||
[ htmlAttribute (H.style "position" "fixed")
|
||||
, htmlAttribute (H.style "left" "0")
|
||||
, htmlAttribute (H.style "top" "0")
|
||||
, htmlAttribute (H.style "height" "100vh")
|
||||
, htmlAttribute (H.style "z-index" "10")
|
||||
, htmlAttribute (H.style "transform-style" "preserve-3d")
|
||||
, D.widthEach { top = 0, bottom = 0, left = 0, right = 3 }
|
||||
, D.color colourTheme.textDarkOrange
|
||||
, B.color colourTheme.backgroundDarkGrey
|
||||
]
|
||||
(case ( device.class, device.orientation ) of
|
||||
( Phone, Portrait ) ->
|
||||
[ mobileNavbar, mobileFooterIcons ]
|
||||
|
||||
( Phone, Landscape ) ->
|
||||
[ mobileNavbar, mobileFooterIcons ]
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
[ mobileNavbar, mobileFooterIcons ]
|
||||
|
||||
_ ->
|
||||
[ desktopNavbar, desktopFooterIcons ]
|
||||
)
|
||||
, el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left =
|
||||
case ( device.class, device.orientation ) of
|
||||
( Phone, _ ) ->
|
||||
mobileBarWidth
|
||||
|
||||
( Tablet, Portrait ) ->
|
||||
mobileBarWidth
|
||||
|
||||
_ ->
|
||||
desktopBarWidth
|
||||
}
|
||||
]
|
||||
content
|
||||
]
|
||||
|
||||
|
||||
desktopBarWidth : Int
|
||||
desktopBarWidth =
|
||||
200
|
||||
|
||||
|
||||
mobileBarWidth : Int
|
||||
mobileBarWidth =
|
||||
50
|
||||
|
||||
|
||||
localhostUrl : String
|
||||
localhostUrl =
|
||||
"http://localhost:1234/"
|
||||
url
|
||||
|
||||
|
||||
footerIcons : Element msg
|
||||
footerIcons =
|
||||
desktopNavbar : Element msg
|
||||
desktopNavbar =
|
||||
column
|
||||
[ alignLeft
|
||||
, height fill
|
||||
, F.color colourTheme.textLightGrey
|
||||
]
|
||||
[ column
|
||||
[ centerX
|
||||
, E.width <| px desktopBarWidth
|
||||
]
|
||||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 140
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 20
|
||||
, right = 0
|
||||
, bottom = 20
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
{ src = "assets/logo.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 140
|
||||
, alignTop
|
||||
, centerX
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
, D.color colourTheme.textDarkGrey
|
||||
]
|
||||
none
|
||||
]
|
||||
, column
|
||||
[ padding 20, alignTop, alignLeft ]
|
||||
[ column
|
||||
[ F.bold
|
||||
, F.color colourTheme.textLightGrey
|
||||
, F.size 17
|
||||
, spacing 8
|
||||
]
|
||||
(desktopHomeButtonMaker
|
||||
:: List.map desktopPagesButtonMaker
|
||||
[ pageNames.pageServices
|
||||
, pageNames.pageHyperBlog
|
||||
, pageNames.pageDebate
|
||||
, pageNames.pageNutriDex
|
||||
, pageNames.pageInterviews
|
||||
, pageNames.pageDonate
|
||||
, pageNames.pageContact
|
||||
]
|
||||
)
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
mobileNavbar : Element msg
|
||||
mobileNavbar =
|
||||
column
|
||||
[ height fill
|
||||
, E.width fill
|
||||
, F.color colourTheme.textLightGrey
|
||||
, scrollbarY
|
||||
]
|
||||
[ column
|
||||
[ centerX
|
||||
, E.width <| px mobileBarWidth
|
||||
]
|
||||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 35
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
, right = 0
|
||||
, bottom = 10
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
{ src = "assets/logo_lambda.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 20
|
||||
, alignTop
|
||||
, centerX
|
||||
, D.widthEach
|
||||
{ bottom = 1
|
||||
, top = 0
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
, D.color colourTheme.textDarkGrey
|
||||
]
|
||||
none
|
||||
]
|
||||
, column
|
||||
[ padding 5
|
||||
, centerY
|
||||
, centerX
|
||||
]
|
||||
[ column
|
||||
[ spacing 8
|
||||
, centerX
|
||||
]
|
||||
(mobileHomeButtonMaker
|
||||
:: List.map mobilePagesButtonMaker
|
||||
[ pageNames.pageServices
|
||||
, pageNames.pageHyperBlog
|
||||
, pageNames.pageDebate
|
||||
, pageNames.pageNutriDex
|
||||
, pageNames.pageInterviews
|
||||
, pageNames.pageDonate
|
||||
, pageNames.pageContact
|
||||
]
|
||||
)
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
desktopBackground : Element msg -> Element msg
|
||||
desktopBackground =
|
||||
el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = desktopBarWidth
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
mobileBackground : Element msg -> Element msg
|
||||
mobileBackground =
|
||||
el
|
||||
[ E.width fill
|
||||
, height fill
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
, bottom = 0
|
||||
, left = mobileBarWidth
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
desktopButtonMaker : String -> String -> Element msg
|
||||
desktopButtonMaker name url =
|
||||
link
|
||||
[ E.width fill ]
|
||||
{ url = url
|
||||
, label =
|
||||
row
|
||||
[ spacing 0 ]
|
||||
[ column [ E.width <| px 36 ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
]
|
||||
{ src = "navbar/" ++ String.toLower name ++ ".png"
|
||||
, description = name ++ " icon"
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ el
|
||||
[ mouseOver [ F.color colourTheme.textLightOrange ]
|
||||
, F.color colourTheme.textLightGrey
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
]
|
||||
<|
|
||||
text (String.toUpper name)
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
desktopHomeButtonMaker : Element msg
|
||||
desktopHomeButtonMaker =
|
||||
desktopButtonMaker "home" localhostUrl
|
||||
|
||||
|
||||
desktopPagesButtonMaker : String -> Element msg
|
||||
desktopPagesButtonMaker name =
|
||||
desktopButtonMaker name (localhostUrl ++ String.toLower name)
|
||||
|
||||
|
||||
mobileButtonMaker : String -> Element msg
|
||||
mobileButtonMaker name =
|
||||
link
|
||||
[]
|
||||
{ url = localhostUrl ++ String.toLower name
|
||||
, label =
|
||||
row
|
||||
[ spacing 10 ]
|
||||
[ column [ E.width <| px 36 ]
|
||||
[ E.image
|
||||
[ E.width <| px 25
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/" ++ String.toLower name ++ ".png"
|
||||
, description = name ++ " icon"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
mobileHomeButtonMaker : Element msg
|
||||
mobileHomeButtonMaker =
|
||||
mobileButtonMaker "home"
|
||||
|
||||
|
||||
mobilePagesButtonMaker : String -> Element msg
|
||||
mobilePagesButtonMaker name =
|
||||
mobileButtonMaker name
|
||||
|
||||
|
||||
desktopFooterIcons : Element msg
|
||||
desktopFooterIcons =
|
||||
row
|
||||
[ alignBottom
|
||||
, E.width fill
|
||||
, E.height <| px 100
|
||||
]
|
||||
[ row
|
||||
[ centerX
|
||||
|
|
@ -208,77 +417,101 @@ footerIcons =
|
|||
, E.height fill
|
||||
, spacing 20
|
||||
, paddingEach
|
||||
{ top = 40
|
||||
, bottom = 20
|
||||
, left = 20
|
||||
, right = 20
|
||||
{ top = 10
|
||||
, bottom = 10
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
]
|
||||
<|
|
||||
List.map
|
||||
-- Use the list of social media details here
|
||||
(List.map
|
||||
footerImageMaker
|
||||
iconList
|
||||
]
|
||||
|
||||
|
||||
footerImageMaker : String -> Element msg
|
||||
footerImageMaker name =
|
||||
E.image
|
||||
[ E.width <| px 20
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/" ++ name ++ "-light.png"
|
||||
, description = ""
|
||||
}
|
||||
|
||||
|
||||
iconList : List String
|
||||
iconList =
|
||||
[ "gitlab"
|
||||
, "twitter"
|
||||
, "mastodon"
|
||||
, "discord"
|
||||
]
|
||||
|
||||
|
||||
buttonMaker : String -> String -> Element msg
|
||||
buttonMaker name url =
|
||||
row
|
||||
[ spacing 10 ]
|
||||
[ column [ E.width <| px 36 ]
|
||||
[ E.image
|
||||
[ alignLeft
|
||||
, alignBottom
|
||||
, E.width <| px 30
|
||||
[ gitlabDetails
|
||||
, twitterDetails
|
||||
, mastodonDetails
|
||||
, discordDetails
|
||||
]
|
||||
{ src = "navbar/" ++ String.toLower name ++ ".png"
|
||||
, description = name ++ " icon"
|
||||
}
|
||||
]
|
||||
, column
|
||||
[ alignBottom ]
|
||||
[ link
|
||||
[]
|
||||
{ url = url
|
||||
, label =
|
||||
el
|
||||
[ mouseOver [ F.color colourTheme.textLightOrange ]
|
||||
, F.color colourTheme.textLightGrey
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
]
|
||||
<|
|
||||
text (String.toUpper name)
|
||||
}
|
||||
]
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
homeButtonMaker : Element msg
|
||||
homeButtonMaker =
|
||||
buttonMaker "home" localhostUrl
|
||||
mobileFooterIcons : Element msg
|
||||
mobileFooterIcons =
|
||||
column
|
||||
[ alignBottom
|
||||
, E.width fill
|
||||
]
|
||||
[ column
|
||||
[ centerX
|
||||
, centerY
|
||||
, E.width fill
|
||||
, E.height fill
|
||||
, spacing 10
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
, bottom = 10
|
||||
, left = 0
|
||||
, right = 0
|
||||
}
|
||||
]
|
||||
(List.map
|
||||
footerImageMaker
|
||||
[ gitlabDetails
|
||||
, twitterDetails
|
||||
, mastodonDetails
|
||||
, discordDetails
|
||||
]
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
pagesButtonMaker : String -> Element msg
|
||||
pagesButtonMaker name =
|
||||
buttonMaker name (localhostUrl ++ String.toLower name)
|
||||
footerImageMaker :
|
||||
{ name : String
|
||||
, url : String
|
||||
}
|
||||
-> Element msg
|
||||
footerImageMaker config =
|
||||
column [ centerX ]
|
||||
[ link []
|
||||
{ url = config.url
|
||||
, label =
|
||||
row []
|
||||
[ E.image
|
||||
[ E.width <| px 20
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/" ++ config.name ++ "-light.png"
|
||||
, description = ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
gitlabDetails : { name : String, url : String }
|
||||
gitlabDetails =
|
||||
{ name = "gitlab"
|
||||
, url = "https://gitlab.com/BRBWaffles/website"
|
||||
}
|
||||
|
||||
|
||||
twitterDetails : { name : String, url : String }
|
||||
twitterDetails =
|
||||
{ name = "twitter"
|
||||
, url = "https://x.com/upRootNutrition"
|
||||
}
|
||||
|
||||
|
||||
mastodonDetails : { name : String, url : String }
|
||||
mastodonDetails =
|
||||
{ name = "mastodon"
|
||||
, url = "https://social.uprootnutrition.com/@nick"
|
||||
}
|
||||
|
||||
|
||||
discordDetails : { name : String, url : String }
|
||||
discordDetails =
|
||||
{ name = "discord"
|
||||
, url = "https://discord.com/invite/YrcEvgRTqy"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue