Departments management rework

public/javascripts/admin/departments.js

@@ -1,4 +1,4 @@
-document.querySelectorAll("a.remove")
+document.querySelectorAll(".delete")
     .forEach(e => e.addEventListener("click", ev => {
         if (!confirm("Do you really want to remove this department ?"))
             ev.preventDefault();

views/admin/departments/add.pug

@@ -1,11 +1,14 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.new")+" "+__("department")
+        div.row
             form(action="/admin/departments/add" method="POST")
-            div.field
+                div.row
+                    div.input-field.col.s12
                         label(for="name")=__("admin.name")+":"
                         input#name(type="text" name="name" required)
-            div.field
-                input(type="submit" value=__("admin.add"))
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("admin.add"))

views/admin/departments/edit.pug

@@ -1,12 +1,15 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.edit")+" "+department.name
+        div.row
             form(action="/admin/departments/edit" method="POST")
                 input.hide(type="text" name="name" value=department.name required)
-            div.field
+                div.row
+                    div.input-field.col.s12
                     label(for="name")=__("admin.name")+":"
                     input#name(type="text" name="newName" value=department.name required)
-            div.field
-                input(type="submit" value=__("save"))
+                div.row.center
+                    div.input-field.col.s12
+                        +submit(__("save"))

views/admin/departments/index.pug

@@ -1,18 +1,20 @@
 extends ../../layout
 
 block content
-    div.card#departmentsManagement
+    div.container
         h1=__("admin.departmentsManagement")
-        a.add(href="/admin/departments/add")
-            button=__("admin.add")
-        div
+        ul.collection
             each department in departments
-                div.department
-                    h2=department.name
-                    div.buttons
-                        a.edit(href="/admin/departments/edit?name="+department.name)
-                            button=__("admin.edit")
-                        a.remove(href="/admin/departments/delete?name="+department.name)
-                            button=__("admin.remove")
+                li.collection-item
+                    div=department.name
+                        div.secondary-content
+                            a(href="/admin/departments/edit?name="+department.name)
+                                i.material-icons edit
+                            a.delete(href="/admin/departments/delete?name="+department.name)
+                                i.material-icons remove
+
+    div.fixed-action-btn
+        a.btn-floating.btn-large.blue(href="/admin/departments/add")
+            i.large.material-icons add
 
     script(src="/javascripts/admin/departments.js")