From 2f37b1de28399a361dc272b51ad624ac8902a562 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 5 Apr 2025 16:51:58 -0400
Subject: Make need-page image work on all screen sizes

---
 .../components/need-page/need-page.component.html  | 38 +++++++++-------------
 1 file changed, 15 insertions(+), 23 deletions(-)

(limited to 'ufund-ui/src/app/components/need-page/need-page.component.html')

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
-- 
cgit v1.2.3