mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-16 04:25:11 -05:00
feat: almost finished mvp
This commit is contained in:
Nick
parent
f3f7df13f5
commit
7ea90e4132
16 changed files with 1499 additions and 180 deletions
|
|
@ -3,11 +3,12 @@ module Layouts.Navbar exposing (Model, Msg, Props, layout)
|
|||
import Config.Colour as T exposing (..)
|
||||
import Config.Format as O exposing (..)
|
||||
import Config.Identity as I exposing (..)
|
||||
import Config.Style.Svgs as Icon exposing (..)
|
||||
import Effect exposing (Effect)
|
||||
import Element as E exposing (..)
|
||||
import Element.Events as Events
|
||||
import Element.Background as B exposing (..)
|
||||
import Element.Border as D exposing (..)
|
||||
import Element.Events as Events
|
||||
import Element.Font as F
|
||||
import Element.Region exposing (description)
|
||||
import Html exposing (Html)
|
||||
|
|
@ -180,7 +181,7 @@ desktopNavbar =
|
|||
[ F.bold
|
||||
, F.color colourTheme.textLightGrey
|
||||
, F.size 17
|
||||
, spacing 8
|
||||
, spacing 10
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 0
|
||||
|
|
@ -188,16 +189,9 @@ desktopNavbar =
|
|||
, left = 10
|
||||
}
|
||||
]
|
||||
(desktopHomeButtonMaker
|
||||
:: List.map desktopPagesButtonMaker
|
||||
[ pageNames.pageServices
|
||||
, pageNames.pageHyperBlog
|
||||
, pageNames.pageDebate
|
||||
, pageNames.pageNutriDex
|
||||
, pageNames.pageInterviews
|
||||
, pageNames.pageDonate
|
||||
, pageNames.pageContact
|
||||
]
|
||||
(List.map2 desktopButtonMaker
|
||||
pageList
|
||||
iconList
|
||||
)
|
||||
]
|
||||
]
|
||||
|
|
@ -212,22 +206,18 @@ desktopIconMaker =
|
|||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
, spacing 2
|
||||
, E.width <| px 140
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 20
|
||||
, right = 0
|
||||
, bottom = 20
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 140
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 20
|
||||
, right = 0
|
||||
, bottom = 20
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
{ src = "assets/logo.png"
|
||||
, description = ""
|
||||
}
|
||||
[ html upRootMedium
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 140
|
||||
|
|
@ -254,22 +244,18 @@ mobileIconMaker =
|
|||
[ row
|
||||
(nonHighlightedTitleFormat
|
||||
++ [ centerX
|
||||
, spacing 2
|
||||
, E.width <| px 35
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
, right = 0
|
||||
, bottom = 10
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
)
|
||||
[ E.image
|
||||
[ spacing 2
|
||||
, E.width <| px 35
|
||||
, centerX
|
||||
, paddingEach
|
||||
{ top = 10
|
||||
, right = 0
|
||||
, bottom = 10
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
{ src = "assets/logo_lambda.png"
|
||||
, description = ""
|
||||
}
|
||||
[ html upRootSmall
|
||||
]
|
||||
, el
|
||||
[ E.width <| px 20
|
||||
|
|
@ -304,16 +290,9 @@ mobileNavbar =
|
|||
[ spacing 8
|
||||
, centerX
|
||||
]
|
||||
(mobileHomeButtonMaker
|
||||
:: List.map mobilePagesButtonMaker
|
||||
[ pageNames.pageServices
|
||||
, pageNames.pageHyperBlog
|
||||
, pageNames.pageDebate
|
||||
, pageNames.pageNutriDex
|
||||
, pageNames.pageInterviews
|
||||
, pageNames.pageDonate
|
||||
, pageNames.pageContact
|
||||
]
|
||||
(List.map2 mobileButtonMaker
|
||||
pageList
|
||||
iconList
|
||||
)
|
||||
]
|
||||
]
|
||||
|
|
@ -347,77 +326,83 @@ mobileBackground =
|
|||
]
|
||||
|
||||
|
||||
desktopButtonMaker : String -> String -> Element msg
|
||||
desktopButtonMaker name url =
|
||||
desktopButtonMaker : String -> Html msg -> Element msg
|
||||
desktopButtonMaker name icon =
|
||||
link
|
||||
[ E.width fill ]
|
||||
{ url = url
|
||||
{ url =
|
||||
if name == "Home" then
|
||||
localhostUrl
|
||||
|
||||
else
|
||||
localhostUrl ++ String.toLower name
|
||||
, 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"
|
||||
[ spacing 0, height <| px 30 ]
|
||||
[ column
|
||||
[ E.width <| px 35
|
||||
, paddingEach
|
||||
{ top = 0
|
||||
, right = 10
|
||||
, bottom = 0
|
||||
, left = 0
|
||||
}
|
||||
]
|
||||
[ html 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)
|
||||
[ mouseOver [ F.color colourTheme.textLightOrange ]
|
||||
, F.color colourTheme.textLightGrey
|
||||
, htmlAttribute <| style "transition" "all 0.1s ease-in-out"
|
||||
, alignBottom
|
||||
]
|
||||
[ 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 =
|
||||
mobileButtonMaker : String -> Html msg -> Element msg
|
||||
mobileButtonMaker name icon =
|
||||
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"
|
||||
}
|
||||
[ column
|
||||
[ E.width <| px 20
|
||||
]
|
||||
[ html icon
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
mobileHomeButtonMaker : Element msg
|
||||
mobileHomeButtonMaker =
|
||||
mobileButtonMaker "home"
|
||||
iconList : List (Html msg)
|
||||
iconList =
|
||||
[ Icon.home
|
||||
, Icon.services
|
||||
, Icon.hyperBlog
|
||||
, Icon.debate
|
||||
, Icon.nutriDex
|
||||
, Icon.interviews
|
||||
, Icon.donate
|
||||
, Icon.contact
|
||||
]
|
||||
|
||||
|
||||
mobilePagesButtonMaker : String -> Element msg
|
||||
mobilePagesButtonMaker name =
|
||||
mobileButtonMaker name
|
||||
pageList : List String
|
||||
pageList =
|
||||
[ "Home"
|
||||
, "Services"
|
||||
, "HyperBlog"
|
||||
, "Debate"
|
||||
, "NutriDex"
|
||||
, "Interviews"
|
||||
, "Donate"
|
||||
, "Contact"
|
||||
]
|
||||
|
||||
|
||||
desktopFooterIcons : Element msg
|
||||
|
|
@ -452,13 +437,14 @@ desktopFooterIcons =
|
|||
, right = 0
|
||||
}
|
||||
]
|
||||
(List.map
|
||||
footerImageMaker
|
||||
(List.map2
|
||||
desktopFooterImageMaker
|
||||
[ gitlabDetails
|
||||
, twitterDetails
|
||||
, mastodonDetails
|
||||
, discordDetails
|
||||
]
|
||||
footerIconList
|
||||
)
|
||||
]
|
||||
]
|
||||
|
|
@ -495,37 +481,52 @@ mobileFooterIcons =
|
|||
, right = 0
|
||||
}
|
||||
]
|
||||
(List.map
|
||||
footerImageMaker
|
||||
(List.map2
|
||||
mobileFooterImageMaker
|
||||
[ gitlabDetails
|
||||
, twitterDetails
|
||||
, mastodonDetails
|
||||
, discordDetails
|
||||
]
|
||||
footerIconList
|
||||
)
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
footerImageMaker :
|
||||
desktopFooterImageMaker :
|
||||
{ name : String
|
||||
, url : String
|
||||
}
|
||||
-> Html msg
|
||||
-> Element msg
|
||||
footerImageMaker config =
|
||||
desktopFooterImageMaker config icon =
|
||||
column [ centerX ]
|
||||
[ newTabLink []
|
||||
{ url = config.url
|
||||
, label =
|
||||
row []
|
||||
[ E.image
|
||||
[ E.width <| px 20
|
||||
, alignBottom
|
||||
, centerX
|
||||
]
|
||||
{ src = "navbar/" ++ config.name ++ "-light.png"
|
||||
, description = ""
|
||||
}
|
||||
row
|
||||
[ E.width <| px 20 ]
|
||||
[ html icon
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
mobileFooterImageMaker :
|
||||
{ name : String
|
||||
, url : String
|
||||
}
|
||||
-> Html msg
|
||||
-> Element msg
|
||||
mobileFooterImageMaker config icon =
|
||||
column [ centerX ]
|
||||
[ newTabLink []
|
||||
{ url = config.url
|
||||
, label =
|
||||
row
|
||||
[ E.width <| px 15 ]
|
||||
[ html icon
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -557,3 +558,11 @@ discordDetails =
|
|||
{ name = "discord"
|
||||
, url = "https://discord.com/invite/YrcEvgRTqy"
|
||||
}
|
||||
|
||||
|
||||
footerIconList =
|
||||
[ Icon.gitlab
|
||||
, Icon.twitter
|
||||
, Icon.mastodon
|
||||
, Icon.discord
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue