diff options
Diffstat (limited to 'ufund-ui/src/app/components/need-list')
3 files changed, 103 insertions, 100 deletions
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); } |