diff options
3 files changed, 13 insertions, 7 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 c2b8b90..c42dfda 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 @@ -25,10 +25,16 @@ li > button { justify-content: space-between; align-items: center; transition: all 0.3s ease; + font-weight: bold; +} + +li > button span { + font-style: italic; + font-weight: normal; } li > button:hover p { - font-weight: bold; + text-decoration: underline; } 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 fc2daa5..741b899 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 @@ -13,9 +13,9 @@ <h2 *ngIf="searchResults.length == 0"> No Results Found </h2> <ul> - <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" > + <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" > <button [routerLink]="'/need/' + need.id"> - <p id="need-label-{{need.id}}">{{need.name}}</p> + <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p> <button (click)="delete(need.id)" *ngIf="isManager()"> <img class="icon" src="/delete.png" alt="Delete"> </button> 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 8ae7370..0f86921 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 @@ -79,10 +79,10 @@ export class NeedListComponent { } changeText(id : number, text : string) { - const label = document.getElementById('need-label-' + id); - if (label) { - label.innerHTML = text; - } + const span = document.getElementById('hover-status-label-' + id); + if (span) { + span.innerHTML = ' ' + text; + } } add(need: Need) { |