Fix the navbar.

beta
Philippe Pittoli 2024-02-23 05:26:40 +01:00
parent b3b84959e6
commit 3098372879
3 changed files with 53 additions and 30 deletions

View File

@ -123,11 +123,11 @@ render { addUserForm, searchUserForm, matching_users, page, wsUp }
, case page of
Home -> Bulma.section_small [Bulma.h3 "Select an action"]
Search -> Bulma.columns_
[ Bulma.column (C.is_size 3) [Bulma.article (Bulma.p "Search users") render_searchuser_form]
[ Bulma.column (C.is 3) [Bulma.article (Bulma.p "Search users") render_searchuser_form]
, Bulma.column_ [ Bulma.h3 "Result", show_found_users ]
]
Add -> Bulma.columns_
[ Bulma.column (C.is_size 5) [Bulma.article (Bulma.p "Add a new user") render_adduser_form] ]
[ Bulma.column (C.is 5) [Bulma.article (Bulma.p "Add a new user") render_adduser_form] ]
]
where
show_found_users = Bulma.box [ HH.ul_ $ map user_card matching_users ]

View File

@ -88,38 +88,43 @@ handleQuery = case _ of
-- | The component changes when the user is authenticated.
-- | A button has to appear for administrators.
-- |
-- | **TODO**: on mobile (a device with low resolution), a `burger icon` appears instead of the navigation bar.
-- | On mobile (a device with low resolution), a `burger icon` appears instead of the navigation bar.
-- | When clicked, a list of options (such as pages or a disconnection button) should appear.
-- | Also, when clicked again, the list should disappear.
render :: forall m. State -> H.ComponentHTML Action () m
render { logged, active, admin }
= HH.div_
[ main_nav
[ nav_brand [ logo, burger_menu ]
, nav_menu
[ navbar_start [ left_bar_div ]
, navbar_end [ right_bar_div ]
]
]
]
render { logged, active, admin } =
main_nav
[ nav_brand [ logo, burger_menu ]
, nav_menu
[ navbar_start left_bar_div
, navbar_end right_bar_div
]
]
where
left_bar_div =
HH.div [HP.classes C.buttons] $ case logged, admin of
case logged, admin of
false, _ -> [ link_home, code_dropdown ]
_, false -> [ link_home, link_domains, code_dropdown ]
_, _ -> [ link_home, link_domains, link_authd_admin, code_dropdown ]
right_bar_div =
HH.div [HP.classes C.navbar_item]
[ HH.div [HP.classes C.buttons] $ case logged of
false -> [ link_auth, link_register, link_mail_validation ]
_ -> [ link_disconnection ]
]
case logged of
false -> [ link_auth, link_register, link_mail_validation ]
_ -> [ link_disconnection ]
main_nav = HH.nav [ HP.classes C.navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
logo = HH.a [HP.classes C.navbar_item, HP.href "/"] [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
navbar_color = C.is_success
main_nav =
HH.nav [ HP.classes $ C.navbar <> navbar_color
, ARIA.label "main navigation"
, ARIA.role "navigation"
]
logo = HH.strong [HP.classes $ C.navbar_item <> (C.is_size 4)] [HH.text "🍉"]
-- HH.a [HP.classes C.navbar_item, HP.href "/"]
-- [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
burger_menu =
HH.a [ HP.classes $ C.navbar_burger <> if active then C.is_active else []
@ -133,18 +138,21 @@ render { logged, active, admin }
]
nav_brand = HH.div [HP.classes C.navbar_brand]
nav_menu = HH.div [HP.id "navbar-netlibre", HP.classes $ C.navbar_menu <> if active then C.is_active else []]
nav_menu = HH.div
[ HP.id "navbar-netlibre"
, HP.classes $ C.navbar_menu <> C.is_spaced <> if active then C.is_active else []
]
navbar_start = HH.div [HP.classes C.navbar_start]
navbar_end = HH.div [HP.classes C.navbar_end]
link_home = nav_button C.is_info "Home" (Navigate Home)
link_domains = nav_button C.is_info "Domains" (Navigate DomainList)
link_authd_admin = nav_button C.is_info "Admin" (Navigate Administration)
link_auth = nav_button C.is_info "Login" (Navigate Authentication)
link_register = nav_button_strong "Register" (Navigate Registration)
link_mail_validation = nav_button C.is_info "Mail verification" (Navigate MailValidation)
link_disconnection = nav_button C.is_danger "Disconnection" UnLog
link_home = nav_link "Home" (Navigate Home)
link_domains = nav_link "Domains" (Navigate DomainList)
link_authd_admin = nav_link "Admin" (Navigate Administration)
link_auth = nav_link "Login" (Navigate Authentication)
link_register = nav_link_strong "Register" (Navigate Registration)
link_mail_validation = nav_link "Mail verification" (Navigate MailValidation)
link_disconnection = nav_link "Disconnection" UnLog
dropdown title dropdown_elements
= HH.div [HP.classes $ C.navbar_item <> C.has_dropdown <> C.is_hoverable]
@ -156,6 +164,16 @@ render { logged, active, admin }
nav_button_strong str action = btn C.is_primary action (HH.strong [] [ HH.text str ])
nav_button classes str action = btn classes action (HH.text str)
nav_link_strong str action =
HH.a [ HP.classes (C.navbar_item <> C.is_danger <> C.has_background_success_dark)
, HE.onClick (\_ -> action)
] [ (HH.strong [] [ HH.text str ]) ]
nav_link str action =
HH.a [ HP.classes (C.navbar_item <> navbar_color)
, HE.onClick (\_ -> action)
] [ (HH.text str) ]
code_dropdown =
dropdown "Source code"
[ dropdown_element "https://git.baguette.netlib.re/Baguette/authd" "authentication daemon"

View File

@ -4,6 +4,9 @@ import Prelude (show, ($), (<>))
import Halogen.HTML as HH
is_spaced :: Array HH.ClassName
is_spaced = [HH.ClassName "is-spaced"]
is_ancestor :: Array HH.ClassName
is_ancestor = [HH.ClassName "is-ancestor"]
is_vertical :: Array HH.ClassName
@ -107,8 +110,10 @@ is_centered :: Array HH.ClassName
is_centered = [HH.ClassName "is-centered"]
is_danger :: Array HH.ClassName
is_danger = [HH.ClassName "is-danger"]
is :: Int -> Array HH.ClassName
is size = [HH.ClassName $ "is-" <> show size]
is_size :: Int -> Array HH.ClassName
is_size size = [HH.ClassName $ "is-" <> show size]
is_size size = [HH.ClassName $ "is-size-" <> show size]
is_horizontal :: Array HH.ClassName
is_horizontal = [HH.ClassName "is-horizontal"]
is_hoverable :: Array HH.ClassName