diff options
| -rw-r--r-- | ufund-ui/src/app/components/need-list/need-list.component.ts | 50 | ||||
| -rw-r--r-- | ufund-ui/src/app/components/need-page/need-page.component.css | 27 |
2 files changed, 32 insertions, 45 deletions
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 40af9f5..564f1f0 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 @@ -14,13 +14,9 @@ export class NeedListComponent implements OnChanges { @Input() actionArea: TemplateRef<any> | null = null visibleNeeds: Need[] = []; - currentPage: number = 0; + currentPage: number = localStorage.getItem('currentPage') ? parseInt(localStorage.getItem('currentPage')!) : 0; totalPages: number = 0; - constructor( - - ) {} - ngOnChanges() { this.updateVisibleNeeds() } @@ -29,25 +25,31 @@ export class NeedListComponent implements OnChanges { return (need.type === GoalType.MONETARY) ? "$" : ""; } - decrementPage() { - this.currentPage--; - this.updateVisibleNeeds(); - } - - incrementPage() { - this.currentPage++; - this.updateVisibleNeeds(); - } - - lastPage() { - this.currentPage = this.totalPages - 1 - this.updateVisibleNeeds() - } - - firstPage() { - this.currentPage = 0 - this.updateVisibleNeeds() - } + //increment/decrement + decrementPage() { + this.currentPage--; + localStorage.setItem('currentPage', this.currentPage.toString()); + this.updateVisibleNeeds(); + } + + incrementPage() { + this.currentPage++; + localStorage.setItem('currentPage', this.currentPage.toString()); + this.updateVisibleNeeds(); + } + + //skipping pages + lastPage() { + this.currentPage = this.totalPages - 1 + localStorage.setItem('currentPage', this.currentPage.toString()); + this.updateVisibleNeeds() + } + + firstPage() { + this.currentPage = 0 + localStorage.setItem('currentPage', this.currentPage.toString()); + this.updateVisibleNeeds() + } updateVisibleNeeds() { this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); 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 f1b7f1f..79d3fb3 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 @@ -4,6 +4,7 @@ } #box { + padding-top: 7.5%; display: flex; flex-direction: column; width: 800px; @@ -22,32 +23,16 @@ /*margin-bottom: 20px;*/ } -.split { - display: flex; - flex-direction: row; - justify-content: space-between; - - - .left { - display: flex; - flex-direction: column; - width : 50%; - } - - .right { - display: flex; - flex-direction: column; - align-items: end; - } -} .need-image { - width: 400px; - height: auto; + width: 55%; + height: 40%; + position: absolute; + left: 22.5%; aspect-ratio: 16/9; object-fit: cover; + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%); border-radius: 10px; - box-shadow: rgb(0, 40, 70) 0 0 50px; } .urgent { |