diff options
Diffstat (limited to 'ufund-ui/src')
8 files changed, 85 insertions, 79 deletions
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 0bcd658..f4ed668 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -38,29 +38,33 @@ text-decoration: none; } - a { - display: block; - position: relative; - padding: 0.1em 0; + a:hover { + text-decoration: underline; } - a::after { - content: ''; - position: absolute; - bottom: 4px; - left: 0; - width: 100%; - height: 0.03em; - background-color: white; - opacity: 0; - transition: opacity 300ms, transform 300ms; - } + /*a {*/ + /* display: block;*/ + /* position: relative;*/ + /* padding: 0.1em 0;*/ + /*}*/ - a:hover::after, - a:focus::after { - opacity: 1; - transform: translate3d(0, 0.2em, 0); - } + /*a::after {*/ + /* content: '';*/ + /* position: absolute;*/ + /* bottom: 4px;*/ + /* left: 0;*/ + /* width: 100%;*/ + /* height: 0.03em;*/ + /* background-color: white;*/ + /* opacity: 0;*/ + /* transition: opacity 300ms, transform 300ms;*/ + /*}*/ + + /*a:hover::after,*/ + /*a:focus::after {*/ + /* opacity: 1;*/ + /* transform: translate3d(0, 0.2em, 0);*/ + /*}*/ } diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index faff4d4..4116a77 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -4,7 +4,7 @@ } #box { - width: 1000px; + width: 800px; display: flex; flex-direction: column; } @@ -22,7 +22,7 @@ border-top-left-radius: 5px; border-top-right-radius: 5px; margin-right: 5px; - border-bottom: 0px; + border-bottom: 0; } .selected-tab { diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index a17f710..dff6e06 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -5,7 +5,7 @@ #box { display: flex; - width: 1000px; + width: 800px; flex-direction: column; gap: 10px; } diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css index 16f3140..a10377f 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.css +++ b/ufund-ui/src/app/components/home-page/home-page.component.css @@ -4,6 +4,7 @@ flex-direction: column; align-items: center; justify-content: center; + overflow: clip; } #hero { 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 d4be5fa..041b4ce 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 @@ -100,3 +100,11 @@ select { padding: 5px; gap: 5px; } + +#page-selector { + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + gap: 10px +} 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 8ea7b88..8ea88b1 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 @@ -15,6 +15,8 @@ <button (click)="changeSortMode(searchForm.value)"> <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span> </button> + <label>Needs per page: </label> + <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}"> </div> <!--<button (click)="close()">Close</button>--> </div> @@ -24,13 +26,6 @@ <h2 *ngIf="searchResults.length == needs.length"> All Needs </h2> <h2 *ngIf="searchResults.length == 0"> No Results Found </h2> -<div id="page-selector"> - <span>Page {{currentPage + 1}} of {{totalPages}} </span> <br> - <label>Needs per page: </label> - <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}"> - <button *ngIf="currentPage > 0" (click)="decrementPage()">Previous</button> - <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()">Next</button> -</div> <div id="needList"> <div *ngFor="let need of visibleNeeds" class="needEntry"> <div [routerLink]="'/need/' + need.id" class="clickable"> @@ -69,3 +64,9 @@ </div> </div> </div> + +<div id="page-selector"> + <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button> + <span>Page {{currentPage + 1}} of {{totalPages}}</span> + <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button> +</div> 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 f950171..844410f 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 @@ -6,7 +6,9 @@ #box { display: flex; flex-direction: column; - width: 1000px; + width: 800px; + justify-content: start; + gap: 10px; } .needName { @@ -15,7 +17,9 @@ .needType { text-transform: uppercase; - font-size: 10pt; + /*font-size: 10pt;*/ + margin-top: -20px; + /*margin-bottom: 20px;*/ } .split { @@ -47,21 +51,23 @@ .prog { display: flex; flex-direction: column; + margin-bottom: 15px; } .actionArea { display: flex; padding: 5px; gap: 5px; + margin-top: 10px; } -#editor { - position: absolute; - background-color: #4a4a4a; - display: flex; - flex-direction: column; - justify-self: center; - align-self: center; - padding: 20px; - box-shadow: 0 0 100px black; -} +/*#editor {*/ +/* position: absolute;*/ +/* background-color: #4a4a4a;*/ +/* display: flex;*/ +/* flex-direction: column;*/ +/* justify-self: center;*/ +/* align-self: center;*/ +/* padding: 20px;*/ +/* box-shadow: 0 0 100px black;*/ +/*}*/ 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 a8479fd..e8d292e 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,10 +1,29 @@ <div id="box"> <h1>{{need?.name}}</h1> - <div> - <h3>Looking for <u>{{need?.type}}</u> Donations.</h3> + <span class="needType">{{need?.type}} GOAL</span> + + <img *ngIf="need.image" alt="Need image" [src]="need?.image"/> + + <p>{{need?.description}}</p> + <div class="prog"> +<!-- <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> - <div *ngIf="need?.filterAttributes"> - <p>Tags:</p> + + <span><strong>Target Goal:</strong> {{need.maxGoal}}</span> + + <span><strong>Amount Currently Collected:</strong> {{need.current}}</span> + + <span><strong>Location:</strong> {{need.location}}</span> + + <span><strong>Urgency: </strong> + <span *ngIf="!need.urgent">Not urgent</span> + <span *ngIf="need.urgent" class="urgent">URGENT</span> + </span> + + <div *ngIf="need.filterAttributes.length > 0"> + <strong>Tags:</strong> <ul style="display: flex; column-gap: 24px;"> <li *ngFor="let tag of need?.filterAttributes"> <p>{{tag}}</p> @@ -12,14 +31,6 @@ </ul> </div> - <hr> - <span>{{need?.description}}</span> - <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/> - <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 class="actionArea"> <button *ngIf="isHelper()" (click)="add(need!)"> <span class="icon">add</span>Add To Basket @@ -31,29 +42,4 @@ <span class="icon">delete</span>Delete Need </button> </div> - - <div [routerLink]="'/need/' + need.id" class="clickable"> - <div class="split"> - <div class="left"> - <span class="needName">{{need.name}}</span> - <span class="needType">{{need.type}}</span> - </div> - - <div class="right"> - <span *ngIf="need.urgent" class="urgent">URGENT</span> - <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span> - </div> - </div> - - <br> - - <div class="prog"> - <span id="hover-status-label-{{need.id}}"> </span> - <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> - <progress [value]="need.current" [max]="need.maxGoal"></progress> - </div> - - </div> - -<!-- <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>--> </div> |