Profile page created

LewBlu · Jan 11, 2023 · 18df4e7 · 18df4e7
1 parent e7a92a7
commit 18df4e7
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 2 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CatchesComponent } from './catches/catches.component';
 import { MapComponent } from './map/map.component';
+import { ProfileComponent } from './profile/profile.component';
 
 const routes: Routes = [
 	{ path: 'map', component: MapComponent },
 	{ path: 'catches', component: CatchesComponent },
+	{ path: 'profile', component: ProfileComponent },
 	{ path: '**', redirectTo: '/catches' }
 ];
 

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { MapComponent } from './map/map.component';
 import { CatchesComponent } from './catches/catches.component';
 import { CatchItemComponent } from './catches/catch-item/catch-item.component';
 import { MobileComponent } from './navigation/mobile/mobile.component';
+import { ProfileComponent } from './profile/profile.component';
 
 @NgModule({
 	declarations: [
@@ -17,7 +18,8 @@ import { MobileComponent } from './navigation/mobile/mobile.component';
 		MapComponent,
 		CatchesComponent,
 		CatchItemComponent,
-		MobileComponent
+		MobileComponent,
+		ProfileComponent
 	],
 	imports: [
 		BrowserModule,

diff --git a/src/app/profile/profile.component.css b/src/app/profile/profile.component.css
@@ -0,0 +1,5 @@
+.avatar {
+	width: 150px;
+	height: 150px;
+	border-radius: 50%;
+}
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
@@ -0,0 +1,45 @@
+<div class="container">
+	<div class="row mt-2">
+		<div class="col d-flex justify-content-end">
+			<a class="fs-3 text-success cursor-pointer" routerLink="settings"><fa-icon [icon]="faCog"></fa-icon></a>
+		</div>
+	</div>
+	<div class="row justify-content-center mt-3 g-0">
+		<img src="assets/profile_picture.JPEG" alt="" class="avatar">
+	</div>
+	<div class="row text-center my-3">
+		<h4>Lewis Blundell</h4>
+	</div>
+	<div class="row row-cols-2">
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body text-center">
+					Fish Caught
+					<p class="h3 text-center m-0">6</p>
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body text-center">
+					Personal Best
+					<p class="h3 text-center m-0">16lb 7oz</p>
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body">
+					This is some text within a card body.
+				</div>
+			</div>
+		</div>
+		<div class="col mb-2">
+			<div class="card">
+				<div class="card-body">
+					This is some text within a card body.
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/app/profile/profile.component.spec.ts b/src/app/profile/profile.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+	selector: 'app-profile',
+	templateUrl: './profile.component.html',
+	styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent {
+	faCog = faCog;
+
+}
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
-<body>
+<body class="bg-light">
 	<app-root class="d-flex flex-column flex-grow-1"></app-root>
 </body>
 

diff --git a/src/styles.css b/src/styles.css
@@ -13,4 +13,8 @@ body {
 /* Additional margin-top styling (used for mobile nav) */
 .mb-6 {
 	margin-bottom: 4rem;
+}
+
+.cursor-pointer {
+	cursor: pointer;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     	<link rel="icon" type="image/x-icon" href="favicon.ico">
     </head>
-    <body>
+    <body class="bg-light">
     	<app-root class="d-flex flex-column flex-grow-1"></app-root>
     </body>
@@ Expand Down @@