Nice tags before tables.

This commit is contained in:
Philippe Pittoli 2024-03-03 01:15:38 +01:00
parent 5ed64fc8c0
commit b4a68fbaf2
3 changed files with 135 additions and 216 deletions

View File

@ -674,17 +674,26 @@ handleQuery = case _ of
-- Rendering -- Rendering
bg_color_ro = C.has_background_warning_light :: Array HH.ClassName bg_color_ro = C.has_background_warning_light :: Array HH.ClassName
tag :: forall w i. String -> HH.HTML w i
tag str = HH.span [HP.classes (C.tag <> C.is_dark)] [HH.text str]
tag_ro :: forall w i. String -> HH.HTML w i
tag_ro str = HH.span [HP.classes (C.tag <> C.is_warning)] [HH.text str]
tags :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
tags xs = HH.span [HP.classes (C.tags <> C.no_margin_bottom <> C.no_padding_bottom)] xs
-- | Render all Resource Records. -- | Render all Resource Records.
render_resources :: forall w. Array ResourceRecord -> HH.HTML w Action render_resources :: forall w. Array ResourceRecord -> HH.HTML w Action
render_resources [] = Bulma.box [Bulma.zone_rr_title "Resource records", Bulma.subtitle "No records for now"] render_resources [] = Bulma.box [Bulma.zone_rr_title "Resource records", Bulma.subtitle "No records for now"]
render_resources records render_resources records
= HH.div_ $ = HH.div_ $
(rr_box "SOA" bg_color_ro Bulma.soa_table_header table_content all_soa_rr) (rr_box tag_soa bg_color_ro Bulma.soa_table_header table_content all_soa_rr)
<> (rr_box "Basic RRs" [] Bulma.simple_table_header table_content_w_seps all_basic_rr) <> (rr_box tag_basic [] Bulma.simple_table_header table_content_w_seps all_basic_rr)
<> (rr_box "MX" [] Bulma.mx_table_header table_content all_mx_rr) <> (rr_box tag_mx [] Bulma.mx_table_header table_content all_mx_rr)
<> (rr_box "SRV" [] Bulma.srv_table_header table_content all_srv_rr) <> (rr_box tag_srv [] Bulma.srv_table_header table_content all_srv_rr)
<> (rr_box "SPF" [] Bulma.spf_table_header table_content all_spf_rr) <> (rr_box tag_spf [] Bulma.spf_table_header table_content all_spf_rr)
<> (rr_box "Basic RRs (read only)" bg_color_ro Bulma.simple_table_header_ro table_content_w_seps all_basic_ro_rr) <> (rr_box tag_basic_ro bg_color_ro Bulma.simple_table_header_ro table_content_w_seps all_basic_ro_rr)
where where
all_basic_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && not rr.readonly) records all_basic_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && not rr.readonly) records
all_basic_ro_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && rr.readonly) records all_basic_ro_rr = A.filter (\rr -> A.elem rr.rrtype baseRecords && rr.readonly) records
@ -694,7 +703,14 @@ render_resources records
all_srv_rr = all_XX_rr "SRV" all_srv_rr = all_XX_rr "SRV"
all_spf_rr = all_XX_rr "SPF" all_spf_rr = all_XX_rr "SPF"
rr_box :: String -- box title (type of data) tag_soa = tags [tag_ro "SOA", tag_ro "read only"]
tag_basic = tags [tag "Basic RRs (A, AAAA, PTR, NS, TXT)"]
tag_mx = tags [tag "MX"]
tag_srv = tags [tag "SRV"]
tag_spf = tags [tag "SPF"]
tag_basic_ro = tags [tag_ro "Basic RRs", tag_ro "read only"]
rr_box :: HH.HTML w Action -- box title (type of data)
-> Array HH.ClassName -> Array HH.ClassName
-> HH.HTML w Action -- table title -> HH.HTML w Action -- table title
-> (Array ResourceRecord -> HH.HTML w Action) -> (Array ResourceRecord -> HH.HTML w Action)
@ -702,11 +718,8 @@ render_resources records
-> Array (HH.HTML w Action) -> Array (HH.HTML w Action)
rr_box title colors header dp rrs = rr_box title colors header dp rrs =
if A.length rrs > 0 if A.length rrs > 0
then [ Bulma.columns_ then [ Bulma.box_ (C.no_padding_left <> C.no_padding_top <> colors)
[ Bulma.column title_col_props [Bulma.box [Bulma.div_content [HH.text title]]] [title, Bulma.table_ (C.margin_left 3) [] [header, dp rrs]] ]
, Bulma.column_ [ Bulma.box_ colors [Bulma.table [] [header, dp rrs]] ]
]
]
else [] else []
title_col_props = C.is 1 title_col_props = C.is 1

View File

@ -57,6 +57,9 @@ input_classes = C.input <> C.is_small <> C.is_info
table :: forall w i. HH.Node DHI.HTMLtable w i table :: forall w i. HH.Node DHI.HTMLtable w i
table prop xs = HH.table ([ HP.classes $ C.table ] <> prop) xs table prop xs = HH.table ([ HP.classes $ C.table ] <> prop) xs
table_ :: forall w i. Array HH.ClassName -> HH.Node DHI.HTMLtable w i
table_ classes prop xs = HH.table ([ HP.classes $ C.table <> classes] <> prop) xs
mechanism_table_header :: forall w i. HH.HTML w i mechanism_table_header :: forall w i. HH.HTML w i
mechanism_table_header mechanism_table_header
= HH.thead_ [ HH.tr_ [ HH.th [ HP.style "width: 50px;" ] [ HH.text "Qualifier" ] = HH.thead_ [ HH.tr_ [ HH.th [ HP.style "width: 50px;" ] [ HH.text "Qualifier" ]
@ -462,7 +465,7 @@ selection action values selected = HH.div [HP.classes $ C.select <> C.is_normal]
] ]
tag_light_info :: forall w i. String -> HH.HTML w i tag_light_info :: forall w i. String -> HH.HTML w i
tag_light_info str = HH.span [HP.classes (C.is_info <> C.is_light)] [HH.text str] tag_light_info str = HH.span [HP.classes (C.tag <> C.is_info <> C.is_light)] [HH.text str]
div_large_content :: forall w i. Array (HH.HTML w i) -> HH.HTML w i div_large_content :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
div_large_content content = HH.div [HP.classes (C.is_large <> C.content)] content div_large_content content = HH.div [HP.classes (C.is_large <> C.content)] content

View File

@ -4,206 +4,109 @@ import Prelude (show, ($), (<>))
import Halogen.HTML as HH import Halogen.HTML as HH
is_spaced :: Array HH.ClassName box = [HH.ClassName "box"] :: Array HH.ClassName
is_spaced = [HH.ClassName "is-spaced"] breadcrumb = [HH.ClassName "breadcrumb"] :: Array HH.ClassName
button = [HH.ClassName "button"] :: Array HH.ClassName
is_ancestor :: Array HH.ClassName buttons = [HH.ClassName "buttons"] :: Array HH.ClassName
is_ancestor = [HH.ClassName "is-ancestor"] column = [HH.ClassName "column"] :: Array HH.ClassName
is_vertical :: Array HH.ClassName columns = [HH.ClassName "columns"] :: Array HH.ClassName
is_vertical = [HH.ClassName "is-vertical"] container = [HH.ClassName "container"] :: Array HH.ClassName
is_parent :: Array HH.ClassName content = [HH.ClassName "content"] :: Array HH.ClassName
is_parent = [HH.ClassName "is-parent"] control = [HH.ClassName "control"] :: Array HH.ClassName
is_child :: Array HH.ClassName delete = [HH.ClassName "delete"] :: Array HH.ClassName
is_child = [HH.ClassName "is-child"] field_body = [HH.ClassName "field-body"] :: Array HH.ClassName
notification :: Array HH.ClassName field = [HH.ClassName "field"] :: Array HH.ClassName
notification = [HH.ClassName "notification"] field_label = [HH.ClassName "field-label"] :: Array HH.ClassName
is_warning :: Array HH.ClassName has_addons = [HH.ClassName "has-addons"] :: Array HH.ClassName
is_warning = [HH.ClassName "is-warning"] has_background_danger_dark = [HH.ClassName "has-background-danger-dark"] :: Array HH.ClassName
has_background_danger = [HH.ClassName "has-background-danger"] :: Array HH.ClassName
message :: Array HH.ClassName has_background_danger_light = [HH.ClassName "has-background-danger-light"] :: Array HH.ClassName
message = [HH.ClassName "message"] has_background_dark = [HH.ClassName "has-background-dark"] :: Array HH.ClassName
has_background_info_dark = [HH.ClassName "has-background-info-dark"] :: Array HH.ClassName
message_header :: Array HH.ClassName has_background_info_light = [HH.ClassName "has-background-info-light"] :: Array HH.ClassName
message_header = [HH.ClassName "message-header"] has_background_link_dark = [HH.ClassName "has-background-link-dark"] :: Array HH.ClassName
has_background_link_light = [HH.ClassName "has-background-link-light"] :: Array HH.ClassName
has_text_centered :: Array HH.ClassName has_background_primary_dark = [HH.ClassName "has-background-primary-dark"] :: Array HH.ClassName
has_text_centered = [HH.ClassName "has-text-centered"] has_background_primary_light = [HH.ClassName "has-background-primary-light"] :: Array HH.ClassName
has_background_success_dark = [HH.ClassName "has-background-success-dark"] :: Array HH.ClassName
message_body :: Array HH.ClassName has_background_success_light = [HH.ClassName "has-background-success-light"] :: Array HH.ClassName
message_body = [HH.ClassName "message-body"] has_background_warning_dark = [HH.ClassName "has-background-warning-dark"] :: Array HH.ClassName
has_background_warning = [HH.ClassName "has-background-warning"] :: Array HH.ClassName
box :: Array HH.ClassName has_background_warning_light = [HH.ClassName "has-background-warning-light"] :: Array HH.ClassName
box = [HH.ClassName "box"] has_dropdown = [HH.ClassName "has-dropdown"] :: Array HH.ClassName
button :: Array HH.ClassName has_succeeds_separator = [HH.ClassName "has-succeeds-separator"] :: Array HH.ClassName
button = [HH.ClassName "button"] has_text_centered = [HH.ClassName "has-text-centered"] :: Array HH.ClassName
buttons :: Array HH.ClassName has_text_dark = [HH.ClassName "has-text-dark"] :: Array HH.ClassName
buttons = [HH.ClassName "buttons"] has_text_light = [HH.ClassName "has-text-light"] :: Array HH.ClassName
breadcrumb :: Array HH.ClassName help = [HH.ClassName "help"] :: Array HH.ClassName
breadcrumb = [HH.ClassName "breadcrumb"] hero_body = [HH.ClassName "hero-body"] :: Array HH.ClassName
column :: Array HH.ClassName hero = [HH.ClassName "hero"] :: Array HH.ClassName
column = [HH.ClassName "column"] input = [HH.ClassName "input"] :: Array HH.ClassName
columns :: Array HH.ClassName is4 = [HH.ClassName "is-4"] :: Array HH.ClassName
columns = [HH.ClassName "columns"] is5 = [HH.ClassName "is-5"] :: Array HH.ClassName
container :: Array HH.ClassName is_active = [HH.ClassName "is-active"] :: Array HH.ClassName
container = [HH.ClassName "container"] is_ancestor = [HH.ClassName "is-ancestor"] :: Array HH.ClassName
control :: Array HH.ClassName is_centered = [HH.ClassName "is-centered"] :: Array HH.ClassName
control = [HH.ClassName "control"] is_child = [HH.ClassName "is-child"] :: Array HH.ClassName
delete :: Array HH.ClassName is_danger = [HH.ClassName "is-danger"] :: Array HH.ClassName
delete = [HH.ClassName "delete"] is_dark = [HH.ClassName "is-dark"] :: Array HH.ClassName
field :: Array HH.ClassName is_horizontal = [HH.ClassName "is-horizontal"] :: Array HH.ClassName
field = [HH.ClassName "field"] is_hoverable = [HH.ClassName "is-hoverable"] :: Array HH.ClassName
field_body :: Array HH.ClassName is_info = [HH.ClassName "is-info"] :: Array HH.ClassName
field_body = [HH.ClassName "field-body"] is_large = [HH.ClassName "is-large"] :: Array HH.ClassName
field_label :: Array HH.ClassName is_light = [HH.ClassName "is-light"] :: Array HH.ClassName
field_label = [HH.ClassName "field-label"] is_normal = [HH.ClassName "is-normal"] :: Array HH.ClassName
has_addons :: Array HH.ClassName is_parent = [HH.ClassName "is-parent"] :: Array HH.ClassName
has_addons = [HH.ClassName "has-addons"] is_primary = [HH.ClassName "is-primary"] :: Array HH.ClassName
has_background_dark :: Array HH.ClassName is_selected = [HH.ClassName "is-selected"] :: Array HH.ClassName
has_background_dark = [HH.ClassName "has-background-dark"] is size = [HH.ClassName $ "is-" <> show size] :: Array HH.ClassName
has_background_warning :: Array HH.ClassName is_size size = [HH.ClassName $ "is-size-" <> show size] :: Array HH.ClassName
has_background_warning = [HH.ClassName "has-background-warning"] is_small = [HH.ClassName "is-small"] :: Array HH.ClassName
is_spaced = [HH.ClassName "is-spaced"] :: Array HH.ClassName
has_background_primary_dark :: Array HH.ClassName is_static = [HH.ClassName "is-static"] :: Array HH.ClassName
has_background_primary_dark = [HH.ClassName "has-background-primary-dark"] is_success = [HH.ClassName "is-success"] :: Array HH.ClassName
has_background_link_dark :: Array HH.ClassName is_vertical = [HH.ClassName "is-vertical"] :: Array HH.ClassName
has_background_link_dark = [HH.ClassName "has-background-link-dark"] is_warning = [HH.ClassName "is-warning"] :: Array HH.ClassName
has_background_info_dark :: Array HH.ClassName label = [HH.ClassName "label"] :: Array HH.ClassName
has_background_info_dark = [HH.ClassName "has-background-info-dark"] level = [HH.ClassName "level"] :: Array HH.ClassName
has_background_success_dark :: Array HH.ClassName level_item = [HH.ClassName "level-item"] :: Array HH.ClassName
has_background_success_dark = [HH.ClassName "has-background-success-dark"] level_left = [HH.ClassName "level-left"] :: Array HH.ClassName
has_background_warning_dark :: Array HH.ClassName level_right = [HH.ClassName "level-right"] :: Array HH.ClassName
has_background_warning_dark = [HH.ClassName "has-background-warning-dark"] margin_left size = [HH.ClassName $ "ml-" <> show size] :: Array HH.ClassName
has_background_danger_dark :: Array HH.ClassName medium = [HH.ClassName "is-medium"] :: Array HH.ClassName
has_background_danger_dark = [HH.ClassName "has-background-danger-dark"] message_body = [HH.ClassName "message-body"] :: Array HH.ClassName
has_background_danger :: Array HH.ClassName message_header = [HH.ClassName "message-header"] :: Array HH.ClassName
has_background_danger = [HH.ClassName "has-background-danger"] message = [HH.ClassName "message"] :: Array HH.ClassName
modal_background = [HH.ClassName "modal-background"] :: Array HH.ClassName
has_background_primary_light :: Array HH.ClassName modal_card_body = [HH.ClassName "modal-card-body"] :: Array HH.ClassName
has_background_primary_light = [HH.ClassName "has-background-primary-light"] modal_card_foot = [HH.ClassName "modal-card-foot"] :: Array HH.ClassName
has_background_link_light :: Array HH.ClassName modal_card_head = [HH.ClassName "modal-card-head"] :: Array HH.ClassName
has_background_link_light = [HH.ClassName "has-background-link-light"] modal_card = [HH.ClassName "modal-card"] :: Array HH.ClassName
has_background_info_light :: Array HH.ClassName modal_card_title = [HH.ClassName "modal-card-title"] :: Array HH.ClassName
has_background_info_light = [HH.ClassName "has-background-info-light"] modal = [HH.ClassName "modal"] :: Array HH.ClassName
has_background_success_light :: Array HH.ClassName navbar_brand = [HH.ClassName "navbar-brand"] :: Array HH.ClassName
has_background_success_light = [HH.ClassName "has-background-success-light"] navbar_burger = [HH.ClassName "navbar-burger"] :: Array HH.ClassName
has_background_warning_light :: Array HH.ClassName navbar_divider = [HH.ClassName "navbar-divider"] :: Array HH.ClassName
has_background_warning_light = [HH.ClassName "has-background-warning-light"] navbar_dropdown = [HH.ClassName "navbar-dropdown"] :: Array HH.ClassName
has_background_danger_light :: Array HH.ClassName navbar_end = [HH.ClassName "navbar-end"] :: Array HH.ClassName
has_background_danger_light = [HH.ClassName "has-background-danger-light"] navbar = [HH.ClassName "navbar"] :: Array HH.ClassName
navbar_item = [HH.ClassName "navbar-item"] :: Array HH.ClassName
has_text_dark :: Array HH.ClassName navbar_link = [HH.ClassName "navbar-link"] :: Array HH.ClassName
has_text_dark = [HH.ClassName "has-text-dark"] navbar_menu = [HH.ClassName "navbar-menu"] :: Array HH.ClassName
has_text_light :: Array HH.ClassName navbar_start = [HH.ClassName "navbar-start"] :: Array HH.ClassName
has_text_light = [HH.ClassName "has-text-light"] no_margin_bottom = [HH.ClassName "mb-0"] :: Array HH.ClassName
has_succeeds_separator :: Array HH.ClassName no_padding_left = [HH.ClassName "pl-0"] :: Array HH.ClassName
has_succeeds_separator = [HH.ClassName "has-succeeds-separator"] no_padding_bottom = [HH.ClassName "pb-0"] :: Array HH.ClassName
has_dropdown :: Array HH.ClassName no_padding_top = [HH.ClassName "pt-0"] :: Array HH.ClassName
has_dropdown = [HH.ClassName "has-dropdown"] normal = [HH.ClassName "is-normal"] :: Array HH.ClassName
help :: Array HH.ClassName notification = [HH.ClassName "notification"] :: Array HH.ClassName
help = [HH.ClassName "help"] padding_left size = [HH.ClassName $ "pl-" <> show size] :: Array HH.ClassName
hero :: Array HH.ClassName section = [HH.ClassName "section"] :: Array HH.ClassName
hero = [HH.ClassName "hero"] select = [HH.ClassName "select"] :: Array HH.ClassName
hero_body :: Array HH.ClassName subtitle = [HH.ClassName "subtitle"] :: Array HH.ClassName
hero_body = [HH.ClassName "hero-body"] table = [HH.ClassName "table"] :: Array HH.ClassName
input :: Array HH.ClassName tag = [HH.ClassName "tag"] :: Array HH.ClassName
input = [HH.ClassName "input"] tags = [HH.ClassName "tags"] :: Array HH.ClassName
is4 :: Array HH.ClassName textarea = [HH.ClassName "textarea"] :: Array HH.ClassName
is4 = [HH.ClassName "is-4"] tile = [HH.ClassName "tile"] :: Array HH.ClassName
is5 :: Array HH.ClassName title = [HH.ClassName "title"] :: Array HH.ClassName
is5 = [HH.ClassName "is-5"]
is_active :: Array HH.ClassName
is_active = [HH.ClassName "is-active"]
is_centered :: Array HH.ClassName
is_centered = [HH.ClassName "is-centered"]
is_danger :: Array HH.ClassName
is_danger = [HH.ClassName "is-danger"]
is_large :: Array HH.ClassName
is_large = [HH.ClassName "is-large"]
content :: Array HH.ClassName
content = [HH.ClassName "content"]
is :: Int -> Array HH.ClassName
is size = [HH.ClassName $ "is-" <> show size]
is_size :: Int -> Array HH.ClassName
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
is_hoverable = [HH.ClassName "is-hoverable"]
is_info :: Array HH.ClassName
is_info = [HH.ClassName "is-info"]
is_light :: Array HH.ClassName
is_light = [HH.ClassName "is-light"]
is_normal :: Array HH.ClassName
is_normal = [HH.ClassName "is-normal"]
is_primary :: Array HH.ClassName
is_primary = [HH.ClassName "is-primary"]
is_small :: Array HH.ClassName
is_small = [HH.ClassName "is-small"]
is_success :: Array HH.ClassName
is_success = [HH.ClassName "is-success"]
is_selected :: Array HH.ClassName
is_selected = [HH.ClassName "is-selected"]
is_static :: Array HH.ClassName
is_static = [HH.ClassName "is-static"]
label :: Array HH.ClassName
label = [HH.ClassName "label"]
level :: Array HH.ClassName
level = [HH.ClassName "level"]
level_item :: Array HH.ClassName
level_item = [HH.ClassName "level-item"]
level_left :: Array HH.ClassName
level_left = [HH.ClassName "level-left"]
level_right :: Array HH.ClassName
level_right = [HH.ClassName "level-right"]
medium :: Array HH.ClassName
medium = [HH.ClassName "is-medium"]
modal :: Array HH.ClassName
modal = [HH.ClassName "modal"]
modal_background :: Array HH.ClassName
modal_background = [HH.ClassName "modal-background"]
modal_card :: Array HH.ClassName
modal_card = [HH.ClassName "modal-card"]
modal_card_body :: Array HH.ClassName
modal_card_body = [HH.ClassName "modal-card-body"]
modal_card_foot :: Array HH.ClassName
modal_card_foot = [HH.ClassName "modal-card-foot"]
modal_card_head :: Array HH.ClassName
modal_card_head = [HH.ClassName "modal-card-head"]
modal_card_title :: Array HH.ClassName
modal_card_title = [HH.ClassName "modal-card-title"]
navbar :: Array HH.ClassName
navbar = [HH.ClassName "navbar"]
navbar_brand :: Array HH.ClassName
navbar_brand = [HH.ClassName "navbar-brand"]
navbar_burger :: Array HH.ClassName
navbar_burger = [HH.ClassName "navbar-burger"]
navbar_divider :: Array HH.ClassName
navbar_divider = [HH.ClassName "navbar-divider"]
navbar_dropdown :: Array HH.ClassName
navbar_dropdown = [HH.ClassName "navbar-dropdown"]
navbar_end :: Array HH.ClassName
navbar_end = [HH.ClassName "navbar-end"]
navbar_item :: Array HH.ClassName
navbar_item = [HH.ClassName "navbar-item"]
navbar_link :: Array HH.ClassName
navbar_link = [HH.ClassName "navbar-link"]
navbar_menu :: Array HH.ClassName
navbar_menu = [HH.ClassName "navbar-menu"]
navbar_start :: Array HH.ClassName
navbar_start = [HH.ClassName "navbar-start"]
normal :: Array HH.ClassName
normal = [HH.ClassName "is-normal"]
section :: Array HH.ClassName
section = [HH.ClassName "section"]
select :: Array HH.ClassName
select = [HH.ClassName "select"]
subtitle :: Array HH.ClassName
subtitle = [HH.ClassName "subtitle"]
table :: Array HH.ClassName
table = [HH.ClassName "table"]
textarea :: Array HH.ClassName
textarea = [HH.ClassName "textarea"]
tile :: Array HH.ClassName
tile = [HH.ClassName "tile"]
title :: Array HH.ClassName
title = [HH.ClassName "title"]