Merge pull request #14 from CMU-313/add-visual-indicators-for-status

Add UI for displaying question status as 'Resolved' or 'Not Resolved'

public/scss/client.scss

@@ -8,4 +8,44 @@
 @import "modules/bottom-sheet";
 @import "modules/icon-picker";
 @import "modules/alerts.scss";
-@import "modules/scrollbar.scss";
+@import "modules/scrollbar.scss";
+
+
+.text-center {
+    text-align: center;
+    vertical-align: middle;  
+}
+
+
+.badge-success {
+    background-color: #28a745; 
+    color: white;              
+    padding: 0.5em 1em;         
+    border-radius: 0.25rem;    
+    display: inline-flex;      
+    align-items: center;       
+    font-weight: bold;         
+    font-size: 1em;           
+}
+
+.badge-secondary {
+    background-color: #6c757d;  
+    color: white;              
+    padding: 0.5em 1em;        
+    border-radius: 0.25rem;     
+    display: inline-flex;      
+    align-items: center;        
+    font-weight: bold;         
+    font-size: 1em;            
+}
+
+.badge-success i,
+.badge-secondary i {
+    margin-right: 0.5em;        
+    font-size: 1.2em;           
+}
+
+.badge-success:hover, .badge-secondary:hover {
+    opacity: 0.8;              
+    cursor: default;          
+}

src/views/partials/data/category.tpl

@@ -1 +1,16 @@
-data-tid="{topics.tid}" data-index="{topics.index}" data-cid="{topics.cid}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
+<tr data-tid="{tid}" data-index="{index}" data-cid="{cid}" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+
+    <td class="text-center">
+        <!-- Resolved/Not Resolved Display -->
+        {{{ if resolved }}}
+            <span class="badge badge-success">
+                <i class="fa fa-check-circle"></i> Resolved
+            </span>
+        {{{ else }}}
+            <span class="badge badge-secondary">
+                <i class="fa fa-times-circle"></i> Not Resolved
+            </span>
+        {{{ end }}}
+    </td>
+
+</tr>