diff options
| author | benal01 <bja4245@rit.edu> | 2025-03-30 00:33:41 -0400 |
|---|---|---|
| committer | benal01 <bja4245@rit.edu> | 2025-03-30 00:33:41 -0400 |
| commit | 88650361adfc9be8344b0d383100b0c6ab513973 (patch) | |
| tree | 7ee905fa83ca9ce43eac6098a40d2ee18adaca47 | |
| parent | e0a3f2c2c0fec40aa50c8889e343a1dbc7f9d7fb (diff) | |
| download | JellySolutions-88650361adfc9be8344b0d383100b0c6ab513973.tar.gz JellySolutions-88650361adfc9be8344b0d383100b0c6ab513973.tar.bz2 JellySolutions-88650361adfc9be8344b0d383100b0c6ab513973.zip | |
basic css and info display for needs
| -rw-r--r-- | ufund-ui/src/app/components/need-list/need-list.component.css | 13 | ||||
| -rw-r--r-- | ufund-ui/src/app/components/need-list/need-list.component.html | 9 |
2 files changed, 19 insertions, 3 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 19c126f..345326f 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 @@ -31,12 +31,21 @@ li { > button { background-color: transparent; width: 88%; - float: left; transition: all 0.3s ease; font-weight: bold; - display: flex; border: none; border-radius: 5px; + padding-left: 1.5%; + > section { + width: 100%; + flex: none; + display: inline-block; + background-color: magenta; + > progress { + width: 25%; + float: none; + } + } } > section { 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 ed151a3..88b9752 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 @@ -28,7 +28,14 @@ <ul> <li *ngFor="let need of searchResults" id="need-button-{{need.id}}"> <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')"> - <p>{{need.name}} <span id="hover-status-label-{{need.id}}"> </span></p> + <section>{{need.name}} | {{need.location}} {{need.urgent ? "URGENT" : ""}}<span id="hover-status-label-{{need.id}}"> </span></section> + <section> + <progress value="need.current" max="need.maxGoal"></progress> + <progress value="need.current" max="need.maxGoal"></progress> + <progress value="need.current" max="need.maxGoal"></progress> + <progress value="need.current" max="need.maxGoal"></progress> + </section> + <section>{{need.current}}/{{need.maxGoal}} {{(need.current / need.maxGoal) * 100}}% <span>{{need.type}}</span></section> </button> <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> |