UI and description update

Author: Sundraiz-Shah

meta_creator/templates/meta_creator/showdata.html

@@ -291,16 +291,16 @@ <h1>Extra Hints!</h1>
                                             </div>
                                             {% elif key == "contributor" %}
                                             <div class="relative-wrapper">
-                                            <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseContributors" aria-expanded="false" aria-controls="multiCollapseContributors">Who are Contributors?</button>
-                                            <div class="person-info collapsible-content collapse" id="multiCollapseContributors">
+                                            <!-- <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseContributors" aria-expanded="false" aria-controls="multiCollapseContributors">Who are Contributors?</button> -->
+                                            <div class="person-info collapsible-content collapse" id="multiCollapsecontributor">
                                                 <p>A "contributor" refers to anyone who aids in software development in any capacity, from coding to testing, highlighting the collaborative nature of software projects.</p>
                                             </div>
-                                             <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseAuthors" aria-expanded="false" aria-controls="multiCollapseAuthors">Who are Authors?</button>
-                                            <div class="person-info collapsible-content collapse" id="multiCollapseAuthors">
+                                             <!-- <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseauthor" aria-expanded="false" aria-controls="multiCollapseAuthors">Who are Authors?</button> -->
+                                            <div class="person-info collapsible-content collapse" id="multiCollapseauthor">
                                                 <p>An "author" in software authorship is someone who significantly contributes to the creation and development of software, including roles like coding, project management, and documentation.</p>
                                             </div>
-                                             <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseMaintainer" aria-expanded="false" aria-controls="multiCollapseMaintainer">Who are Maintainer?</button>
-                                            <div class="person-info collapsible-content collapse" id="multiCollapseMaintainer">
+                                             <!-- <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapseMaintainer" aria-expanded="false" aria-controls="multiCollapseMaintainer">Who are Maintainer?</button> -->
+                                            <div class="person-info collapsible-content collapse" id="multiCollapsemaintainer">
                                                 <p>An "maintainer" in software authorship is someone who significantly maintainers to the creation and development of software, including roles like coding, project management, and documentation.</p>
                                             </div>
                                             </div>
@@ -324,8 +324,11 @@ <h1>Extra Hints!</h1>
                                                         {% if unique_tab %}
                                                         {% for col, value in metadata_dict.items %}
                                                         <th data-col="{{ col }}" data-coltype="element">
-                                                            {{ col|camel_to_spaces_lower }}
-                                                            <div class="custom-tooltip-metadata">
+                                                           <button type="button" class=" collapsible-button"  data-bs-toggle="collapse" data-bs-target="#multiCollapse{{ col }}" aria-expanded="false" aria-controls="multiCollapseContributors">{{ col|camel_to_spaces_lower }}</button> 
+                                                            <!-- <div class="person-info collapsible-content collapse" id="multiCollapse{{ col }}">
+                                                             <p>{% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %}</p>
+                                                             </div> -->
+                                                           <div class="custom-tooltip-metadata">
                                                                 <span class="tooltip-text-metadata">
                                                                     {% if col in description_metadata %}{{ description_metadata|get:col }}{% endif %}
                                                                 </span>

static/foundation/css/foundation.css

@@ -1,6 +1,9 @@
 /* Style for SMECS */
 
 /******************** General ********************/
+body {
+  overflow: hidden;
+}
 
 [type="text"],
 [type="password"],
@@ -482,11 +485,13 @@ select {
 }
 
 #metadata-json {
+  overflow: scroll;
   width: 100%;
-  height: 100%;
+  height: 92%;
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 2px;
+  font-size: medium;
 }
 .invalid {
   border: 1px solid rgba(226, 7, 7, 0.535);
@@ -1147,10 +1152,10 @@ label > .fa-info-circle {
   border: 1px solid #ccc;
   border-radius: 5px;
   transition: all 0.3s ease;
-  overflow: overlay;
+  overflow: hidden;
   margin: 2px;
   width: 100%;
-  height: 100%;
+  height: 99%;
 }
 
 .full-width {
@@ -1402,6 +1407,9 @@ input:checked + .slider:before {
     /* display: list-item; */
     flex-wrap: wrap;
   }
+  .metadata-form-display {
+    overflow: scroll;
+  }
 }
 
 @media (min-width: 1024px) and (max-width: 1700px) {

static/foundation/js/vendor/form-utils.js

@@ -8,11 +8,10 @@ import { validateInput } from "./ui.js";
 
 const metadataJson = document.getElementById("metadata-json");
 const inputs = document.querySelectorAll(
-  "#metadata-form input, #metadata-form select"
+  "#metadata-form input, #metadata-form select, #metadata-form textarea"
 );
 
 export function setupForm() {
-
   inputs.forEach((input) => validateInput(input));
   inputs.forEach((input) => {
     input.addEventListener("input", () => handleInputChange(input));