More css cleanup

2 files changed, 41 insertions, 49 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 f950171..844410f 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
@@ -6,7 +6,9 @@
 #box {
     display: flex;
     flex-direction: column;
-    width: 1000px;
+    width: 800px;
+    justify-content: start;
+    gap: 10px;
 }
 
 .needName {
@@ -15,7 +17,9 @@
 
 .needType {
     text-transform: uppercase;
-    font-size: 10pt;
+    /*font-size: 10pt;*/
+    margin-top: -20px;
+    /*margin-bottom: 20px;*/
 }
 
 .split {
@@ -47,21 +51,23 @@
 .prog {
     display: flex;
     flex-direction: column;
+    margin-bottom: 15px;
 }
 
 .actionArea {
     display: flex;
     padding: 5px;
     gap: 5px;
+    margin-top: 10px;
 }
 
-#editor {
-    position: absolute;
-    background-color: #4a4a4a;
-    display: flex;
-    flex-direction: column;
-    justify-self: center;
-    align-self: center;
-    padding: 20px;
-    box-shadow: 0 0 100px black;
-}
+/*#editor {*/
+/*    position: absolute;*/
+/*    background-color: #4a4a4a;*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*    justify-self: center;*/
+/*    align-self: center;*/
+/*    padding: 20px;*/
+/*    box-shadow: 0 0 100px black;*/
+/*}*/
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>