diff --git a/src/App/AdministrationInterface.purs b/src/App/AdministrationInterface.purs index 9a488d4..b69d09c 100644 --- a/src/App/AdministrationInterface.purs +++ b/src/App/AdministrationInterface.purs @@ -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 ] diff --git a/src/App/NavigationInterface.purs b/src/App/NavigationInterface.purs index d94544e..cf544a8 100644 --- a/src/App/NavigationInterface.purs +++ b/src/App/NavigationInterface.purs @@ -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" diff --git a/src/CSSClasses.purs b/src/CSSClasses.purs index bc4c50b..2f9c723 100644 --- a/src/CSSClasses.purs +++ b/src/CSSClasses.purs @@ -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