Continue working on css (1)

1 files changed, 41 insertions, 32 deletions

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>