diff options
Diffstat (limited to '')
5 files changed, 43 insertions, 28 deletions
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index 9db015e..78a69ba 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -1,7 +1,7 @@ :host { display: flex; flex-direction: column; - width: 1200px; + width: 1000px; align-self: center; gap: 20px } 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 5e07856..05354fc 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 @@ -75,14 +75,17 @@ li > button:hover p { #search-container { background-color: #d9d9d9; +} + #search-form { background-color: light-dark(#d9d9d9, #1b1b1b); padding: 10px 20px 20px 20px; border: 2px solid #000; border-radius: 5px; + border-radius: 5px; + visibility: visible; + .wide-input { width: 60%; } - border-radius: 5px; - visibility: visible; } 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 866e5e4..72bc9c5 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 @@ -1,4 +1,3 @@ -<h1>Needs List</h1> <div id="search-container"> <section> <label for="sort">Sort by: </label> @@ -43,9 +42,9 @@ <button (click)="select(need)" id="need-edit-button-{{need.id}}"> <img class="icon" src="/edit.png" alt="Select"> </button> - <button (click)="delete(need.id)" *ngIf="isManager()"> + <button (click)="delete(need.id)" *ngIf="isManager()"> <img class="icon" src="/delete.png" alt="Delete"> </button> </section> </li> -</ul>
\ No newline at end of file +</ul> 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 e69de29..a3a4014 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 @@ -0,0 +1,10 @@ +:host { + display: flex; + justify-content: center; +} + +#box { + display: flex; + flex-direction: column; + width: 1000px; +} 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 7ce7633..a72167c 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,23 +1,26 @@ -<button routerLink="/cupboard">Back to cupboard</button> -<h1>Viewing Need: {{need?.name}}</h1> -<a>internal id: {{need?.id}}</a> -<div style="display: flex; column-gap: 6px;"> - <h3>Looking for</h3> - <h3><u>{{need?.type}}</u></h3> - <h3>Donations.</h3> -</div> -<div *ngIf="need?.filterAttributes != null"> - <p>Tags:</p> - <ul style="display: flex; column-gap: 24px;"> - <li *ngFor="let tag of need?.filterAttributes"> - <p>{{tag}}</p> - </li> - </ul> -</div> +<div id="box"> + <h1>{{need?.name}}</h1> + <div> + <h3>Looking for <u>{{need?.type}}</u> Donations.</h3> + </div> + <div *ngIf="need?.filterAttributes"> + <p>Tags:</p> + <ul style="display: flex; column-gap: 24px;"> + <li *ngFor="let tag of need?.filterAttributes"> + <p>{{tag}}</p> + </li> + </ul> + </div> -<hr> -<p>Location: {{need?.location}}</p> -<p>Goal: {{need?.maxGoal}}</p> -<p>Current: {{need?.current}}</p> -<p>Urgent: {{need?.urgent}}</p> -<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p> + <hr> + <p>Location: {{need?.location}}</p> + <p>Urgent: {{need?.urgent}}</p> + <span>{{need?.current}} / {{need?.maxGoal}}</span> + <progress [value]="need?.current" [max]="need?.maxGoal"></progress> + <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span> + <div> + <button>Add to basket</button> + <button>Edit</button> + <button>Delete</button> + </div> +</div> |