diff --git a/skanhama/static/scripts.js b/skanhama/static/scripts.js
index 7c8ae8b..3165577 100644
--- a/skanhama/static/scripts.js
+++ b/skanhama/static/scripts.js
@@ -47,6 +47,50 @@ const accountMenuClickOut = (e) => {
}
}
+// Handle adding of Upload Requirements input fields
+// Adds a new div with inputs on icon click
+const reqsAddIcon = document.getElementById("icon-reqs-add");
+const rootNode = document.getElementById("upload-reqs-inner");
+
+if (reqsAddIcon) {
+ reqsAddIcon.addEventListener("click", reqsAddInputFunction);
+} else {
+ console.log("Icon Requirements Add button not found.")
+}
+function reqsAddInputFunction() {
+ let div = document.createElement("div");
+ div.classList.add("upload-reqs-control");
+ let name = document.createElement("input");
+ name.classList.add("form-control", "fc-upload", "fc-reqs", "fc-reqs-name");
+ name.type = "text";
+ let link = document.createElement("input");
+ link.classList.add("form-control", "fc-upload", "fc-reqs", "fc-reqs-link");
+ link.type = "text";
+ let note = document.createElement("input");
+ note.classList.add("form-control", "fc-upload", "fc-reqs", "fc-reqs-note");
+ note.type = "text";
+ let icon = document.createElement("i");
+ icon.classList.add("fas", "fa-minus-circle", "fc-reqs-delete", "icon", "icon-sm");
+ icon.addEventListener("click", reqsRemoveInputFunction);
+ div.append(name, link, note, icon);
+ rootNode.insertBefore(div, reqsAddIcon);
+}
+
+// Handle removal of Upload Requirements input fields
+// Removes the active div when remove icon is clicked
+const reqsRemove1 = document.getElementById("reqsRemove1");
+const reqsRemove2 = document.getElementById("reqsRemove2");
+if (reqsRemove1) {
+ reqsRemove1.addEventListener("click", reqsRemoveInputFunction);
+}
+if (reqsRemove2) {
+ reqsRemove2.addEventListener("click", reqsRemoveInputFunction);
+}
+function reqsRemoveInputFunction() {
+ this.parentElement.remove();
+}
+
+
// Live (Active) Search function in the search bar in the nav menu
// $(function (){
// $("#nav-search-input").on("input", function(e){
diff --git a/skanhama/static/style.css b/skanhama/static/style.css
index 1fc4372..b08e415 100644
--- a/skanhama/static/style.css
+++ b/skanhama/static/style.css
@@ -243,11 +243,7 @@ a:visited {
height: inherit;
}
-/* Icons */
-.icon {
- padding: 0.5rem;
- margin: 0;
-}
+
/* Notifications Icon */
.badge {
-webkit-border-radius: var(--badge-radius);
@@ -371,12 +367,19 @@ fieldset.form-group-field {
/*
Form Labels
fl-hint
-*/
+ */
+/*
+ Generic Field Sets
+ */
+.fieldset {
+ margin: 0;
+ padding: 0;
+}
/*
Generic Form Controls
form-control, fc-generic, fc-upload
-*/
+ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
@@ -418,33 +421,42 @@ input:-webkit-autofill:active{
*/
/* Upload Divs */
.upload-content {
+ margin: 0;
+ padding: 0;
+ border: none;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+/* Field Sets - Upload */
+.fs-upload {
background-color: var(--clr-bg-content-accent);
-
+ border: none;
+ /*margin: 0;*/
}
-.upload-content-header {
+.fs-upload-header {
background-color: var(--clr-bg-content-dark);
}
-.upload-content-row {
- /*background-color: var(--clr-bg-content-accent);*/
- /*padding: 0.5rem 0.75rem 0.5rem 0.75rem;*/
+.fs-upload-base {
display: flex;
- flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
+ padding: 0.25rem 0.75rem 0.9rem 0.75rem;
+}
+.fs-upload-row {
+ flex-direction: row;
gap: 2rem;
- padding: 0.25rem 0.75rem 0.75rem 0.75rem;
}
-.upload-content-col {
- display: flex;
+.fs-upload-col {
flex-direction: column;
- flex-wrap: wrap;
- justify-content: flex-start;
gap: 1rem;
- padding: 0.25rem 0.75rem 0.75rem 0.75rem;
+}
+#fs-upload-requirements {
+ gap: 0;
}
/* Text Styling */
-.upload-header {
- margin: 0 0 0.5rem 0;
+.upload-header-text {
+ margin: 0 0 0.35rem 0;
padding: 0.5rem 0.75rem;
}
#h1-upload {
@@ -499,14 +511,52 @@ input:-webkit-autofill:active{
#upload-desc-summary {
width: 50%;
}
-/* Form Group - Upload */
-.fg-upload {
- margin: 0;
- padding: 0;
- border: none;
+/* Requirements Styling */
+.upload-reqs-labels {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ margin: 0 0 0.25rem 0;
+}
+.upload-reqs-subtitle {
+ font-size: 1em;
+}
+#upload-reqs-inner {
+ margin: 0.5rem 0 0 1.5rem;
display: flex;
flex-direction: column;
- gap: 1.5rem;
+}
+.upload-reqs-control {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+ align-items: center;
+ margin: 0 0 0.8rem 0;
+}
+.fc-reqs-delete {
+ margin: 0;
+ padding: 0;
+}
+#icon-reqs-add {
+ width: 2rem;
+}
+.fc-reqs-name {
+ flex-basis: 25%;
+}
+.fc-reqs-link {
+ flex-basis: 29%;
+}
+.fc-reqs-note {
+ flex-basis: 40%;
+}
+#urs-name {
+ flex-basis: 25%;
+}
+#urs-link {
+ flex-basis: 29%;
+}
+#urs-note {
+ flex-basis: 40%;
}
@@ -682,8 +732,22 @@ Misc Forms
}
/* Icons & Badge Styling*/
.icon {
+ padding: 0;
+ margin: 0;
+}
+.icon-sm {
+ font-size: 1rem;
+}
+.icon-md {
font-size: 1.5rem;
}
+.icon-lg {
+ font-size: 1.8rem;
+}
+.icon-padded {
+ padding: 0.5rem;
+ margin: 0;
+}
.icon:hover {
background: -webkit-gradient(linear, left top, right bottom, from(var(--clr-CA)), to(var(--clr-AA)));
-webkit-background-clip: text;
diff --git a/skanhama/templates/layout.html b/skanhama/templates/layout.html
index e742a81..8c99d0e 100644
--- a/skanhama/templates/layout.html
+++ b/skanhama/templates/layout.html
@@ -10,9 +10,8 @@
skanhama
{% endif %}
-
+
-
@@ -20,6 +19,8 @@
+
+
@@ -48,14 +49,14 @@
-
+