Add credit count and attributes to search page (finally)

css/search.css

@@ -72,40 +72,41 @@
     transition-duration: var(--transition-time);
 }
 
-#searchResultsContainer h3 {
+#searchResultsContainer tr h3 {
     margin: 0;
     padding: 1vmin;
     padding-left: 1.5vmin;
-    display: flex;
-    flex-direction: row;
     align-items: baseline;
     /* width: 100%; */
     font-size: 1.25rem;
     color: var(--quacs-midtone);
     border-bottom: solid;
     border-bottom-width: 0.2vmin;
-    flex-wrap: wrap;
 }
 
-.sattr {
-    margin-right: 1vmin;
+#searchResultsContainer tr h3 div {
     display: flex;
-    margin-bottom: 0.25vmin;
-    margin-top: 0.25vmin;
-    font-size: 1rem;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-items: center;
 }
 
-.sattr-pill {
+.pill {
     background: var(--quacs-yellow);
     color: var(--deep-purple);
+    display: flex;
+    font-size: 1rem;
+    font-weight: 400;
     padding-left: 1.5vmin;
     padding-right: 1.5vmin;
     border-radius: 3vmin;
+    margin-bottom: 0.25vmin;
+    margin-top: 0.25vmin;
+    margin-right: 1vmin;
 }
 
-.sattr svg {
-    /* display: inline-block; */
-    /* vertical-align:-webkit-baseline-middle; */
+.pill svg {
+    display: inline-block;
     align-self: center;
     width: 1rem;
     max-height: 1rem;
@@ -121,16 +122,16 @@
     background: var(--quacs-yellow);
 }
 
-.PD-pill {
+.PDII-pill {
     background: var(--red);
 }
 
-.HI-pill {
+.HInq-pill {
     background: var(--pink);
     color: var(--deep-purple);
 }
 
-.HI-pill svg {
+.HInq-pill svg {
     fill: var(--deep-purple);
 }
 

js/search.js

@@ -38,6 +38,14 @@ const fuzzy_search_config = {
         ]
 }
 
+const attr_to_icon = {
+        'CI': 'message',
+        'HInq': 'magnifying',
+        'PDII': 'briefcase',
+        'WI': 'pencil',
+        'CulmExp': 'cubes'
+}
+
 const display_search_results = function(searchable_catalog) {
         const fuse = new Fuse(searchable_catalog,fuzzy_search_config);
         console.log("Searching for " + search_term + "...");
@@ -46,13 +54,20 @@ const display_search_results = function(searchable_catalog) {
         results.forEach(function(search_entry) {
                 const entry = search_entry.item;
                 const tr = table.insertRow(-1);
-                tr.innerHTML += '<a href="courses/'
+                var elemInnerHtml = '<a href="courses/'
                         + entry.code + '">'
                         + '<h3><div><span class="courseName">'
                         + entry.name
                         + '</span><span class="courseCode">'
-                        + entry.code + "</span></div></h3>"
-                        + "<p>" + entry.description + "</p>" + '\n';
+                        + entry.code + '</span><span class="pill">'
+                        + entry.credits + "</span>";
+                if(entry.attributes)
+                entry.attributes.forEach(function(attr) {
+                        elemInnerHtml += '<span class="pill ' + attr + '-pill">' 
+                                + attr + '<svg><use href="../icons.svg#' + attr_to_icon[attr] + '"></use></svg></span>';
+                });
+                elemInnerHtml += "</div></h3><p>" + entry.description + "</p></a>" + '\n';
+                tr.innerHTML = elemInnerHtml;
         });
 }