More css cleanup

1 files changed, 23 insertions, 37 deletions

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 a8479fd..e8d292e 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,10 +1,29 @@
 <div id="box">
     <h1>{{need?.name}}</h1>
-    <div>
-        <h3>Looking for <u>{{need?.type}}</u> Donations.</h3>
+    <span class="needType">{{need?.type}} GOAL</span>
+
+    <img *ngIf="need.image" alt="Need image" [src]="need?.image"/>
+
+    <p>{{need?.description}}</p>
+    <div class="prog">
+<!--        <span>{{need?.current}} / {{need?.maxGoal}}</span>-->
+        <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
+        <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
     </div>
-    <div *ngIf="need?.filterAttributes">
-        <p>Tags:</p>
+
+    <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
+
+    <span><strong>Amount Currently Collected:</strong> {{need.current}}</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>
+
+    <div *ngIf="need.filterAttributes.length > 0">
+        <strong>Tags:</strong>
         <ul style="display: flex; column-gap: 24px;">
             <li *ngFor="let tag of need?.filterAttributes">
                 <p>{{tag}}</p>
@@ -12,14 +31,6 @@
         </ul>
     </div>
 
-    <hr>
-    <span>{{need?.description}}</span>
-    <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
-    <p>Location: {{need?.location}}</p>
-    <p>Urgent: {{need?.urgent}}</p>
-    <span>{{need?.current}} / {{need?.maxGoal}}</span>
-    <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
-    <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
     <div class="actionArea">
         <button *ngIf="isHelper()" (click)="add(need!)">
             <span class="icon">add</span>Add To Basket
@@ -31,29 +42,4 @@
             <span class="icon">delete</span>Delete Need
         </button>
     </div>
-
-    <div [routerLink]="'/need/' + need.id" class="clickable">
-        <div class="split">
-            <div class="left">
-                <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>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="prog">
-            <span id="hover-status-label-{{need.id}}"> </span>
-            <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
-            <progress [value]="need.current" [max]="need.maxGoal"></progress>
-        </div>
-
-    </div>
-
-<!--    <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
 </div>