diff options
Diffstat (limited to 'ufund-ui/src')
| -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> |