feat: lots of work

This commit is contained in:
Nick 2024-12-08 03:04:37 -06:00
parent 848038b62b
commit be5663862f
15 changed files with 155 additions and 120 deletions

View file

@ -116,16 +116,16 @@ navbarContainer device content =
]
(case ( device.class, device.orientation ) of
( Phone, Portrait ) ->
[ mobileNavbar, mobileFooterIcons ]
[ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
( Phone, Landscape ) ->
[ mobileNavbar, mobileFooterIcons ]
[ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
( Tablet, Portrait ) ->
[ mobileNavbar, mobileFooterIcons ]
[ mobileIconMaker, mobileNavbar, mobileFooterIcons ]
_ ->
[ desktopNavbar, desktopFooterIcons ]
[ desktopIconMaker, desktopNavbar, desktopFooterIcons ]
)
, el
[ E.width fill
@ -171,46 +171,9 @@ desktopNavbar =
[ alignLeft
, height fill
, F.color colourTheme.textLightGrey
, scrollbarY
]
[ 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
@ -233,6 +196,90 @@ desktopNavbar =
]
desktopIconMaker : Element msg
desktopIconMaker =
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
]
mobileIconMaker : Element msg
mobileIconMaker =
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
]
mobileNavbar : Element msg
mobileNavbar =
column
@ -242,44 +289,6 @@ mobileNavbar =
, 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
@ -406,62 +415,88 @@ mobilePagesButtonMaker name =
desktopFooterIcons : Element msg
desktopFooterIcons =
row
[ alignBottom
, E.width fill
column
[ E.width <| px 140
, alignTop
, centerX
, D.widthEach
{ bottom = 0
, top = 1
, left = 0
, right = 0
}
, D.color colourTheme.textDarkGrey
]
[ row
[ centerX
, centerY
[ alignBottom
, E.width fill
, E.height fill
, spacing 20
, paddingEach
{ top = 10
, bottom = 10
, left = 0
, right = 0
}
, centerX
]
-- Use the list of social media details here
(List.map
footerImageMaker
[ gitlabDetails
, twitterDetails
, mastodonDetails
, discordDetails
[ row
[ centerX
, centerY
, E.width fill
, E.height fill
, spacing 20
, paddingEach
{ top = 25
, bottom = 10
, left = 0
, right = 0
}
]
)
(List.map
footerImageMaker
[ gitlabDetails
, twitterDetails
, mastodonDetails
, discordDetails
]
)
]
]
mobileFooterIcons : Element msg
mobileFooterIcons =
column
[ alignBottom
, E.width fill
[ E.width <| px 20
, alignTop
, centerX
, D.widthEach
{ bottom = 0
, top = 1
, left = 0
, right = 0
}
, D.color colourTheme.textDarkGrey
]
[ column
[ centerX
, centerY
[ alignBottom
, E.width fill
, E.height fill
, spacing 10
, paddingEach
{ top = 10
, bottom = 10
, left = 0
, right = 0
}
]
(List.map
footerImageMaker
[ gitlabDetails
, twitterDetails
, mastodonDetails
, discordDetails
[ 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
]
)
]
]