From 8ee9c972b06829ccae3adccf3009279f6aeaeb4c Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 5 Apr 2025 20:18:25 -0400
Subject: need image on need list

---
 .../components/need-list/need-list.component.css   | 25 +++++++++++++++++++---
 .../components/need-list/need-list.component.html  |  7 +++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

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 622b64a..5cfa479 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
@@ -20,18 +20,34 @@
     font-size: 10pt;
 }
 
+.need-image {
+    height: 130px;
+    width: 200px;
+    margin: -10px 0 0 -10px;
+    object-fit: cover;
+    border-radius: 5px;
+    mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%);
+}
+
 .split {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-
-
+   
     .left {
+        width: 15%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .middle {
+        width: 42.5%;
         display: flex;
+        align-items: start;
         flex-direction: column;
     }
 
     .right {
+        width: 42.5%;
         display: flex;
         flex-direction: column;
         align-items: end;
@@ -47,8 +63,11 @@
 }
 
 .prog {
+    width: 85%;
     display: flex;
     flex-direction: column;
+    align-self: end;
+    margin-top: -5.25%;
 }
 
 .clickable {
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 406bfa0..1410ce6 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
@@ -2,12 +2,16 @@
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
+           
             <div class="split">
                 <div class="left">
+                    <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
+                </div>
+                
+                <div class="middle">
                     <span class="needName">{{need.name}}</span>
                     <span class="needType">{{need.type}}</span>
                 </div>
-
                 <div class="right">
                     <span *ngIf="need.urgent" class="urgent">URGENT</span>
                     <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
@@ -21,6 +25,7 @@
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
+    
         <div *ngIf="actionArea" class="actionArea">
             <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
         </div>
-- 
cgit v1.2.3


From 2ac334681c268391987e51a52260be7b632cc4f1 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Sat, 5 Apr 2025 20:33:56 -0400
Subject: hover animation for need list image

---
 .../src/app/components/need-list/need-list.component.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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 5cfa479..86a021e 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
@@ -5,6 +5,19 @@
     border-radius: 5px;
 }
 
+.needEntry:hover {
+    .need-image {
+        mask-image: none;
+        width: 210px
+    }
+    .left {
+        width: 32.5%;
+    }
+    .prog {
+        width: 72.5%;
+    }
+}
+
 #needList {
     display: flex;
     flex-direction: column;
@@ -21,6 +34,7 @@
 }
 
 .need-image {
+    transition: all 0.15s ease-in-out;
     height: 130px;
     width: 200px;
     margin: -10px 0 0 -10px;
@@ -35,6 +49,7 @@
    
     .left {
         width: 15%;
+        transition: all 0.2s ease-in-out;
         display: flex;
         flex-direction: column;
     }
@@ -63,6 +78,7 @@
 }
 
 .prog {
+    transition: all 0.2s ease-in-out;
     width: 85%;
     display: flex;
     flex-direction: column;
-- 
cgit v1.2.3