More css cleanup

8 files changed, 85 insertions, 79 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 0bcd658..f4ed668 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -38,29 +38,33 @@
         text-decoration: none;
     }
 
-    a {
-        display: block;
-        position: relative;
-        padding: 0.1em 0;
+    a:hover {
+        text-decoration: underline;
     }
 
-    a::after {
-        content: '';
-        position: absolute;
-        bottom: 4px;
-        left: 0;
-        width: 100%;
-        height: 0.03em;
-        background-color: white;
-        opacity: 0;
-        transition: opacity 300ms, transform 300ms;
-    }
+    /*a {*/
+    /*    display: block;*/
+    /*    position: relative;*/
+    /*    padding: 0.1em 0;*/
+    /*}*/
 
-    a:hover::after,
-    a:focus::after {
-        opacity: 1;
-        transform: translate3d(0, 0.2em, 0);
-    }
+    /*a::after {*/
+    /*    content: '';*/
+    /*    position: absolute;*/
+    /*    bottom: 4px;*/
+    /*    left: 0;*/
+    /*    width: 100%;*/
+    /*    height: 0.03em;*/
+    /*    background-color: white;*/
+    /*    opacity: 0;*/
+    /*    transition: opacity 300ms, transform 300ms;*/
+    /*}*/
+
+    /*a:hover::after,*/
+    /*a:focus::after {*/
+    /*    opacity: 1;*/
+    /*    transform: translate3d(0, 0.2em, 0);*/
+    /*}*/
 
 
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index faff4d4..4116a77 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -4,7 +4,7 @@
 }
 
 #box {
-    width: 1000px;
+    width: 800px;
     display: flex;
     flex-direction: column;
 }
@@ -22,7 +22,7 @@
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 5px;
-   border-bottom: 0px;
+   border-bottom: 0;
 }
 
 .selected-tab {
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index a17f710..dff6e06 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -5,7 +5,7 @@
 
 #box {
     display: flex;
-    width: 1000px;
+    width: 800px;
     flex-direction: column;
     gap: 10px;
 }
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index 16f3140..a10377f 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: clip;
 }
 
 #hero {
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 d4be5fa..041b4ce 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
@@ -100,3 +100,11 @@ select {
     padding: 5px;
     gap: 5px;
 }
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}
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 8ea7b88..8ea88b1 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
@@ -15,6 +15,8 @@
         <button (click)="changeSortMode(searchForm.value)">
             <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
         </button>
+        <label>Needs per page: </label>
+        <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
     </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
@@ -24,13 +26,6 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-<div id="page-selector">
-    <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br>
-    <label>Needs per page: </label> 
-    <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
-    <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button>
-    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button>
-</div>
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
@@ -69,3 +64,9 @@
         </div>
     </div>
 </div>
+
+<div id="page-selector">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
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>