From 88650361adfc9be8344b0d383100b0c6ab513973 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sun, 30 Mar 2025 00:33:41 -0400
Subject: basic css and info display for needs

---
 .../src/app/components/need-list/need-list.component.css    | 13 +++++++++++--
 .../src/app/components/need-list/need-list.component.html   |  9 ++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'ufund-ui/src')

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 19c126f..345326f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -31,12 +31,21 @@ li {
     > button {
         background-color: transparent;
         width: 88%;
-        float: left;
         transition: all 0.3s ease;
         font-weight: bold;
-        display: flex;
         border: none;
         border-radius: 5px;
+        padding-left: 1.5%;
+        > section {
+            width: 100%;
+            flex: none;
+            display: inline-block;
+            background-color: magenta;            
+            > progress {
+                width: 25%;
+                float: none;
+            }
+        }
     }
 
     > section {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index ed151a3..88b9752 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -28,7 +28,14 @@
 <ul>
     <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
         <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p>
+            <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section>
+            <section>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+                <progress value="need.current" max="need.maxGoal"></progress>
+            </section>
+            <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
         </button>
 
         <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-- 
cgit v1.2.3