From aef3df6f9eacfe37479046826a9ca14310b72456 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 21:54:38 -0400 Subject: Apply css to funding basket --- .../funding-basket/funding-basket.component.css | 85 +++++++++++++++- .../funding-basket/funding-basket.component.html | 112 ++++++++++++++------- .../funding-basket/funding-basket.component.ts | 6 +- .../components/need-list/need-list.component.css | 21 +++- .../components/need-list/need-list.component.html | 23 +++-- .../components/need-list/need-list.component.ts | 13 +-- ufund-ui/src/styles.css | 4 + 7 files changed, 202 insertions(+), 62 deletions(-) (limited to 'ufund-ui/src') diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index 3dec496..a17f710 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -1,7 +1,82 @@ -td, p { - border: 2px solid #000; +:host { + display: flex; + justify-content: center; +} + +#box { + display: flex; + width: 1000px; + flex-direction: column; + gap: 10px; +} + +.needEntry { + background-color: #2e2e2e; + display: flex; + flex-direction: column; border-radius: 5px; - padding: 5px; - margin: 5px; +} + +#needList { + display: flex; + flex-direction: column; + gap: 10px; + max-width: 1000px; +} + +.needName { + font-weight: bold; +} + +.needType { + text-transform: uppercase; + font-size: 10pt; +} + +.split { + display: flex; + flex-direction: row; + justify-content: space-between; + + + .left { + display: flex; + flex-direction: column; + } -} \ No newline at end of file + .right { + display: flex; + flex-direction: column; + align-items: end; + } +} + +.urgent { + font-size: 11pt; + background-color: rgba(255, 165, 0, 0.27); + color: rgba(255, 165, 0, 1); + padding: 2px; + border-radius: 5px; +} + +.prog { + display: flex; + flex-direction: column; +} + +.clickable { + padding: 10px; + background-color: #3a3a3a; + border-radius: 5px; + cursor: pointer; +} + +.clickable:hover { + background-color: #444444; +} + +.actionArea { + display: flex; + padding: 5px; + gap: 5px; +} diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index 504e694..52b35c1 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -1,39 +1,81 @@ -

Funding Basket

-
- - {{ this.usersService.getBasket().getValue().length }} -
+ + + + -
-

There are no needs in the basket

-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Funding Basket

+ +
+
+
+
+
+ {{need.name}} + {{need.type}} +
+ +
+ URGENT + location_on{{need.location}} +
+
+ +
- - - - - - - - - - - -
- {{need.name}} -

Goal: {{need.maxGoal}}

-

Current: {{(need.current).toFixed(2)}}

-

How much to Contribute:

-
-
- +
+ + {{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%) + +
+ + + + +
+ +
+ +
-
-
-
-

Invalid input in funding basket!

- - {{statusText | async}} -
\ No newline at end of file +
+
+
+ + +
+ There are no needs in your basket! Browse the cupboard +
+
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts index 24e2c0b..646ef35 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts @@ -39,7 +39,7 @@ export class FundingBasketComponent implements OnInit { async checkout() { this.isValid = true; - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + for (let c of document.querySelectorAll('.contribution')!) { let contribution = c as HTMLInputElement; contribution.setAttribute("style", ""); if (contribution.value == '' || contribution.valueAsNumber <= 0) { @@ -59,7 +59,7 @@ export class FundingBasketComponent implements OnInit { // } // } if (this.isValid) { - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + for (let c of document.querySelectorAll('.contribution')!) { let contribution = c as HTMLInputElement; let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); need.current += +contribution.value; @@ -77,11 +77,11 @@ export class FundingBasketComponent implements OnInit { })) .subscribe((result) => { if (result) { - console.log('need updated successfully'); //this.needList?.refresh() } else { console.log('need update failed'); } + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); }); } } 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 1936b38..d4be5fa 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,11 +5,10 @@ } .needEntry { - background-color: #3a3a3a; + background-color: #2e2e2e; display: flex; flex-direction: column; border-radius: 5px; - padding: 10px; } #needList { @@ -59,6 +58,7 @@ select { flex-direction: row; justify-content: space-between; + .left { display: flex; flex-direction: column; @@ -83,3 +83,20 @@ select { display: flex; flex-direction: column; } + +.clickable { + padding: 10px; + background-color: #3a3a3a; + border-radius: 5px; + cursor: pointer; +} + +.clickable:hover { + background-color: #444444; +} + +.actionArea { + display: flex; + padding: 5px; + gap: 5px; +} 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 c325320..84f83d6 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 @@ -26,37 +26,38 @@
-
+
{{need.name}} {{need.type}}
- +
URGENT location_on{{need.location}}
- + +
+
{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)
-
- {{need.description}} -
- -
- + +
+
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 47114c3..7a9d647 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,11 +1,11 @@ -import {Component , Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component, EventEmitter, Output} 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 {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; @@ -84,7 +84,8 @@ export class NeedListComponent { constructor( private cupboardService: CupboardService, private usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} refresh() { @@ -196,7 +197,7 @@ export class NeedListComponent { this.usersService.refreshBasket(); }); } else { - window.alert("This need is already in your basket!") + this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index b152e61..f515154 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -38,6 +38,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { border-radius: 9999px; border-style: none; background-color: light-dark(#ebebeb, #3a3a3a); + display: flex; + gap: 5px; + text-align: center; + justify-content: center; &:hover { background-color: light-dark(#e1e1e1, #444444); -- cgit v1.2.3