Small frontend improvements (description mandatory elements, improved download output, function for dropdown) (#164)

* Added description for mandatory elements

* Changed dropdown functionality to be a function. Also, improved formatting for foundation.js file

* Added functionality to remove empty values from metadata download

* Added additional documentation for symbol info string

Author: sferenz

meta_creator/templates/meta_creator/showdata.html

@@ -31,16 +31,20 @@
   </div>
 
 <!-- Displaying the color coding -->
-<div class="color-code-container">
-  <div class="color-code">
-      <span class="red"></span>
-      <span class="color-code-text">Missed metadata</span>
-  </div>
-  <div class="color-code">
-      <span class="yellow"></span>
-      <span class="color-code-text">Better to curate the metadata</span>
+  <div class="color-code-container">
+      <div class="color-code">
+          <span class="red"></span>
+          <span class="color-code-text">Missed metadata</span>
+      </div>
+      <div class="color-code">
+          <span class="yellow"></span>
+          <span class="color-code-text">Better to curate the metadata</span>
+      </div>
+      <div class="color-code">
+          <span class="symbol"></span>
+          <span class="color-code-text">Mandatory elements</span>
+      </div>
   </div>
-</div>
 
 <!-- Pop-up message for new repository URL on Contributor and Author tabs -->
 <div id="popup" class="popup">
@@ -216,7 +220,7 @@ <h1>Extra Hints!</h1>
             </span>
             <i class="fa fa-info-circle" aria-hidden="true"></i>
           </div>
-          <select name="developmentStatus" id="developmentStatusDropdown">
+          <select name="developmentStatus" id="developmentStatusDropdown" data-dropdown-schema="developmentStatus">
             <option value=""></option>
           </select>
           <div id="suggestions"></div>

static/foundation/css/foundation.css

@@ -1175,6 +1175,7 @@ input:checked + .slider:before {
 }
 
 /************************************Color-code-info**************************************/
+/* Create info strings to explain color and other codes */
 .color-code-container {
   align-items: center;
   background-color: #ccc;
@@ -1210,6 +1211,24 @@ input:checked + .slider:before {
   border: yellow solid 1px;
 }
 
+/* Create info string for the '*' symbol */
+.color-code > span:first-child.symbol {
+    width: 15px;
+    height: 15px;
+    border-radius: 0; /* Remove the circle shape */
+    display: flex; /* Use flexbox for centering */
+    justify-content: center; /* Center horizontally */
+    background-color: transparent; /* No background for the symbol */
+    font-size: 18px; /* Match the size of the circle */
+    color: #e15e5e; /* Match the color of the circle */
+    font-weight: bold; /* Make the * bold */
+    line-height: 1; /* Ensure proper vertical alignment */
+}
+
+.color-code > span:first-child.symbol::before {
+    content: "*"; /* Add the * symbol */
+}
+
 /********************* Responsiveness  **********************/
 
 @media (min-width: 1024px) and (max-width: 1700px) {