Make need-page image work on all screen sizes

2 files changed, 23 insertions, 27 deletions

diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index 79d3fb3..6ca1350 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -4,12 +4,13 @@
 }
 
 #box {
-    padding-top: 7.5%;
+    /*padding-top: 7.5%;*/
     display: flex;
     flex-direction: column;
     width: 800px;
     justify-content: start;
     gap: 10px;
+    padding: 0 10px;
 }
 
 .needName {
@@ -25,14 +26,17 @@
 
 
 .need-image {
-    width: 55%;
+    width: calc(100% + 40px);
     height: 40%;
-    position: absolute;
+    /*position: absolute;*/
     left: 22.5%;
     aspect-ratio: 16/9;
     object-fit: cover;
-    mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%);
+    mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.1) 90%, transparent 100%);
     border-radius: 10px;
+    margin-left: -20px;
+    margin-right: -20px;
+    margin-bottom: -80px;
 }
 
 .urgent {
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index ff5990f..2629346 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,5 +1,6 @@
 <div id="box">
     @if (need) {
+        <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
         <h1>{{need.name}}</h1>
         <span class="needType">{{need.type}} GOAL</span>
         <p>{{need.description}}</p>
@@ -8,35 +9,26 @@
             <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span>
         </div>
 
+        <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span>
 
-        <div class="split">
-          <div class="left">
-            <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span>
+        <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span>
 
-            <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span>
+        <span><strong>Location:</strong> {{need.location}}</span>
 
-            <span><strong>Location:</strong> {{need.location}}</span>
+        <span><strong>Urgency: </strong>
+            <span *ngIf="!need.urgent">Not urgent</span>
+            <span *ngIf="need.urgent" class="urgent">URGENT</span>
+        </span>
 
-                <span><strong>Urgency: </strong>
-                    <span *ngIf="!need.urgent">Not urgent</span>
-                    <span *ngIf="need.urgent" class="urgent">URGENT</span>
-                </span>
-
-            <div *ngIf="need.filterAttributes?.length">
-                    <strong>Tags:</strong>
-                    <ul style="display: flex; column-gap: 24px;">
-                        <li *ngFor="let tag of need?.filterAttributes">
-                            <p>{{tag}}</p>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="right">
-              <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
-            </div>
+        <div *ngIf="need.filterAttributes?.length">
+            <strong>Tags:</strong>
+            <ul style="display: flex; column-gap: 24px;">
+                <li *ngFor="let tag of need?.filterAttributes">
+                    <p>{{tag}}</p>
+                </li>
+            </ul>
         </div>
 
-
         <div class="actionArea">
             <button *ngIf="usersService.isHelper()" (click)="add(need)" [disabled]="usersService.inBasket(usersService.getBasket() | async, need)">
                 <span class="icon">{{usersService.inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket