We're in!
-diff --git a/Public/css/main.css b/Public/css/main.css
index eb0eee4..683f6d7 100644
--- a/Public/css/main.css
+++ b/Public/css/main.css
@@ -84,6 +84,19 @@ form input {
margin-bottom: 15px;
}
+.user-form, .employee-form {
+ padding: 80px;
+ width: 100%;
+}
+
+.user-form input {
+ width: 100%;
+}
+
+.employee-form input {
+ width: 100%;
+}
+
table {
width: 100%;
}
@@ -97,27 +110,22 @@ td, th {
padding: 5px 15px;
}
-.employee-form {
- margin: 20px auto;
- width: 50%;
- background-color: #aeb6bf;
- padding: 20px;
- border-radius: 25px;
-}
-
-.employee-form label {
- color: #555;
- font-weight: bold;
-}
-
input[type=submit] {
padding: 5px 20px;
}
-input[type=text], input[type=password] {
+input[type=text], input[type=password], input[type=email] {
+ background-color: inherit;
+ color: inherit;
+ border: none;
+ border-bottom: 2px solid #555;
padding: 5px;
}
+input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
+ outline: none;
+}
+
.btn {
cursor: pointer;
}
@@ -153,3 +161,46 @@ input[type=text], input[type=password] {
.toggle img:hover {
background-color: #555;
}
+
+.dropbtn {
+ background-color: #3498DB;
+ color: white;
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+ cursor: pointer;
+}
+
+.dropbtn:hover, .dropbtn:focus {
+ background-color: #2980B9;
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 160px;
+ overflow: auto;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown a:hover {
+ background-color: #ddd;
+}
+
+.show {
+ display: block;
+}
diff --git a/Public/js/main.js b/Public/js/main.js
new file mode 100644
index 0000000..59e0001
--- /dev/null
+++ b/Public/js/main.js
@@ -0,0 +1,26 @@
+// Close dropdown if user clicks outside of it.
+// Adapted from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown
+//
+window.onClick = function(event) {
+ if (!event.target.matches('.dropbtn')) {
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i=0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+}
+
+// Show the drop-down menu, with the given id.
+function showDropdownContent(id) {
+ document.getElementById(id).classList.toggle("show");
+}
+
+// Update the drop-down with the item that was clicked inside it's menu.
+function updateDropDownSelection(id, contentId) {
+ let content = document.getElementById(contentId).innerHTML;
+ document.getElementById(id).innerHTML = content;
+}
diff --git a/Resources/Views/employee-form.leaf b/Resources/Views/employee-form.leaf
index 94e40ae..030c203 100644
--- a/Resources/Views/employee-form.leaf
+++ b/Resources/Views/employee-form.leaf
@@ -14,7 +14,6 @@
hx-swap-oob="outerHTML"
#endif
>
-
We're in!
-
-
We're in!
+