Bulma "level" layout.

src/App/Nav.purs

@@ -8,6 +8,18 @@ import Halogen.HTML.Properties as HP
 import Halogen.HTML.Properties.ARIA as ARIA
 import Bulma as Bulma
 
+-- | `netlibre_navbar` is a complex function with many parameters.
+-- |
+-- | In order: authenticated (is the user authenticated)
+-- | `admin` (is the user an administrator)
+-- | `actionHome` (the action to get to the home page)
+-- | `actionDomainList` (the action to get to the domain list page)
+-- | `actionAuthdAdmin` (the action to get to the administration page)
+-- | `_` (not used parameter)
+-- | `actionLogin` (the action to get to the login page)
+-- | `actionDisconnection` (the action to disconnect the user)
+-- |
+-- | TODO: make the "burger" component actually useful. For now, it's empty.
 netlibre_navbar :: forall w i. Boolean -> Boolean -> i -> i -> i -> i -> i -> i -> HH.HTML w i
 netlibre_navbar authenticated admin actionHome actionDomainList actionAuthdAdmin _ actionLogin actionDisconnection =
   main_nav

src/App/ZoneInterface.purs

@@ -133,7 +133,6 @@ data Action
   = DeleteRRModal RRId
   | CancelModal
   | NewRRModal AcceptedRRTypes
-  -- | NewAModal
 
   | Initialize
 
@@ -227,7 +226,7 @@ render state
       [ case state.wsUp, state.active_modal, state.active_new_rr_modal of
           false, _, _             -> Bulma.p "You are disconnected."
           true,  Just rr_id, _    -> modal_rr_delete rr_id
-          true,  Nothing, Just t  -> modal_add_new_rr t
+          true,  Nothing, Just t  -> modal_add_new_rr t state
           true,  Nothing, Nothing -> HH.div_ [ Bulma.h1 state._domain
                                         , Bulma.hr
                                         , render_soa state._soa
@@ -244,13 +243,6 @@ render state
       $ map NonEmpty.toArray
       $ A.groupAllBy (comparing (_.rrtype)) array
 
-    -- TODO: these components can have a broader use.
---    generic_modal_header :: forall w. String -> HH.HTML w Action
---    generic_modal_header t = HH.header [HP.classes C.modal_card_head]
---      [ HH.p [HP.classes C.modal_card_title] [HH.text t]
---      ]
---    generic_modal_body x = HH.section [HP.classes C.modal_card_body] [ x ]
-
     modal_rr_delete :: forall w. Int -> HH.HTML w Action
     modal_rr_delete rr_id =
       Bulma.modal
@@ -270,22 +262,22 @@ render state
                       , HH.text "."
                       ]
 
-    modal_add_new_rr :: forall w. AcceptedRRTypes -> HH.HTML w Action
+    modal_add_new_rr :: forall w. AcceptedRRTypes -> State -> HH.HTML w Action
-    modal_add_new_rr = case _ of
+    modal_add_new_rr t state = case t of
-      A ->
+      A -> template "A" [ Bulma.p "hello, new A RR!" ]
-        Bulma.modal
+      AAAA -> template "AAAA" [ Bulma.p "hello, new AAAA RR!" ]
-          [ Bulma.modal_background
+      TXT -> template "TXT" [ Bulma.p "hello, new TXT RR!" ]
-          , Bulma.modal_card [Bulma.modal_header "New A resource record"
+      CNAME -> template "CNAME" [ Bulma.p "hello, new CNAME RR!" ]
-                             , Bulma.modal_body [ Bulma.p "hello, new A RR!" ]]
+      NS -> template "NS" [ Bulma.p "hello, new NS RR!" ]
-          , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal]
+      MX -> template "MX" [ Bulma.p "hello, new MX RR!" ]
-          ]
+      SRV -> template "SRV" [ Bulma.p "hello, new SRV RR!" ]
-      _ -> 
+      where
-        Bulma.modal
+        template t content = Bulma.modal
-          [ Bulma.modal_background
+            [ Bulma.modal_background
-          , Bulma.modal_card [Bulma.modal_header "New ?? resource record"
+            , Bulma.modal_card [Bulma.modal_header $ "New " <> t <> " resource record"
-                             , Bulma.modal_body [ Bulma.p "hello, new ?? RR!" ]]
+                               , Bulma.modal_body content ]
-          , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal]
+            , Bulma.modal_foot [Bulma.modal_cancel_button CancelModal]
-          ]
+            ]
 
 handleAction :: forall m. MonadAff m => Action -> H.HalogenM State Action () Output m Unit
 handleAction = case _ of
@@ -299,9 +291,6 @@ handleAction = case _ of
   NewRRModal t -> do
     H.modify_ _ { active_new_rr_modal = Just t }
 
---  NewAModal -> do
---    H.modify_ _ { active_modal = Just rr_id }
-
   Initialize -> do
     { _domain } <- H.get
     H.raise $ Log $ SimpleLog $ "Asking the server for the zone" <> _domain
@@ -780,13 +769,16 @@ render_new_records state
   = Bulma.hdiv
       [ Bulma.h1 "Adding new records"
       , Bulma.hr
-      , Bulma.columns [] [
+      -- use "level" to get horizontal buttons next to each other (probably vertical on mobile)
-          Bulma.column_ [
+      , Bulma.level [
-              Bulma.p "List of buttons:"
+            Bulma.btn_add_new_rr (NewRRModal A)     "A"
-            , Bulma.btn_add_new_rr (NewRRModal A) "A"
+          , Bulma.btn_add_new_rr (NewRRModal AAAA)  "AAAA"
-            , Bulma.btn_add_new_rr (NewRRModal AAAA) "AAAA"
+          , Bulma.btn_add_new_rr (NewRRModal TXT)   "TXT"
-            ]
+          , Bulma.btn_add_new_rr (NewRRModal CNAME) "CNAME"
-       ]
+          , Bulma.btn_add_new_rr (NewRRModal NS)    "NS"
+          , Bulma.btn_add_new_rr (NewRRModal MX)    "MX"
+          , Bulma.btn_add_new_rr (NewRRModal SRV)   "SRV"
+          ] []
       , Bulma.columns []
           [ render_new_record_column_simple state._newSRR   state._errors
           , render_new_record_colunm_mx     state._newMXRR  state._errors

src/Bulma.purs

@@ -296,6 +296,15 @@ btn_add action1 action2 validity
       , HP.classes $ btn_classes validity
       ] [ HH.text "Add" ]
 
+-- | Create a `level`, different components that should appear on the same horizontal line.
+-- | First argument, elements that should appear on the left, second on the right.
+level :: forall w i. Array (HH.HTML w i) -> Array (HH.HTML w i) -> HH.HTML w i
+level left right = HH.nav [ HP.classes C.level ]
+                          [ HH.div [ HP.classes C.level_left  ] $ itemize left
+                          , HH.div [ HP.classes C.level_right ] $ itemize right
+                          ]
+   where itemize = map (\v -> HH.div [ HP.classes C.level_item ] [v])
+
 btn_add_new_rr :: forall w i. i -> String -> HH.HTML w i
 btn_add_new_rr action title
   = HH.button
@@ -454,7 +463,7 @@ modal_header title = HH.header [HP.classes C.modal_card_head]
   [ HH.p [HP.classes C.modal_card_title] [HH.text title]
   ]
 modal_body :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-modal_body = HH.section [HP.classes C.modal_card_body] 
+modal_body = HH.section [HP.classes C.modal_card_body]
 modal_foot :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
 modal_foot = HH.div [HP.classes C.modal_card_foot]
 

src/CSSClasses.purs

@@ -72,6 +72,14 @@ is_success :: Array HH.ClassName
 is_success = [HH.ClassName "is-success"]
 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