+ upload site WIP v3

lunden23 · Jan 27, 2022 · 3cd624c · 3cd624c
1 parent b1a56ee
commit 3cd624c
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 58 deletions.
diff --git 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
@@ -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
@@ -10,16 +10,17 @@
         <title>skanhama</title>
     {% endif %}
 
-    <!-- Internal Refs -->
+    <!-- Internal Stylesheet -->
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-    <script async src="{{ url_for("static", filename="scripts.js") }}"></script>
 
     <!-- External Refs -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
     <script defer src="https://kit.fontawesome.com/5dbb6979db.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]/dist/dropzone-min.js"></script>
+    <link href="https://unpkg.com/[email protected]/dist/dropzone.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div class="main">
@@ -48,14 +49,14 @@
                             </ul>
                         </div>
                     </div>
-                    <i id="nav-search-icon" class="fas fa-search icon"></i>
+                    <i id="nav-search-icon" class="fas fa-search icon icon-md icon-padded"></i>
                 </nav>
                 <div class="header-inner-right">
                     {% if current_user.is_authenticated %}
                         <div class="header-inner-right-notifications">
                             <i class="far fa-bell icon"></i>
                             <span class="badge" id="badge-notifications">23</span>
-                            <i id="accountMenuIcon" class="fas fa-user-circle btn-dropdown icon"></i>
+                            <i id="accountMenuIcon" class="fas fa-user-circle btn-dropdown icon icon-md icon-padded"></i>
                             <div id="dropdownAccount" class="dropdown-content">
                                 <div id="dropdownAccountName">
                                     <h2>{{ current_user.username }}</h2>
@@ -92,5 +93,7 @@ <h2>{{ current_user.username }}</h2>
             </div>
         </div>
     </div>
+    <!-- Internal Scripts -->
+    <script async src="{{ url_for("static", filename="scripts.js") }}"></script>
 </body>
-</html>
+</html>