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 > -
- -
-
- #extend("logo") - #extend("navbar") -
-
-
-
- -
-
-

We're in!

-
-
- -#endexport + #export("content"): +
+
+
+ #extend("logo") + #extend("navbar") +
+
+
+
+ +
+
+

We're in!

+
+
+
+ #endexport #endextend diff --git a/Resources/Views/htmx-form.leaf b/Resources/Views/htmx-form.leaf new file mode 100644 index 0000000..638b986 --- /dev/null +++ b/Resources/Views/htmx-form.leaf @@ -0,0 +1,23 @@ +
+ #import("formBody") +
diff --git a/Resources/Views/index.leaf b/Resources/Views/index.leaf index 3f8a3c3..8520f2e 100644 --- a/Resources/Views/index.leaf +++ b/Resources/Views/index.leaf @@ -4,10 +4,24 @@ + #(title) + + + + + + + + + + + + + #import("content") diff --git a/Resources/Views/po-form.leaf b/Resources/Views/po-form.leaf new file mode 100644 index 0000000..c6166c9 --- /dev/null +++ b/Resources/Views/po-form.leaf @@ -0,0 +1,41 @@ +
+ +
+ + + + +
+ +
+ + +
+