#22 use fontawesome to add a checkmark next to edited funds

CityOfDetroit · Jul 19, 2024 · 162495c · 162495c
1 parent 02a4939
commit 162495c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/src/css/common.css b/src/css/common.css
@@ -53,6 +53,14 @@ body, button, input, textarea, select, .sidebar, table {
     margin: 0;
 }
 
-div.row {
+/* Font awesome */
+
+i.fas.fa-check { 
+    font-size: 1.5em;
+    color: var(--spiritgreen);
+    margin-right: 10px;
+}
+
+/* div.row {
     margin: 0px;
-}
+} */
diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,8 @@
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <!-- Google fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+<!-- Font Awesome CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>

diff --git a/src/js/components/table/subcomponents/data.js b/src/js/components/table/subcomponents/data.js
@@ -25,7 +25,7 @@ function fillTable(data) {
             const row = document.createElement('tr');
             Object.values(item).forEach(val => {
             const cell = document.createElement('td');
-            cell.textContent = val;
+            cell.innerHTML = val;
             row.appendChild(cell);
             });
             tbody.appendChild(row);
@@ -63,9 +63,14 @@ function loadFunds(){
         // determine if the fund has already been edited
         if (fundDict[key]['viewed']){
             // todo: add a checkmark here
-            ret.push({'Fund' : fundDict[key]['name'] + ' (Edited)'});
+            ret.push({'Fund' :  `<span class = 'viewed-fund'> 
+                                    <i class="fas fa-check"></i>
+                                    ${fundDict[key]['name']}
+                                </span>`});
         } else {
-            ret.push({'Fund' : fundDict[key]['name']});   
+            ret.push({'Fund' : `<span class = 'unviewed-fund'> 
+                                    ${fundDict[key]['name']}
+                                </span>`});   
         }
     });
     fillTable(ret);

diff --git a/src/js/components/table/table.css b/src/js/components/table/table.css
@@ -96,4 +96,9 @@ div.table-container {
 .hover-effect:hover {
     cursor: pointer;
     background-color: var(--verypalegreen); 
-}
+}
+
+/* Fund table */
+.fund-name > .viewed-fund {
+    color: gray;
+}