From 0652eb445728806d7fd6a50021a763051503ab36 Mon Sep 17 00:00:00 2001 From: sowgro Date: Thu, 3 Apr 2025 14:55:55 -0400 Subject: get checkout abstraction kinda working --- .../components/need-list/need-list.component.css | 33 --- .../components/need-list/need-list.component.html | 55 ++-- .../components/need-list/need-list.component.ts | 297 +++------------------ 3 files changed, 56 insertions(+), 329 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 e17609b..582b832 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,9 +1,3 @@ -#header { - display: flex; - flex-direction: column; - gap: 10px -} - .needEntry { background-color: #2e2e2e; display: flex; @@ -17,33 +11,6 @@ gap: 15px } -select { - font-size: 14pt; - padding: 5px; -} - -#searchArea { - display: flex; - - form { - display: flex; - width: 100%; - gap: 10px; - } - - input[type=text] { - display: flex; - width: 100%; - } -} - -#sortArea { - display: flex; - flex-direction: row; - gap: 10px; - align-items: center; -} - .needName { font-weight: bold; } 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 88317dd..b19c33d 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,30 +1,4 @@ - - -

Search Results({{needs.length - searchResults.length}} needs filtered):

-

All Needs

-

No Results Found

@@ -45,20 +19,25 @@ {{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)
-
-
- - - -
+ + + + + + + + + + + + + + + + +
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 06a612e..d027690 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 @@ -1,282 +1,63 @@ -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, Input, OnChanges, OnInit} from '@angular/core'; import {Need} from '../../models/Need'; -import {CupboardService} from '../../services/cupboard.service'; -import {UsersService} from '../../services/users.service'; -import {userType} from '../../models/User'; -import {AuthService} from '../../services/auth.service'; -import {catchError, of} from 'rxjs'; -import {ToastsService, ToastType} from '../../services/toasts.service'; - -interface sortAlgo { - (a: Need,b: Need): number; -} - -// sort functions -const sortByName: sortAlgo = (a: Need, b: Need): number => { - if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) { - return -1; - } - return 1; -} - -const sortByGoal: sortAlgo = (a: Need, b: Need): number => { - if(a.maxGoal == b.maxGoal) { - return sortByName(a,b); - } - else if(a.maxGoal > b.maxGoal) { - return -1; - } - return 1; -} - -const sortByCompletion: sortAlgo = (a: Need, b: Need): number => { - if(a.current == b.current) { - return sortByGoal(a,b); - } - else if(a.current > b.current) { - return -1; - } - return 1; -} - -const sortByPriority: sortAlgo = (a: Need, b: Need): number => { - if(a.urgent == b.urgent) { - return sortByGoal(a,b); - } - else if(a.urgent && !b.urgent) { - return -1; - } - return 1; -} - -const sortByLocation: sortAlgo = (a: Need, b: Need): number => { - if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) { - return -1; - } - return 1; -} +import {Observable} from 'rxjs'; @Component({ - selector: 'app-need-list', - standalone: false, - templateUrl: './need-list.component.html', - styleUrl: './need-list.component.css' + selector: 'app-need-list', + standalone: false, + templateUrl: './need-list.component.html', + styleUrl: './need-list.component.css' }) -export class NeedListComponent { - selectedNeed: Need | null = null; - needs: Need[] = []; - searchResults: Need[] = []; - visibleNeeds: Need[] = []; - sortMode: 'Ascending' | 'Descending' = 'Ascending' - currentPage: number = 0; - itemsPerPage: number = 5; - totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); - - decrementPage() { - this.currentPage--; - this.updateVisibleNeeds(); - } - - incrementPage() { - this.currentPage++; - this.updateVisibleNeeds(); - } - - lastPage() { - this.currentPage = this.totalPages - 1 - this.updateVisibleNeeds() - } +export class NeedListComponent implements OnChanges { - firstPage() { - this.currentPage = 0 - this.updateVisibleNeeds() - } + @Input({required: true}) needs!: Need[] - editNeedsPerPage(amount: number) { - this.itemsPerPage = amount; - this.updateVisibleNeeds(); - } + visibleNeeds: Need[] = []; + currentPage: number = 0; + itemsPerPage: number = 5; + totalPages: number = 0; - updateVisibleNeeds() { - this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage); - this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); - } + constructor( - resetVisibleNeeds() { - this.currentPage = 0; - this.updateVisibleNeeds(); - } + ) {} - currentSortAlgo: sortAlgo = sortByPriority; - sortSelection: string = 'sortByPriority'; - - SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, - {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]}, - {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]}, - {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]}, - {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, - ]; - - @Output() currentNeed = new EventEmitter(); - - constructor( - private cupboardService: CupboardService, - private usersService: UsersService, - private authService: AuthService, - private toastService: ToastsService - ) {} - - refresh() { - this.cupboardService.getNeeds().subscribe(n => { - if (this.sortMode == 'Ascending') { - this.needs = n.sort(this.currentSortAlgo); - } else { - this.needs = n.sort(this.currentSortAlgo).reverse(); - } - this.searchResults = this.needs; - this.updateVisibleNeeds(); - }); - - const form = document.getElementById('search-form') as HTMLFormElement; - form.reset(); - this.search(null); + ngOnChanges() { + this.updateVisibleNeeds() } - ngOnInit(): void { - this.refresh() - - } - - changeSortMode(form : any) { - if (this.sortMode == 'Ascending'){ - this.sortMode = 'Descending' - } else { - this.sortMode = 'Ascending' + decrementPage() { + this.currentPage--; + this.updateVisibleNeeds(); } - this.search(form) - } - - private searchDelay: any; - async search(form: any) { - //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls - - //remove previous search if it exists - if (this.searchDelay) { - clearTimeout(this.searchDelay); + incrementPage() { + this.currentPage++; + this.updateVisibleNeeds(); } - if (form) { - this.searchDelay = setTimeout(() => { - - if (form) { - //sorting based on algo selected - this.SortingAlgoArrays.forEach(algo => { - if(algo.name === this.sortSelection) { - this.currentSortAlgo = algo.func; - console.log("changed sorting algorithm to: ", algo.name + this.sortMode) - return - } - }); - - const currentSearchValue = form.search; //latest value of the search - this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - if (this.sortMode == 'Ascending') { - this.searchResults = n.sort(this.currentSortAlgo); - } else { - this.searchResults = n.sort(this.currentSortAlgo).reverse(); - } - this.updateVisibleNeeds(); - }); - } - }, 250); - } else { - //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response - //clear timeout to stop pending search - clearTimeout(this.searchDelay); - this.searchResults = this.needs; - } - } - - delete(id : number) { - this.cupboardService.deleteNeed(id).subscribe(() => { - this.toastService.sendToast(ToastType.INFO, "Need deleted.") - this.needs = this.needs.filter(n => n.id !== id) - }) - this.refresh(); - } - isManager() { - const type = this.authService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); - } - - isHelper() { - const type = this.authService.getCurrentUser()?.type; - return type === ("HELPER" as unknown as userType); - } + lastPage() { + this.currentPage = this.totalPages - 1 + this.updateVisibleNeeds() + } - changeText(id : number, text : string) { - const span = document.getElementById('hover-status-label-' + id); - if (span) { - span.innerHTML = ' ' + text; + firstPage() { + this.currentPage = 0 + this.updateVisibleNeeds() } - } - add(need: Need) { - const currentUser = this.authService.getCurrentUser(); - //console.log("get current user in angular:", currentUser) - if (currentUser) { - if (!currentUser.basket.includes(need.id)) { - currentUser.basket.push(need.id); - this.usersService.updateUser(currentUser) - .pipe(catchError((err, _) => { - console.error(err); - return of(); - })) - .subscribe(() => { - this.usersService.refreshBasket(); - }); - } else { - this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") - } + editNeedsPerPage(amount: number) { + this.itemsPerPage = amount; + this.updateVisibleNeeds(); } - } - back() { - this.searchResults = this.needs; - } + updateVisibleNeeds() { + this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); + this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); + } - select(need : Need) { - //emit value - this.currentNeed.emit(need); - if (this.selectedNeed) { - //revert already selected need to previous style - console.log(need.id); - let button = document.getElementById('need-button-' + this.selectedNeed.id); - if (button) { - console.log(button) - button.style.background = 'lightgray'; - button.style.marginLeft = '0%'; - button.style.width = '98%'; - } - button = document.getElementById('need-edit-button-' + this.selectedNeed.id); - if (button) { - button.style.visibility = 'visible'; - } + resetVisibleNeeds() { + this.currentPage = 0; + this.updateVisibleNeeds(); } - //change selected need to selected style - this.selectedNeed = need; - let button = document.getElementById('need-button-' + need.id); - if (button) { - button.style.background = 'white'; - button.style.marginLeft = '4%'; - button.style.width = '100%'; - } - button = document.getElementById('need-edit-button-' + need.id); - if (button) { - button.style.visibility = 'hidden'; - } - } } -- cgit v1.2.3 From ad651c44ce2515d497c8e5214147c69126e25903 Mon Sep 17 00:00:00 2001 From: sowgro Date: Thu, 3 Apr 2025 19:48:54 -0400 Subject: abstraction working with search and sort --- ufund-ui/src/app/components/need-list/need-list.component.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 d027690..cd7debb 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 @@ -11,10 +11,10 @@ import {Observable} from 'rxjs'; export class NeedListComponent implements OnChanges { @Input({required: true}) needs!: Need[] + @Input() itemsPerPage: number = 5; visibleNeeds: Need[] = []; currentPage: number = 0; - itemsPerPage: number = 5; totalPages: number = 0; constructor( @@ -45,19 +45,9 @@ export class NeedListComponent implements OnChanges { this.updateVisibleNeeds() } - editNeedsPerPage(amount: number) { - this.itemsPerPage = amount; - this.updateVisibleNeeds(); - } - updateVisibleNeeds() { this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); } - - resetVisibleNeeds() { - this.currentPage = 0; - this.updateVisibleNeeds(); - } } -- cgit v1.2.3 From 6a5033afc3c8e0d5d12d709b35b306b6ea1f70e8 Mon Sep 17 00:00:00 2001 From: sowgro Date: Thu, 3 Apr 2025 23:11:05 -0400 Subject: Implemented action buttons with ng-template!!! --- .../components/need-list/need-list.component.html | 21 +++------------------ .../app/components/need-list/need-list.component.ts | 4 ++-- 2 files changed, 5 insertions(+), 20 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 b19c33d..ffed91d 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 @@ -20,24 +20,9 @@ - - - - - - - - - - - - - - - - - - +
+ +
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 cd7debb..7e5c3f4 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 @@ -1,6 +1,5 @@ -import {Component, Input, OnChanges, OnInit} from '@angular/core'; +import {Component, Input, OnChanges, TemplateRef} from '@angular/core'; import {Need} from '../../models/Need'; -import {Observable} from 'rxjs'; @Component({ selector: 'app-need-list', @@ -12,6 +11,7 @@ export class NeedListComponent implements OnChanges { @Input({required: true}) needs!: Need[] @Input() itemsPerPage: number = 5; + @Input() actionArea: TemplateRef | null = null visibleNeeds: Need[] = []; currentPage: number = 0; -- cgit v1.2.3 From 5186df87c75d83eb24a2cb5d868d8d0bb6aa5b88 Mon Sep 17 00:00:00 2001 From: benal01 Date: Fri, 4 Apr 2025 10:37:45 -0400 Subject: localstorage for page (keeps current page on refresh/back arrow) --- ufund-ui/src/app/components/need-list/need-list.component.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 ae6bc99..39ff538 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 @@ -68,7 +68,7 @@ export class NeedListComponent { searchResults: Need[] = []; visibleNeeds: Need[] = []; sortMode: 'Ascending' | 'Descending' = 'Ascending' - currentPage: number = 0; + currentPage: number = localStorage.getItem('currentPage') ? parseInt(localStorage.getItem('currentPage')!) : 0; itemsPerPage: number = 5; totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); @@ -76,26 +76,33 @@ export class NeedListComponent { return (need.type === GoalType.MONETARY) ? "$" : ""; } + //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() } + //user editing needs per page editNeedsPerPage() { if (this.itemsPerPage > this.searchResults.length) { this.itemsPerPage = this.searchResults.length; @@ -106,13 +113,16 @@ export class NeedListComponent { this.resetVisibleNeeds(); } + //refresing visible needs updateVisibleNeeds() { this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage); this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); } + //reset back to first page and refresh needs resetVisibleNeeds() { this.currentPage = 0; + localStorage.setItem('currentPage', this.currentPage.toString()); this.updateVisibleNeeds(); } -- cgit v1.2.3 From b578584a1208178100bf90e8b06971772c7fc00f Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 4 Apr 2025 21:55:12 -0400 Subject: Fix many bugs and code clean up --- ufund-ui/src/app/components/need-list/need-list.component.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ufund-ui/src/app/components/need-list') 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 582b832..622b64a 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 @@ -72,6 +72,10 @@ gap: 5px; } +.actionArea:empty { + padding: 0; +} + #page-selector { display: flex; align-items: center; -- cgit v1.2.3 From 4e59fe19150614b8a9b8033d50cb8a3e0ea1d13b Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 5 Apr 2025 13:18:30 -0400 Subject: need items per page persistence --- ufund-ui/src/app/components/need-list/need-list.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 39ff538..ca92eeb 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 @@ -69,7 +69,7 @@ export class NeedListComponent { visibleNeeds: Need[] = []; sortMode: 'Ascending' | 'Descending' = 'Ascending' currentPage: number = localStorage.getItem('currentPage') ? parseInt(localStorage.getItem('currentPage')!) : 0; - itemsPerPage: number = 5; + itemsPerPage: number = localStorage.getItem('itemsPerPage') ? parseInt(localStorage.getItem('itemsPerPage')!) : 5; totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); getPrefix(need: Need) { @@ -110,6 +110,7 @@ export class NeedListComponent { if (this.itemsPerPage < 1) { this.itemsPerPage = 1; } + localStorage.setItem('itemsPerPage', this.itemsPerPage.toString()); this.resetVisibleNeeds(); } -- cgit v1.2.3 From 80492e8f6f88bff8035e27b814cc9eacbee40c65 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 5 Apr 2025 16:29:05 -0400 Subject: Fix storage after merge --- .../components/need-list/need-list.component.ts | 54 +++++++++++----------- 1 file changed, 28 insertions(+), 26 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 564f1f0..7ca0ae7 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 @@ -10,46 +10,48 @@ import {GoalType, Need} from '../../models/Need'; export class NeedListComponent implements OnChanges { @Input({required: true}) needs!: Need[] + @Input({required: true}) uid!: number @Input() itemsPerPage: number = 5; @Input() actionArea: TemplateRef | null = null visibleNeeds: Need[] = []; - currentPage: number = localStorage.getItem('currentPage') ? parseInt(localStorage.getItem('currentPage')!) : 0; + currentPage: number = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0; totalPages: number = 0; ngOnChanges() { this.updateVisibleNeeds() + this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0; } getPrefix(need: Need) { return (need.type === GoalType.MONETARY) ? "$" : ""; } - //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() - } + //increment/decrement + decrementPage() { + this.currentPage--; + localStorage.setItem('currentPage'+this.uid, this.currentPage.toString()); + this.updateVisibleNeeds(); + } + + incrementPage() { + this.currentPage++; + localStorage.setItem('currentPage'+this.uid, this.currentPage.toString()); + this.updateVisibleNeeds(); + } + + //skipping pages + lastPage() { + this.currentPage = this.totalPages - 1 + localStorage.setItem('currentPage'+this.uid, this.currentPage.toString()); + this.updateVisibleNeeds() + } + + firstPage() { + this.currentPage = 0 + localStorage.setItem('currentPage'+this.uid, this.currentPage.toString()); + this.updateVisibleNeeds() + } updateVisibleNeeds() { this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); -- cgit v1.2.3 From 8ee9c972b06829ccae3adccf3009279f6aeaeb4c Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 5 Apr 2025 20:18:25 -0400 Subject: need image on need list --- .../components/need-list/need-list.component.css | 25 +++++++++++++++++++--- .../components/need-list/need-list.component.html | 7 +++++- 2 files changed, 28 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 622b64a..5cfa479 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 @@ -20,18 +20,34 @@ font-size: 10pt; } +.need-image { + height: 130px; + width: 200px; + margin: -10px 0 0 -10px; + object-fit: cover; + border-radius: 5px; + mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%); +} + .split { display: flex; flex-direction: row; - justify-content: space-between; - - + .left { + width: 15%; + display: flex; + flex-direction: column; + } + + .middle { + width: 42.5%; display: flex; + align-items: start; flex-direction: column; } .right { + width: 42.5%; display: flex; flex-direction: column; align-items: end; @@ -47,8 +63,11 @@ } .prog { + width: 85%; display: flex; flex-direction: column; + align-self: end; + margin-top: -5.25%; } .clickable { 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 406bfa0..1410ce6 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,16 @@
+
+ Need image +
+ +
{{need.name}} {{need.type}}
-
URGENT location_on{{need.location}} @@ -21,6 +25,7 @@
+
-- cgit v1.2.3 From 2ac334681c268391987e51a52260be7b632cc4f1 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 5 Apr 2025 20:33:56 -0400 Subject: hover animation for need list image --- .../src/app/components/need-list/need-list.component.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ufund-ui/src/app/components/need-list') 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 5cfa479..86a021e 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 @@ -5,6 +5,19 @@ border-radius: 5px; } +.needEntry:hover { + .need-image { + mask-image: none; + width: 210px + } + .left { + width: 32.5%; + } + .prog { + width: 72.5%; + } +} + #needList { display: flex; flex-direction: column; @@ -21,6 +34,7 @@ } .need-image { + transition: all 0.15s ease-in-out; height: 130px; width: 200px; margin: -10px 0 0 -10px; @@ -35,6 +49,7 @@ .left { width: 15%; + transition: all 0.2s ease-in-out; display: flex; flex-direction: column; } @@ -63,6 +78,7 @@ } .prog { + transition: all 0.2s ease-in-out; width: 85%; display: flex; flex-direction: column; -- cgit v1.2.3 From fd7d46749103d5610dd71ed33cb1e9d133701d4e Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 6 Apr 2025 13:22:24 -0400 Subject: Disable need-image animation for now --- .../components/need-list/need-list.component.css | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 86a021e..60af7bb 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 @@ -5,19 +5,6 @@ border-radius: 5px; } -.needEntry:hover { - .need-image { - mask-image: none; - width: 210px - } - .left { - width: 32.5%; - } - .prog { - width: 72.5%; - } -} - #needList { display: flex; flex-direction: column; @@ -43,10 +30,23 @@ mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%); } +/*.clickable:hover {*/ +/* .need-image {*/ +/* mask-image: none;*/ +/* width: 210px*/ +/* }*/ +/* .left {*/ +/* width: 32.5%;*/ +/* }*/ +/* .prog {*/ +/* width: 72.5%;*/ +/* }*/ +/*}*/ + .split { display: flex; flex-direction: row; - + .left { width: 15%; transition: all 0.2s ease-in-out; -- cgit v1.2.3