Fix the navbar.
parent
b3b84959e6
commit
3098372879
|
@ -123,11 +123,11 @@ render { addUserForm, searchUserForm, matching_users, page, wsUp }
|
||||||
, case page of
|
, case page of
|
||||||
Home -> Bulma.section_small [Bulma.h3 "Select an action"]
|
Home -> Bulma.section_small [Bulma.h3 "Select an action"]
|
||||||
Search -> Bulma.columns_
|
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 ]
|
, Bulma.column_ [ Bulma.h3 "Result", show_found_users ]
|
||||||
]
|
]
|
||||||
Add -> Bulma.columns_
|
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
|
where
|
||||||
show_found_users = Bulma.box [ HH.ul_ $ map user_card matching_users ]
|
show_found_users = Bulma.box [ HH.ul_ $ map user_card matching_users ]
|
||||||
|
|
|
@ -88,38 +88,43 @@ handleQuery = case _ of
|
||||||
-- | The component changes when the user is authenticated.
|
-- | The component changes when the user is authenticated.
|
||||||
-- | A button has to appear for administrators.
|
-- | 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.
|
-- | When clicked, a list of options (such as pages or a disconnection button) should appear.
|
||||||
-- | Also, when clicked again, the list should disappear.
|
-- | Also, when clicked again, the list should disappear.
|
||||||
|
|
||||||
render :: forall m. State -> H.ComponentHTML Action () m
|
render :: forall m. State -> H.ComponentHTML Action () m
|
||||||
render { logged, active, admin }
|
render { logged, active, admin } =
|
||||||
= HH.div_
|
main_nav
|
||||||
[ main_nav
|
|
||||||
[ nav_brand [ logo, burger_menu ]
|
[ nav_brand [ logo, burger_menu ]
|
||||||
, nav_menu
|
, nav_menu
|
||||||
[ navbar_start [ left_bar_div ]
|
[ navbar_start left_bar_div
|
||||||
, navbar_end [ right_bar_div ]
|
, navbar_end right_bar_div
|
||||||
]
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
where
|
where
|
||||||
left_bar_div =
|
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, code_dropdown ]
|
||||||
_, false -> [ link_home, link_domains, code_dropdown ]
|
_, false -> [ link_home, link_domains, code_dropdown ]
|
||||||
_, _ -> [ link_home, link_domains, link_authd_admin, code_dropdown ]
|
_, _ -> [ link_home, link_domains, link_authd_admin, code_dropdown ]
|
||||||
|
|
||||||
right_bar_div =
|
right_bar_div =
|
||||||
HH.div [HP.classes C.navbar_item]
|
case logged of
|
||||||
[ HH.div [HP.classes C.buttons] $ case logged of
|
|
||||||
false -> [ link_auth, link_register, link_mail_validation ]
|
false -> [ link_auth, link_register, link_mail_validation ]
|
||||||
_ -> [ link_disconnection ]
|
_ -> [ link_disconnection ]
|
||||||
|
|
||||||
|
navbar_color = C.is_success
|
||||||
|
|
||||||
|
main_nav =
|
||||||
|
HH.nav [ HP.classes $ C.navbar <> navbar_color
|
||||||
|
, ARIA.label "main navigation"
|
||||||
|
, ARIA.role "navigation"
|
||||||
]
|
]
|
||||||
|
|
||||||
main_nav = HH.nav [ HP.classes C.navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
|
logo = HH.strong [HP.classes $ C.navbar_item <> (C.is_size 4)] [HH.text "🍉"]
|
||||||
logo = HH.a [HP.classes C.navbar_item, HP.href "/"] [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
|
-- HH.a [HP.classes C.navbar_item, HP.href "/"]
|
||||||
|
-- [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
|
||||||
|
|
||||||
burger_menu =
|
burger_menu =
|
||||||
HH.a [ HP.classes $ C.navbar_burger <> if active then C.is_active else []
|
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_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_start = HH.div [HP.classes C.navbar_start]
|
||||||
navbar_end = HH.div [HP.classes C.navbar_end]
|
navbar_end = HH.div [HP.classes C.navbar_end]
|
||||||
|
|
||||||
link_home = nav_button C.is_info "Home" (Navigate Home)
|
link_home = nav_link "Home" (Navigate Home)
|
||||||
link_domains = nav_button C.is_info "Domains" (Navigate DomainList)
|
link_domains = nav_link "Domains" (Navigate DomainList)
|
||||||
link_authd_admin = nav_button C.is_info "Admin" (Navigate Administration)
|
link_authd_admin = nav_link "Admin" (Navigate Administration)
|
||||||
link_auth = nav_button C.is_info "Login" (Navigate Authentication)
|
link_auth = nav_link "Login" (Navigate Authentication)
|
||||||
link_register = nav_button_strong "Register" (Navigate Registration)
|
link_register = nav_link_strong "Register" (Navigate Registration)
|
||||||
link_mail_validation = nav_button C.is_info "Mail verification" (Navigate MailValidation)
|
link_mail_validation = nav_link "Mail verification" (Navigate MailValidation)
|
||||||
link_disconnection = nav_button C.is_danger "Disconnection" UnLog
|
link_disconnection = nav_link "Disconnection" UnLog
|
||||||
|
|
||||||
dropdown title dropdown_elements
|
dropdown title dropdown_elements
|
||||||
= HH.div [HP.classes $ C.navbar_item <> C.has_dropdown <> C.is_hoverable]
|
= 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_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_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 =
|
code_dropdown =
|
||||||
dropdown "Source code"
|
dropdown "Source code"
|
||||||
[ dropdown_element "https://git.baguette.netlib.re/Baguette/authd" "authentication daemon"
|
[ dropdown_element "https://git.baguette.netlib.re/Baguette/authd" "authentication daemon"
|
||||||
|
|
|
@ -4,6 +4,9 @@ import Prelude (show, ($), (<>))
|
||||||
|
|
||||||
import Halogen.HTML as HH
|
import Halogen.HTML as HH
|
||||||
|
|
||||||
|
is_spaced :: Array HH.ClassName
|
||||||
|
is_spaced = [HH.ClassName "is-spaced"]
|
||||||
|
|
||||||
is_ancestor :: Array HH.ClassName
|
is_ancestor :: Array HH.ClassName
|
||||||
is_ancestor = [HH.ClassName "is-ancestor"]
|
is_ancestor = [HH.ClassName "is-ancestor"]
|
||||||
is_vertical :: Array HH.ClassName
|
is_vertical :: Array HH.ClassName
|
||||||
|
@ -107,8 +110,10 @@ is_centered :: Array HH.ClassName
|
||||||
is_centered = [HH.ClassName "is-centered"]
|
is_centered = [HH.ClassName "is-centered"]
|
||||||
is_danger :: Array HH.ClassName
|
is_danger :: Array HH.ClassName
|
||||||
is_danger = [HH.ClassName "is-danger"]
|
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 :: 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 :: Array HH.ClassName
|
||||||
is_horizontal = [HH.ClassName "is-horizontal"]
|
is_horizontal = [HH.ClassName "is-horizontal"]
|
||||||
is_hoverable :: Array HH.ClassName
|
is_hoverable :: Array HH.ClassName
|
||||||
|
|
Loading…
Reference in New Issue