Continue working on css (1)

6 files changed, 113 insertions, 110 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index f4b6828..faff4d4 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,14 +1,13 @@
 :host {
     display: flex;
-    justify-content: space-evenly;
-    border: 2px solid #000;
-    border-radius: 5px;
-    padding: 10px 20px;
-    > div {
-      width: 40%;
-    }
+    justify-content: center;
 }
 
+#box {
+    width: 1000px;
+    display: flex;
+    flex-direction: column;
+}
 
 #menu {
       display: flex;
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index bc5ac1c..25b88ba 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,4 +1,4 @@
-<div>
+<div id="box">
     <h1> Cupboard </h1>
     <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
@@ -25,7 +25,7 @@
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
             <input type="submit" value="Submit">
-            
+
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
@@ -46,7 +46,7 @@
             <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
             <label>Urgent</label> <br>
             <input type="submit" value="Submit">
-           
+
         </form>
         <span *ngIf="statusText">{{statusText | async}}</span>
 
diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
index 8a3b6a7..ac456ab 100644
--- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
+++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css
@@ -23,6 +23,7 @@
     padding: 10px;
     gap: 10px;
     justify-content: start;
+    overflow: clip;
 }
 
 .needEntry {
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 05354fc..1936b38 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
@@ -1,91 +1,85 @@
-:host {
-    --list-background-color: lightgray;
-    list-style-type: none;
-    border: 2px solid #000;
-    display: block;
-    border-radius: 5px;
-
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #3a3a3a;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
+    padding: 10px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-ul {
-    list-style-type: none;
-    padding-inline-start: 0px;
+select {
+    font-size: 14pt;
+    padding: 5px;
 }
 
-li {
-    background-color: var(--list-background-color);
+#searchArea {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all 0.3s ease;
-    font-weight: bold;
-    border: 2px solid #000;
-    border-radius: 5px;
-    margin: 5px;
-    > button {
-        background-color: transparent;
-        width: 88%;
-        transition: all 0.3s ease;
-        font-weight: bold;
-        border: none;
-        border-radius: 5px;
-        padding-left: 1.5%;
-        > section {
-            width: 100%;
-            flex: none;
-            display: inline-block;
-            background-color: magenta;
-            > progress {
-                width: 25%;
-                float: none;
-            }
-        }
+
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
     }
 
-    > section {
-        width: 12%;
+    input[type=text] {
+        display: flex;
+        width: 100%;
     }
 }
 
-section button{
-    margin: 4%;
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
 }
 
-li > button span {
-    font-style: italic;
-    font-weight: normal;
+.needName {
+    font-weight: bold;
 }
 
-li > button:hover p {
-    text-decoration: underline;
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
 }
 
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-.icon {
-    width: 18px;
-    margin: 3px -3px -1px -3px;
-}
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
 
-#search-container {
-    background-color: #d9d9d9;
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
 }
 
-#search-form {
-    background-color: light-dark(#d9d9d9, #1b1b1b);
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
     border-radius: 5px;
-    visibility: visible;
+}
 
-    .wide-input {
-        width: 60%;
-    }
- }
+.prog {
+    display: flex;
+    flex-direction: column;
+}
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 72bc9c5..3a4ca9c 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
@@ -1,21 +1,21 @@
-<div id="search-container">
-    <section>
+<div id="header">
+    <div id="searchArea">
+        <form id="search-form" #searchForm="ngForm">
+            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="reset" value="Clear" (click)="search(null)"> <br>
+        </form>
+    </div>
+    <div id="sortArea">
         <label for="sort">Sort by: </label>
-        <select [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
+        <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
             <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
                 {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
             </option>
         </select>
         <button (click)="changeSortMode(searchForm.value)">
-            {{sortMode}}
+            <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
         </button>
-    </section>
-    <section>
-        <form id="search-form" #searchForm="ngForm">
-            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
-            <input type="reset" value="Clear" (click)="search(null)"> <br>
-        </form>
-    </section>
+    </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
 
@@ -24,27 +24,36 @@
 <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
-<ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}">
-        <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
-            <section> <p> {{need.name}} | {{need.location}} <span> {{need.urgent ? "URGENT" : ""}} </span> <span id="hover-status-label-{{need.id}}"> </span> </section>
-            <section>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-                <progress value="need.current" max="need.maxGoal"></progress>
-            </section>
-            <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section>
-        </button>
+<div id="needList">
+    <div *ngFor="let need of searchResults" class="needEntry">
+        <div [routerLink]="'/need/' + need.id">
+            <div class="split">
+                <div class="left">
+                    <span class="needName">{{need.name}}</span>
+                    <span class="needType">{{need.type}}</span>
+                </div>
 
-        <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-        <section *ngIf="isManager()">
-            <button (click)="select(need)" id="need-edit-button-{{need.id}}">
-                <img class="icon" src="/edit.png" alt="Select">
+                <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>
+
+            <div class="prog">
+                <span id="hover-status-label-{{need.id}}"> </span>
+                <span>{{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)</span>
+                <progress [value]="need.current" [max]="need.maxGoal"></progress>
+            </div>
+        </div>
+
+        <div>
+            <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button>
+            <button *ngIf="isManager()" (click)="select(need)">
+                <span class="icon">edit</span>
             </button>
-            <button (click)="delete(need.id)" *ngIf="isManager()">
-                <img class="icon" src="/delete.png" alt="Delete">
+            <button *ngIf="isManager()" (click)="delete(need.id)" >
+                <span class="icon">delete</span>
             </button>
-        </section>
-    </li>
-</ul>
+        </div>
+    </div>
+</div>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index af8cab4..47114c3 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -66,7 +66,7 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
-  sortMode = 'Ascending'
+  sortMode: 'Ascending' | 'Descending' = 'Ascending'
 
   currentSortAlgo: sortAlgo = sortByPriority;
   sortSelection: string = 'sortByPriority';
@@ -98,7 +98,7 @@ export class NeedListComponent {
         });
 
         const form = document.getElementById('search-form') as HTMLFormElement;
-        form.reset(); 
+        form.reset();
         this.search(null);
     }