diff --git a/.hintrc b/.hintrc index f80af9b..1427ac7 100644 --- a/.hintrc +++ b/.hintrc @@ -9,6 +9,8 @@ { "button-name": "off" } - ] + ], + "button-type": "off", + "no-inline-styles": "off" } } \ No newline at end of file diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 1250526..1669590 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -30,12 +30,12 @@ export const routes: Routes = [ }, { path:'posts', - loadComponent: () => import('../app/views/fireblog-page/fireblog-page.component') + loadComponent: () => import('../app/components/fireblog-page/fireblog-page.component') .then(mod => mod.FireblogPageComponent) }, { path:'blog-detail', - loadComponent: () => import('../app/views/fireblog-detail/fireblog-detail.component') + loadComponent: () => import('../app/components/fireblog-detail/fireblog-detail.component') .then(mod => mod.FireblogDetailComponent) } ] diff --git a/src/app/components/create-post/create-post.component.html b/src/app/components/create-post/create-post.component.html index cac54fe..902e87b 100644 --- a/src/app/components/create-post/create-post.component.html +++ b/src/app/components/create-post/create-post.component.html @@ -1,19 +1,16 @@
-
- +
+
-
- -
- -
diff --git a/src/app/components/create-post/create-post.component.scss b/src/app/components/create-post/create-post.component.scss index 0dc90b2..f1f3d69 100644 --- a/src/app/components/create-post/create-post.component.scss +++ b/src/app/components/create-post/create-post.component.scss @@ -1,6 +1,8 @@ @use '../../../partials/variables' as *; -section{ + + +section { display: flex; gap: 2.75rem; position: fixed !important; @@ -12,27 +14,34 @@ section{ right: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - .content{ + .content { display: flex; gap: 3rem; - .profile{ + cursor: pointer; + + .profile { display: flex; gap: .25rem; - cursor: pointer; - #profile-img{ + + img{ + width: 12px; + height: 12px; + } + + #profile-img { width: 3rem; height: 3rem; } - } - } - .content-grp{ + + .content-grp { display: flex; flex-direction: column; gap: .5rem; width: 100%; - textarea{ + + textarea { resize: none; border: none; outline: none; @@ -46,7 +55,7 @@ section{ color: $palesky; } - button{ + button { cursor: pointer; align-self: end; margin-right: 7rem; diff --git a/src/app/components/create-post/create-post.component.ts b/src/app/components/create-post/create-post.component.ts index 5b454ea..1ac78ba 100644 --- a/src/app/components/create-post/create-post.component.ts +++ b/src/app/components/create-post/create-post.component.ts @@ -1,21 +1,26 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core'; import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Subscription } from 'rxjs'; -import { IUser } from '../../services/blog.interface'; // Make sure to import IUser +import { IUser } from '../../services/blog.interface'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; @Component({ selector: 'app-create-post', standalone: true, - imports: [CommonModule, FormsModule], + imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule], templateUrl: './create-post.component.html', styleUrl: './create-post.component.scss' }) export class CreatePostComponent implements OnInit, OnDestroy { + @Output() toggleSidebar = new EventEmitter(); + currentUser: IUser | null = null; private userSubscription: Subscription | undefined; content = ''; + isSidebarOpen = false; constructor(private blogFacade: FireblogFacadeService) {} @@ -37,7 +42,7 @@ export class CreatePostComponent implements OnInit, OnDestroy { this.blogFacade.createBlogPost(this.currentUser, this.content) .then(() => { console.log('Post created successfully'); - this.content = ''; + this.content = ''; }) .catch(error => { console.error('Error creating post:', error); @@ -46,4 +51,9 @@ export class CreatePostComponent implements OnInit, OnDestroy { console.error('Cannot create post: User not logged in or content is empty'); } } + + toggleSidebarEvent() { + this.isSidebarOpen = !this.isSidebarOpen; + this.toggleSidebar.emit(this.isSidebarOpen); + } } diff --git a/src/app/views/fireblog-detail/fireblog-detail.component.html b/src/app/components/fireblog-detail/fireblog-detail.component.html similarity index 100% rename from src/app/views/fireblog-detail/fireblog-detail.component.html rename to src/app/components/fireblog-detail/fireblog-detail.component.html diff --git a/src/app/views/fireblog-detail/fireblog-detail.component.scss b/src/app/components/fireblog-detail/fireblog-detail.component.scss similarity index 100% rename from src/app/views/fireblog-detail/fireblog-detail.component.scss rename to src/app/components/fireblog-detail/fireblog-detail.component.scss diff --git a/src/app/views/fireblog-detail/fireblog-detail.component.spec.ts b/src/app/components/fireblog-detail/fireblog-detail.component.spec.ts similarity index 100% rename from src/app/views/fireblog-detail/fireblog-detail.component.spec.ts rename to src/app/components/fireblog-detail/fireblog-detail.component.spec.ts diff --git a/src/app/views/fireblog-detail/fireblog-detail.component.ts b/src/app/components/fireblog-detail/fireblog-detail.component.ts similarity index 100% rename from src/app/views/fireblog-detail/fireblog-detail.component.ts rename to src/app/components/fireblog-detail/fireblog-detail.component.ts diff --git a/src/app/components/fireblog-page/fireblog-page.component.html b/src/app/components/fireblog-page/fireblog-page.component.html new file mode 100644 index 0000000..1e8814c --- /dev/null +++ b/src/app/components/fireblog-page/fireblog-page.component.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+

Fireblog Posts

+ +
+ +
+ + diff --git a/src/app/components/fireblog-page/fireblog-page.component.scss b/src/app/components/fireblog-page/fireblog-page.component.scss new file mode 100644 index 0000000..f6938bf --- /dev/null +++ b/src/app/components/fireblog-page/fireblog-page.component.scss @@ -0,0 +1,108 @@ +@use '../../../partials/variables' as *; + +.fireblog-container { + padding-top: 2rem; + flex: 1; + display: flex; + flex-direction: column; + background-color: transparent; + height: 100%; + overflow: hidden; + + mat-sidenav-container { + flex: 1; + overflow: hidden; + } + + mat-sidenav { + width: 300px; + padding: 1rem; + } + + mat-sidenav-content { + display: flex; + flex-direction: column; + background-color: transparent; + overflow: hidden; + + .fireblog-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + + .posts-section { + flex: 1; + display: flex; + flex-direction: column; + overflow-y: auto; + padding: 1.25rem; + padding-bottom: 7rem; + + h2 { + text-align: center; + color: $blueviolet; + font-family: $titlefont; + } + } + } + } +} + +.create-post-section { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 1000; +} + +// New styles for user profile +.user-profile { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + + h3 { + color: $blueviolet; + font-family: $titlefont; + margin-bottom: 1rem; + } + + .profile-form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + .profile-image { + position: relative; + margin-bottom: 1rem; + + img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + } + + .upload-btn { + position: absolute; + bottom: 0; + right: 0; + background-color: $blueviolet; + } + } + + mat-form-field { + width: 100%; + margin-bottom: 1rem; + } + + button[mat-raised-button] { + background-color: $blueviolet; + color: white; + } + } +} diff --git a/src/app/views/fireblog-page/fireblog-page.component.spec.ts b/src/app/components/fireblog-page/fireblog-page.component.spec.ts similarity index 100% rename from src/app/views/fireblog-page/fireblog-page.component.spec.ts rename to src/app/components/fireblog-page/fireblog-page.component.spec.ts diff --git a/src/app/components/fireblog-page/fireblog-page.component.ts b/src/app/components/fireblog-page/fireblog-page.component.ts new file mode 100644 index 0000000..5adf0a9 --- /dev/null +++ b/src/app/components/fireblog-page/fireblog-page.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav'; +import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { PostCardComponent } from "../post-card/post-card.component"; +import { CreatePostComponent } from "../create-post/create-post.component"; +import { UserProfileComponent } from "../../views/auth/user-profile/user-profile.component"; + +@Component({ + selector: 'app-fireblog-page', + templateUrl: './fireblog-page.component.html', + styleUrls: ['./fireblog-page.component.scss'], + standalone: true, + imports: [ + CommonModule, + FormsModule, + MatSidenavModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatIconModule, + MatSnackBarModule, + PostCardComponent, + CreatePostComponent, + UserProfileComponent +] +}) +export class FireblogPageComponent implements OnInit { + @ViewChild('sidenav') sidenav!: MatSidenav; + + isSidebarOpen = false; + + + ngOnInit(): void {} + + toggleSidebar(event: boolean) { + this.isSidebarOpen = event; + this.sidenav.toggle(); + } + + +} diff --git a/src/app/views/auth/user-profile/user-profile.component.html b/src/app/views/auth/user-profile/user-profile.component.html index fedcb8b..c8f6f1f 100644 --- a/src/app/views/auth/user-profile/user-profile.component.html +++ b/src/app/views/auth/user-profile/user-profile.component.html @@ -1 +1,24 @@ -

user-profile works!

+
+

User Profile

+
+
+ User Avatar + + +
+ + Username + + + + Email + + +
+ + +
+
+
diff --git a/src/app/views/auth/user-profile/user-profile.component.scss b/src/app/views/auth/user-profile/user-profile.component.scss index e69de29..d5be5f9 100644 --- a/src/app/views/auth/user-profile/user-profile.component.scss +++ b/src/app/views/auth/user-profile/user-profile.component.scss @@ -0,0 +1,37 @@ +section { + display: flex; + flex-direction: column; + gap: 1.5rem; + + .profile-form { + display: flex; + flex-direction: column; + gap: .5rem; + + .profile-image { + position: relative; + width: 4rem; + height: 4rem; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + } + + .upload-btn { + position: absolute; + bottom: -0.5rem; + right: -1.75rem; + transform: scale(0.7); + } + } + + .button-group{ + display: flex; + gap: 0.5rem; + justify-content: flex-end; + } + } +} diff --git a/src/app/views/auth/user-profile/user-profile.component.ts b/src/app/views/auth/user-profile/user-profile.component.ts index 81914e6..ed09598 100644 --- a/src/app/views/auth/user-profile/user-profile.component.ts +++ b/src/app/views/auth/user-profile/user-profile.component.ts @@ -1,13 +1,59 @@ -import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; @Component({ selector: 'app-user-profile', standalone: true, - imports: [], + imports: [ + CommonModule, + FormsModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatIconModule, + MatSnackBarModule, + ], templateUrl: './user-profile.component.html', styleUrl: './user-profile.component.scss' }) export class UserProfileComponent { +logOut() { +throw new Error('Method not implemented.'); +} + @ViewChild('imageUpload') imageUpload!: ElementRef; + @ViewChild('userAvatar') userAvatar!: ElementRef; + + constructor(private snackBar: MatSnackBar) {} + + onUploadButtonClick() { + this.imageUpload.nativeElement.click(); + } + + onImageSelected(event: Event) { + const input = event.target as HTMLInputElement; + if (input.files && input.files[0]) { + const file = input.files[0]; + const reader = new FileReader(); + reader.onload = (e: ProgressEvent) => { + if (e.target && e.target.result && this.userAvatar) { + this.userAvatar.nativeElement.src = e.target.result as string; + } + }; + reader.readAsDataURL(file); + } + } + saveChanges() { + // Implement save functionality here + this.snackBar.open('Changes saved successfully', 'Close', { + duration: 3000, + }); + } } diff --git a/src/app/views/fireblog-page/fireblog-page.component.html b/src/app/views/fireblog-page/fireblog-page.component.html deleted file mode 100644 index 690c920..0000000 --- a/src/app/views/fireblog-page/fireblog-page.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
-

Fireblog Posts

- -
- -
diff --git a/src/app/views/fireblog-page/fireblog-page.component.scss b/src/app/views/fireblog-page/fireblog-page.component.scss deleted file mode 100644 index f817150..0000000 --- a/src/app/views/fireblog-page/fireblog-page.component.scss +++ /dev/null @@ -1,24 +0,0 @@ -@use '../../../partials/variables' as *; - -section{ - height: 100% !important; - display: flex; - align-items: center; - flex-direction: column; - gap: 1.25rem; - - - h2{ - color: $blueviolet; - font-family: $titlefont - } - - .posts-section { - flex: 1; - padding: 1.25rem; - padding-bottom: 7rem; - } - - - -} diff --git a/src/app/views/fireblog-page/fireblog-page.component.ts b/src/app/views/fireblog-page/fireblog-page.component.ts deleted file mode 100644 index 2f00307..0000000 --- a/src/app/views/fireblog-page/fireblog-page.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; -import { LikesComponent } from '../../components/likes/likes/likes.component'; -import { PostCardComponent } from "../../components/post-card/post-card.component"; -import { CreatePostComponent } from "../../components/create-post/create-post.component"; - - -@Component({ - selector: 'app-fireblog-page', - standalone: true, - imports: [LikesComponent, PostCardComponent, CreatePostComponent], - templateUrl: './fireblog-page.component.html', - styleUrl: './fireblog-page.component.scss' -}) -export class FireblogPageComponent { - -} diff --git a/src/app/views/fireblog/fireblog.component.html b/src/app/views/fireblog/fireblog.component.html index 914014f..95f8858 100644 --- a/src/app/views/fireblog/fireblog.component.html +++ b/src/app/views/fireblog/fireblog.component.html @@ -1,4 +1,3 @@
-
diff --git a/src/app/views/fireblog/fireblog.component.scss b/src/app/views/fireblog/fireblog.component.scss index a4d000d..d7a7fc8 100644 --- a/src/app/views/fireblog/fireblog.component.scss +++ b/src/app/views/fireblog/fireblog.component.scss @@ -6,7 +6,7 @@ main{ display: flex; justify-content: center; // align-items: center; - margin-top: 6rem; + // padding-top: 2rem; font-family: $bodyfont; } diff --git a/src/styles.scss b/src/styles.scss index cfcd3f6..e3c6a85 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -56,9 +56,9 @@ $fireblog-app-theme: mat.define-light-theme(( } body { - background-color: $whisper; + background-color: $whisper !important; width: 100%; - min-height: 100vh; + min-height: 100vh !important; font-family: $bodyfont; font-weight: 300; color: $palesky;