diff options
Diffstat (limited to 'ufund-ui/src/app/components/need-list')
3 files changed, 12 insertions, 11 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 60af7bb..38ed4df 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,5 +1,5 @@ .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -8,7 +8,7 @@ #needList { display: flex; flex-direction: column; - gap: 15px + gap: 10px } .needName { @@ -72,7 +72,7 @@ .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); - color: rgba(255, 165, 0, 1); + color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1)); padding: 2px; border-radius: 5px; } @@ -88,7 +88,7 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; height: 130px; @@ -98,7 +98,7 @@ } .clickable:hover { - background-color: #444444; + background-color: var(--hover-color); } .actionArea { 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 1410ce6..99c9f97 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 @@ -2,12 +2,12 @@ <div id="needList"> <div *ngFor="let need of visibleNeeds" class="needEntry"> <div [routerLink]="'/need/' + need.id" class="clickable"> - + <div class="split"> <div class="left"> <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/> </div> - + <div class="middle"> <span class="needName">{{need.name}}</span> <span class="needType">{{need.type}}</span> @@ -21,18 +21,18 @@ <div class="prog"> <span id="hover-status-label-{{need.id}}"> </span> - <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> + <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}} / {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal.toLocaleString()}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> <progress [value]="need.current" [max]="need.maxGoal"></progress> </div> </div> - + <div *ngIf="actionArea" class="actionArea"> <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/> </div> </div> </div> -<div id="page-selector"> +<div *ngIf="itemsPerPage !== Infinity" id="page-selector"> <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button> <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button> <span>Page {{currentPage + 1}} of {{totalPages}}</span> 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 7ca0ae7..b0a012f 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 @@ -19,8 +19,8 @@ export class NeedListComponent implements OnChanges { totalPages: number = 0; ngOnChanges() { - this.updateVisibleNeeds() this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0; + this.updateVisibleNeeds() } getPrefix(need: Need) { @@ -59,5 +59,6 @@ export class NeedListComponent implements OnChanges { } protected readonly GoalType = GoalType; + protected readonly Infinity = Infinity; } |