Merge pull request #30 from RIT-SWEN-261-02/need-list-image

Need list image and animation

2 files changed, 44 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..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;
@@ -20,18 +33,36 @@
     font-size: 10pt;
 }
 
+.need-image {
+    transition: all 0.15s ease-in-out;
+    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%;
+        transition: all 0.2s ease-in-out;
+        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 +78,12 @@
 }
 
 .prog {
+    transition: all 0.2s ease-in-out;
+    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>