Skip to content

Frontend/jobit #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shaun050 wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Frontend/jobit #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6b77268
added home page design with proposed UI
jobitjose Oct 9, 2025
765e13d
removed screenshot
jobitjose Oct 10, 2025
89d7578
Merge branch 'main' of https://github.com/FakeOverFlow/FakeOverflow i…
jobitjose Oct 30, 2025
73b3208
Merge branch 'main' of https://github.com/FakeOverFlow/FakeOverflow i…
jobitjose Oct 30, 2025
69ab7a9
home page design has been updated
jobitjose Nov 13, 2025
5b9e8f9
create new post page, maintained home page design consistancy
jobitjose Nov 13, 2025
f02dfd5
created my questions section to manage the users questions
jobitjose Nov 13, 2025
118af12
created community stats component and trending-tags component
jobitjose Nov 13, 2025
7c02dc2
updated the trending tags css file, corrected the alighment
jobitjose Nov 13, 2025
d992664
Created profile page
jobitjose Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/fakeoverflow-angular/src/app/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export const routes: Routes = [
{ path: 'post', loadComponent: () => import('./pages/home/home/CreatePost/post').then(m => m.PostComponent) },
{ path: 'update', loadComponent: () => import('./pages/home/home/UpdatePost/update').then(m => m.UpdateComponent) },
{ path: 'detail', loadComponent: () => import('./pages/home/home/PostDetails/details').then(m => m.DetailsComponent) },
{ path: 'personalhome', loadComponent: () => import('./pages/home/home/PersonalQuestionsHome/personalHome').then(m => m.PersonalHome) },
{ path: 'my-questions', loadComponent: () => import('./pages/home/home/MyQuestions/myQuestions').then(m => m.MyQuestions) },
{ path: 'profile', loadComponent: () => import('./pages/home/home/Profile/profile').then(m => m.Profile) },

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', redirectTo: 'home' }
Expand Down
132 changes: 106 additions & 26 deletions apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,110 @@
<app-navbar></app-navbar>
<div class="min-h-screen bg-gray-50">
<div class="max-w-[900px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-3xl font-bold text-gray-900 mb-6">Ask question</h1>

<form #f="ngForm" (ngSubmit)="submit(f)" novalidate class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
<input name="title" ngModel required minlength="10" class="w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Be specific">
<div class="mt-1 text-sm text-red-600" *ngIf="f.controls['title']?.touched && f.controls['title']?.invalid">Enter at least 10 characters</div>
</div>

<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Body</label>
<textarea name="body" ngModel required minlength="20" rows="8" class="w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe your question"></textarea>
<div class="mt-1 text-sm text-red-600" *ngIf="f.controls['title']?.touched && f.controls['title']?.invalid">Enter at least 20 characters</div>
</div>
<!--
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
<input name="tags" ngModel class="w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. politics, trending, tech">
</div>
-->
<div class="flex items-center justify-between">
<button type="submit" [disabled]="f.invalid || loading" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg disabled:opacity-50">Post your question</button>
<div *ngIf="submitted" class="text-sm text-green-700">Submitted</div>
</div>
</form>
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="flex flex-col lg:flex-row gap-6">

<!-- Main Content -->
<main class="flex-1 min-w-0">
<!-- Back Button -->
<div class="mb-4">
<a routerLink="/home" class="inline-flex items-center gap-2 text-sm text-[#3a5b9d] hover:text-[#2d4879] font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Back to Questions
</a>
</div>

<!-- Header with Glass Effect - matching home page -->
<div class="relative overflow-hidden bg-white/90 backdrop-blur-sm rounded-lg p-6 mb-6 shadow-sm border border-gray-200">
<div class="absolute inset-0 bg-gradient-to-r from-[#3a5b9d]/5 via-transparent to-[#3a5b9d]/5"></div>
<div class="relative">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Ask a Question</h1>
<p class="text-sm text-gray-600">Get help from the community</p>
</div>
</div>

<!-- Form Card - matching home page glass effect -->
<form #f="ngForm" (ngSubmit)="submit(f)" novalidate class="relative overflow-hidden bg-white/80 backdrop-blur-sm rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
<div class="absolute inset-0 bg-gradient-to-br from-[#3a5b9d]/3 via-transparent to-white/5"></div>

<div class="relative space-y-5">
<!-- Title Field -->
<div>
<label class="block text-sm font-semibold text-gray-800 mb-2">
Title <span class="text-red-500">*</span>
</label>
<p class="text-xs text-gray-600 mb-2">Be specific and imagine you're asking a question to another person.</p>
<input
name="title"
ngModel
required
minlength="10"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3a5b9d] focus:border-transparent bg-white transition-all"
placeholder="e.g., How do I implement async/await in TypeScript?">
<div class="mt-2 text-sm text-red-600 font-medium" *ngIf="f.controls['title']?.touched && f.controls['title']?.invalid">
Title must be at least 10 characters
</div>
</div>

<!-- Body Field -->
<div>
<label class="block text-sm font-semibold text-gray-800 mb-2">
What are the details of your problem? <span class="text-red-500">*</span>
</label>
<p class="text-xs text-gray-600 mb-2">Introduce the problem and expand on what you put in the title. Minimum 20 characters.</p>
<textarea
name="body"
ngModel
required
minlength="20"
rows="10"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3a5b9d] focus:border-transparent bg-white transition-all resize-y"
placeholder="Provide more context, what you've tried, and any error messages..."></textarea>
<div class="mt-2 text-sm text-red-600 font-medium" *ngIf="f.controls['body']?.touched && f.controls['body']?.invalid">
Body must be at least 20 characters
</div>
</div>

<!-- Tags Field -->
<div>
<label class="block text-sm font-semibold text-gray-800 mb-2">Tags</label>
<p class="text-xs text-gray-600 mb-2">Add up to 5 tags to describe what your question is about. Separate with commas.</p>
<input
name="tags"
ngModel
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3a5b9d] focus:border-transparent bg-white transition-all"
placeholder="e.g., javascript, angular, typescript">
</div>

<!-- Submit Section -->
<div class="flex items-center justify-between pt-5 border-t border-gray-200">
<button
type="submit"
[disabled]="f.invalid || loading"
class="px-6 py-3 bg-[#3a5b9d] hover:bg-[#2d4879] text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
<span *ngIf="!loading">Post Your Question</span>
<span *ngIf="loading">Posting...</span>
</button>
<div *ngIf="submitted" class="flex items-center gap-2 text-sm font-medium text-green-700 bg-green-50 px-4 py-2 rounded-lg border border-green-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
Question Posted!
</div>
</div>
</div>
</form>
</main>

<!-- Sidebar - matching home page -->
<aside class="w-full lg:w-80 flex-shrink-0">
<div class="lg:sticky lg:top-6 space-y-4">
<app-community-stats></app-community-stats>
<app-trending-tags></app-trending-tags>
</div>
</aside>

</div>
</div>
</div>
5 changes: 4 additions & 1 deletion apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, NgForm } from '@angular/forms';
import { RouterLink } from '@angular/router';
import {Navbar} from '@shared/navbar/navbar';
import { CommunityStats } from '@shared/community-stats/community-stats';
import { TrendingTags } from '@shared/trending-tags/trending-tags';

@Component({
selector: 'app-post',
standalone: true,
imports: [Navbar, CommonModule, FormsModule],
imports: [Navbar, CommonModule, FormsModule, RouterLink, CommunityStats, TrendingTags],
templateUrl: './post.html',
styleUrl: './post.scss'
})
Expand Down
170 changes: 170 additions & 0 deletions apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<app-navbar></app-navbar>
<div class="min-h-screen bg-gray-50">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="flex flex-col lg:flex-row gap-6">
<main class="flex-1 min-w-0">
<!-- Back Button -->
<div class="mb-4">
<a routerLink="/home" class="inline-flex items-center gap-2 text-sm text-[#3a5b9d] hover:text-[#2d4879] font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Back to Questions
</a>
</div>

<!-- Header with Glass Effect -->
<div class="relative overflow-hidden bg-white/90 backdrop-blur-sm rounded-lg p-6 mb-6 shadow-sm border border-gray-200">
<div class="absolute inset-0 bg-gradient-to-r from-[#3a5b9d]/5 via-transparent to-[#3a5b9d]/5"></div>
<div class="relative flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">My Questions</h1>
<p class="text-sm text-gray-600">7 questions posted</p>
</div>
<div class="flex gap-3 w-full sm:w-auto">
<a routerLink="/post" class="flex-1 sm:flex-none px-6 py-2.5 bg-[#3a5b9d] hover:bg-[#2d4879] text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
<span class="flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
New Question
</span>
</a>
</div>
</div>
</div>

<!-- Filter Tabs -->
<div class="flex items-center gap-2 mb-6 bg-white/80 backdrop-blur-sm rounded-lg p-1.5 shadow-sm border border-gray-200">
<button class="px-5 py-2 text-sm font-medium bg-[#3a5b9d] text-white rounded-md shadow-sm transition-all">All (7)</button>
<button class="px-5 py-2 text-sm font-medium text-gray-600 hover:text-[#3a5b9d] hover:bg-gray-50 rounded-md transition-all">Answered (5)</button>
<button class="px-5 py-2 text-sm font-medium text-gray-600 hover:text-[#3a5b9d] hover:bg-gray-50 rounded-md transition-all">Unanswered (2)</button>
</div>

<!-- Questions List -->
<div class="space-y-3">

<!-- Question Item -->
<div class="flex gap-4 p-4 bg-white/80 backdrop-blur-sm rounded-lg border border-gray-200 shadow-sm hover:shadow-md hover:border-[#3a5b9d]/30 transition-all duration-200">
<!-- Stats Column -->
<div class="flex flex-col gap-3 text-center min-w-[100px] sm:min-w-[120px]">
<div class="flex flex-col">
<span class="text-base font-semibold text-gray-700">12</span>
<span class="text-xs text-gray-600">votes</span>
</div>
<div class="flex flex-col">
<span class="text-base font-semibold text-gray-700">3</span>
<span class="text-xs text-gray-600">answers</span>
</div>
<div class="flex flex-col">
<span class="text-base font-normal text-gray-600">245</span>
<span class="text-xs text-gray-600">views</span>
</div>
</div>

<!-- Content Column -->
<div class="flex-1 min-w-0">
<h3 class="text-[17px] font-normal text-[#3a5b9d] hover:text-[#2d4879] cursor-pointer mb-2 leading-snug">
Global Markets Rebound as Investors Anticipate Fed Rate Cut
</h3>
<p class="text-sm text-gray-700 mb-3 line-clamp-2">
Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December...
</p>
<div class="flex flex-wrap items-center gap-2 mb-3">
<span class="inline-flex px-2.5 py-1 bg-[#e1ecf4] text-[#39739d] rounded-sm text-xs hover:bg-[#d1e5f1] cursor-pointer">Markets</span>
<span class="inline-flex px-2.5 py-1 bg-[#e1ecf4] text-[#39739d] rounded-sm text-xs hover:bg-[#d1e5f1] cursor-pointer">Finance</span>
<span class="inline-flex px-2.5 py-1 bg-[#e1ecf4] text-[#39739d] rounded-sm text-xs hover:bg-[#d1e5f1] cursor-pointer">Technology</span>
</div>
<div class="flex items-center justify-between pt-3 border-t border-gray-100">
<span class="text-xs text-gray-600">Posted 2 days ago</span>
<div class="flex items-center gap-2">
<a routerLink="/detail" class="px-3 py-1.5 text-xs font-medium text-[#3a5b9d] hover:bg-blue-50 rounded transition-colors inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
View
</a>
<button class="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded transition-colors inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>

<!-- Question Item 2 -->
<div class="flex gap-4 p-4 bg-white/80 backdrop-blur-sm rounded-lg border border-gray-200 shadow-sm hover:shadow-md hover:border-[#3a5b9d]/30 transition-all duration-200">
<div class="flex flex-col gap-3 text-center min-w-[100px] sm:min-w-[120px]">
<div class="flex flex-col">
<span class="text-base font-semibold text-gray-700">8</span>
<span class="text-xs text-gray-600">votes</span>
</div>
<div class="flex flex-col">
<span class="text-base font-semibold text-gray-700">2</span>
<span class="text-xs text-gray-600">answers</span>
</div>
<div class="flex flex-col">
<span class="text-base font-normal text-gray-600">156</span>
<span class="text-xs text-gray-600">views</span>
</div>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-[17px] font-normal text-[#3a5b9d] hover:text-[#2d4879] cursor-pointer mb-2 leading-snug">
How to implement state management in Angular 18?
</h3>
<p class="text-sm text-gray-700 mb-3 line-clamp-2">
I'm building a medium-sized Angular application and wondering about best practices for state management...
</p>
<div class="flex flex-wrap items-center gap-2 mb-3">
<span class="inline-flex px-2.5 py-1 bg-[#e1ecf4] text-[#39739d] rounded-sm text-xs hover:bg-[#d1e5f1] cursor-pointer">angular</span>
<span class="inline-flex px-2.5 py-1 bg-[#e1ecf4] text-[#39739d] rounded-sm text-xs hover:bg-[#d1e5f1] cursor-pointer">state-management</span>
</div>
<div class="flex items-center justify-between pt-3 border-t border-gray-100">
<span class="text-xs text-gray-600">Posted 3 days ago</span>
<div class="flex items-center gap-2">
<a routerLink="/detail" class="px-3 py-1.5 text-xs font-medium text-[#3a5b9d] hover:bg-blue-50 rounded transition-colors inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
View
</a>
<button class="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded transition-colors inline-flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>

</div>

<!-- Pagination -->
<div class="flex justify-center mt-8">
<nav class="flex items-center gap-1">
<button class="px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 transition-colors text-sm">Prev</button>
<button class="px-3 py-1.5 bg-[#3a5b9d] text-white border border-[#3a5b9d] rounded font-medium transition-colors text-sm">1</button>
<button class="px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 transition-colors text-sm">2</button>
<button class="px-3 py-1.5 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 transition-colors text-sm">Next</button>
</nav>
</div>
</main>

<!-- Sidebar - matching home page -->
<aside class="w-full lg:w-80 flex-shrink-0">
<div class="lg:sticky lg:top-6 space-y-4">
<app-community-stats></app-community-stats>
<app-trending-tags></app-trending-tags>
</div>
</aside>

</div>
</div>
</div>
0 ...e/PersonalQuestionsHome/personalHome.scss → ...es/home/home/MyQuestions/myQuestions.scss
View file
Open in desktop
File renamed without changes.
Loading