From 6a93ead4f262bf7571192417cc2f6029e9a9e3a8 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 3 Apr 2025 11:55:04 -0400 Subject: need-page's transparent image in background --- .../components/need-page/need-page.component.css | 27 ++++----------- .../components/need-page/need-page.component.html | 39 ++++++++++------------ 2 files changed, 23 insertions(+), 43 deletions(-) (limited to 'ufund-ui/src/app/components/need-page') 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 44db4b4..0bbc2aa 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: 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,.15) 35%, transparent 100%); border-radius: 10px; - box-shadow: rgb(0, 40, 70) 0 0 50px; } .urgent { diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html index f8c2007..cd98c3b 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.html +++ b/ufund-ui/src/app/components/need-page/need-page.component.html @@ -1,4 +1,6 @@ -
+Need image + +

{{need.name}}

{{need.type}} GOAL

{{need.description}}

@@ -8,34 +10,27 @@ This goal is {{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}% complete!
-
-
+ Target Goal: {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}} Amount Currently Collected: {{need.current}} Location: {{need.location}} - Urgency: - Not urgent - URGENT - - -
- Tags: -
    -
  • -

    {{tag}}

    -
    • -
-
-
-
- Need image -
-
+ Urgency: + Not urgent + URGENT + - +
+ Tags: +
    +
  • +

    {{tag}}

    +
    • +
+
+
- - - + + + + diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index ad4cacf..e9be093 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -7,6 +7,7 @@ import {AuthService} from '../../services/auth.service'; import {catchError, of} from 'rxjs'; import {ToastsService, ToastType} from '../../services/toasts.service'; import {UsersService} from '../../services/users.service'; +import {ModalService} from '../../services/modal.service'; @Component({ selector: 'app-need-page', @@ -21,7 +22,8 @@ export class NeedPageComponent { private authService: AuthService, private usersService: UsersService, private toastService: ToastsService, - private router: Router + private router: Router, + protected modalService: ModalService ) {} public GoalType = GoalType; -- cgit v1.2.3 From feba88fed855d1694d292e401a4cb336e0ff9d69 Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 4 Apr 2025 20:56:02 -0400 Subject: Fix create-need dialog --- .../app/components/need-page/need-page.component.html | 2 +- .../src/app/components/need-page/need-page.component.ts | 16 +++++----------- 2 files changed, 6 insertions(+), 12 deletions(-) (limited to 'ufund-ui/src/app/components/need-page') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html index d494ccf..aed3e95 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.html +++ b/ufund-ui/src/app/components/need-page/need-page.component.html @@ -36,7 +36,7 @@ addAdd To Basket - + - - - - - -
+ @if (need) { +

{{need.name}}

+ {{need.type}} GOAL + + Need image + +

{{need.description}}

+
+ + This goal is {{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}% complete! +
+ + Target Goal: {{need.maxGoal}} + + Amount Currently Collected: {{need.current}} + + Location: {{need.location}} + + Urgency: + Not urgent + URGENT + + +
+ Tags: +
    +
  • +

    {{tag}}

    +
    • +
+
+ +
+ + + + + + +
+ } @else { +

Need not found

+ The requested need does not exist. Browse the cupboard + }
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index 1c6d8e4..45d6db5 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -2,7 +2,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {Need} from '../../models/Need'; import {ActivatedRoute, Router} from "@angular/router"; import {CupboardService} from "../../services/cupboard.service"; -import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; import {catchError, of} from 'rxjs'; import {ToastsService, ToastType} from '../../services/toasts.service'; @@ -20,7 +19,7 @@ export class NeedPageComponent implements OnInit { private route: ActivatedRoute, private cupboardService: CupboardService, private authService: AuthService, - private usersService: UsersService, + protected usersService: UsersService, private toastService: ToastsService, private router: Router, protected modalService: ModalService @@ -37,16 +36,6 @@ export class NeedPageComponent implements OnInit { window.history.back(); } - 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); - } - add(need: Need) { const currentUser = this.authService.getCurrentUser(); //console.log("get current user in angular:", currentUser) -- cgit v1.2.3 From 7c49fcd788692a898e985cb156dd9fd910c05790 Mon Sep 17 00:00:00 2001 From: sowgro Date: Fri, 4 Apr 2025 23:14:14 -0400 Subject: Add new authentication to dashboard, cleanup --- ufund-ui/src/app/components/need-page/need-page.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-page') diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index 45d6db5..0967266 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -1,5 +1,5 @@ import {Component, Input, OnInit} from '@angular/core'; -import {Need} from '../../models/Need'; +import {GoalType, Need} from '../../models/Need'; import {ActivatedRoute, Router} from "@angular/router"; import {CupboardService} from "../../services/cupboard.service"; import {AuthService} from '../../services/auth.service'; @@ -69,4 +69,6 @@ export class NeedPageComponent implements OnInit { }) // this.refresh(); } + + readonly GoalType = GoalType } -- cgit v1.2.3 From 09dabe1971f3891f472e24b5c038e4df481ee967 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 5 Apr 2025 13:33:47 -0400 Subject: need image gradient fix --- ufund-ui/src/app/components/need-page/need-page.component.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-page') 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 0bbc2aa..8263737 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,7 +4,7 @@ } #box { - padding-top: 5%; + padding-top: 7.5%; display: flex; flex-direction: column; width: 800px; @@ -31,7 +31,7 @@ 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,.15) 35%, transparent 100%); + 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; } -- cgit v1.2.3 From 2f37b1de28399a361dc272b51ad624ac8902a562 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 5 Apr 2025 16:51:58 -0400 Subject: Make need-page image work on all screen sizes --- .../components/need-page/need-page.component.css | 12 ++++--- .../components/need-page/need-page.component.html | 38 +++++++++------------- 2 files changed, 23 insertions(+), 27 deletions(-) (limited to 'ufund-ui/src/app/components/need-page') 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 79d3fb3..6ca1350 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,12 +4,13 @@ } #box { - padding-top: 7.5%; + /*padding-top: 7.5%;*/ display: flex; flex-direction: column; width: 800px; justify-content: start; gap: 10px; + padding: 0 10px; } .needName { @@ -25,14 +26,17 @@ .need-image { - width: 55%; + width: calc(100% + 40px); height: 40%; - position: absolute; + /*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%); + mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.1) 90%, transparent 100%); border-radius: 10px; + margin-left: -20px; + margin-right: -20px; + margin-bottom: -80px; } .urgent { diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html index ff5990f..2629346 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.html +++ b/ufund-ui/src/app/components/need-page/need-page.component.html @@ -1,5 +1,6 @@
@if (need) { + Need image

{{need.name}}

{{need.type}} GOAL

{{need.description}}

@@ -8,35 +9,26 @@ This goal is {{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}% complete!
+ Target Goal: {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}} -
-
- Target Goal: {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}} + Amount Currently Collected: {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}} - Amount Currently Collected: {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}} + Location: {{need.location}} - Location: {{need.location}} + Urgency: + Not urgent + URGENT + - Urgency: - Not urgent - URGENT - - -
- Tags: -
    -
  • -

    {{tag}}

    -
    • -
-
-
-
- Need image -
+
+ Tags: +
    +
  • +

    {{tag}}

    +
    • +
-