diff options
Diffstat (limited to 'ufund-ui/src/app')
10 files changed, 103 insertions, 35 deletions
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts index 4b76654..c83db8a 100644 --- a/ufund-ui/src/app/app-routing.module.ts +++ b/ufund-ui/src/app/app-routing.module.ts @@ -8,12 +8,12 @@ import {FundingBasketComponent} from './components/funding-basket/funding-basket import {NeedPageComponent} from './components/need-page/need-page.component'; const routes: Routes = [ - {path: '', component: HomePageComponent}, - {path: 'login', component: LoginComponent}, - {path: 'cupboard', component: CupboardComponent}, - {path: 'dashboard', component: DashboardComponent}, - {path: 'basket', component: FundingBasketComponent}, - {path: 'need/:id', component: NeedPageComponent} + { path: '', component: HomePageComponent, title: "Home | JS" }, + { path: 'login', component: LoginComponent, title: "Login | JS" }, + { path: 'cupboard', component: CupboardComponent, title: "Cupboard | JS" }, + { path: 'dashboard', component: DashboardComponent, title: "Dashboard | JS" }, + { path: 'basket', component: FundingBasketComponent, title: "Basket | JS" }, + { path: 'need/:id', component: NeedPageComponent, title: "Need | JS" } ]; @NgModule({ diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index e69de29..17bbed7 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -0,0 +1,30 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; +} + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: light-dark(#d3d3d3, black) solid 1px; + padding: 0 10px; + background-color: light-dark(#f5f5f5, #2e2e2e); + + h1 { + padding: 0; + margin: 0; + + } + + div { + display: flex; + align-items: center; + gap: 10px; + } + + a { + color: light-dark(black, white); + } +} diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html index a490237..3058117 100644 --- a/ufund-ui/src/app/app.component.html +++ b/ufund-ui/src/app/app.component.html @@ -1,6 +1,17 @@ - -<h1>jelly solutions</h1> -<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button> -<hr> +<div id="header"> + <span> + <a routerLink="/"> + <h1>Jelly Solutions</h1> + </a> + </span> + <div> + <a routerLink="/dashboard">Dashboard</a> + <a routerLink="/cupboard">Cupboard</a> + <a routerLink="/basket">Basket</a> + <span>{{currentUser$ | async}}</span> + <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button> + <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button> + </div> +</div> <router-outlet /> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index fe4971a..c8add60 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -1,6 +1,6 @@ :host { display: block; - border: 2px solid #000; + /*border: 2px solid #000;*/ border-radius: 5px; padding: 10px 20px; } @@ -9,7 +9,7 @@ background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; width: 20%; visibility: visible; @@ -17,5 +17,5 @@ #create-button { padding: 10px 20px; - -}
\ No newline at end of file + +} 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 e69de29..5f65225 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 @@ -0,0 +1,7 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html index d41e670..b2eed0b 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.html +++ b/ufund-ui/src/app/components/home-page/home-page.component.html @@ -1,3 +1,2 @@ -<a routerLink="/login"> - Login/Sign Up -</a>
\ No newline at end of file +<h1>Helping fund coral reef and marine life conservation</h1> +<button routerLink="/cupboard">View needs</button> diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css index 435cc87..4bfcbb8 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -1,8 +1,24 @@ -:host, .border { - display: flex; - flex-direction: column; - max-width: 300px; - gap: 5px +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg"); +} + +#box { + display: flex; + flex-direction: column; + max-width: 350px; + gap: 10px; + backdrop-filter: blur(10px); + background-color: rgba(0, 0, 0, 0.1); + padding: 30px; + color: white; + border-radius: 5px; + border-style: solid; + border-width: 1px; + border-color: white; } .border { diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 2cdb6d0..e04ec23 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,7 +1,12 @@ -<span *ngIf="next" style="color: red">You must be logged in to view this page</span> -<p>Login:</p> -<input placeholder="Username" type="text" #username> -<input placeholder="Password" type="password" #password> -<button type="button" (click)="login(username.value, password.value)">Login</button> -<button type="button" (click)="signup(username.value, password.value)">Create Account</button> -<span *ngIf="statusText">{{statusText | async}}</span> +<div id="box"> + <span *ngIf="next" style="color: red">You must be logged in to view this page</span> + <h1>Login</h1> + <input placeholder="Username" type="text" #username> + <input placeholder="Password" type="password" #password> + <button type="button" (click)="login(username.value, password.value)">Login</button> + <div> + New? <a href="/">Create an account</a> + </div> +<!-- <button type="button" (click)="signup(username.value, password.value)">Create Account</button>--> + <span *ngIf="statusText">{{statusText | async}}</span> +</div> 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 bbc3f2c..fa3ed4f 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 @@ -4,7 +4,7 @@ display: block; width: 30%; border-radius: 5px; - + } li, div { @@ -16,9 +16,9 @@ li, div { } #search-form { - background-color: #d9d9d9; + background-color: light-dark(#d9d9d9, #1b1b1b); padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; visibility: visible; - }
\ No newline at end of file + } 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 90fd459..b2579c9 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,4 +1,4 @@ -<button routerLink="/dashboard">Back to dashboard</button> +<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;"> @@ -19,4 +19,4 @@ <p>Goal: {{need?.maxGoal}}</p> <p>Current: {{need?.current}}</p> -<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file +<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p> |