diff --git a/webiu-ui/src/app/components/profile-card/profile-card.component.html b/webiu-ui/src/app/components/profile-card/profile-card.component.html index c0c97557..8706a3aa 100644 --- a/webiu-ui/src/app/components/profile-card/profile-card.component.html +++ b/webiu-ui/src/app/components/profile-card/profile-card.component.html @@ -1,26 +1,46 @@
- -

{{login}}

-

{{contributions}} contributions

-
-

{{followers}} followers

-

{{following}} followings

+ +

{{ login }}

+

{{ contributions }} contributions

+
+

{{ followers }} followers

+

{{ following }} followings

+
+
+
+ + + + + + + + + +
-
-
- - - - - - - - - - -
-
- - {{login}} + -
\ No newline at end of file +
+
diff --git a/webiu-ui/src/app/page/contributors/contributors.component.html b/webiu-ui/src/app/page/contributors/contributors.component.html index dc152fcd..55920fd6 100644 --- a/webiu-ui/src/app/page/contributors/contributors.component.html +++ b/webiu-ui/src/app/page/contributors/contributors.component.html @@ -1,31 +1,50 @@ -
-
- -
-

Search

- +
+
+
+
+ + +
-
-
-

Filter by Repository

-
- - - +
+ filter by repository +
-
-
+
+ +
+ +
+ + +
+ + + +
@for (profile of displayProfiles; track $index) { - - } + + }
-
\ No newline at end of file + diff --git a/webiu-ui/src/app/page/contributors/contributors.component.scss b/webiu-ui/src/app/page/contributors/contributors.component.scss index 58e61e0b..2e4377df 100644 --- a/webiu-ui/src/app/page/contributors/contributors.component.scss +++ b/webiu-ui/src/app/page/contributors/contributors.component.scss @@ -1,96 +1,217 @@ -.main { - margin-top: 5%; -} -.search-components { - display: flex; - justify-content: center; +:root { + --primary-blue: #0066ff; + --gray-100: #f5f5f5; + --gray-200: #e5e5e5; + --gray-900: #1a1a1a; } -.search-bar { - border-radius: 5px; - border: 2px solid var(--Gray-5, #E0E0E0); - background: var(--Gray-6, #F2F2F2); - justify-self: center; - width: 50%; - cursor: pointer; - padding: 1% 2%; - font-weight: bold; +.contributors-page { + max-width: 1200px; + margin: 30px auto; + padding: 0 20px; -} + .search-section { + margin-bottom: 24px; -.search-button { - background-color: #2f80ed; - color: white; - align-content: center; - display: flex; - cursor: pointer; - justify-content: center; - border-radius: 5px; - padding: 1% 2%; - margin-left: 2%; - font-weight: bold; -} - + .search-container { + width: 100%; + margin-bottom: 24px; + .search-wrapper { + display: flex; + gap: 12px; + width: 100%; -.repo-filter { - display: flex; - align-items: center; - margin: 3%; -} + .search-input { + flex: 1; + padding: 16px 24px; + border-radius: 12px; + border: 1px solid #e5e5e5; + background: #f5f5f5; + font-size: 16px; + color: #1a1a1a; + outline: none; + transition: all 0.2s ease; + + &::placeholder { + color: #1a1a1a; + opacity: 0.5; + } + + &:focus { + border-color: #0066ff; + background: #ffffff; + } + } + + .search-button { + display: flex; + align-items: center; + gap: 8px; + padding: 16px 24px; + background: #0066ff; + border-radius: 12px; + border: none; + color: white; + font-size: 16px; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + opacity: 0.9; + } + + img { + width: 20px; + height: 20px; + } + } + } + } + .filter-section { + display: flex; + align-items: center; + gap: 12px; + + span { + color: var(--gray-900); + font-size: 14px; + } + + .repository-select { + background-color: #e9f6ff; + } + + select { + padding: 8px 16px; + border: 1px solid var(--gray-200); + border-radius: 6px; + font-size: 14px; + cursor: pointer; + outline: none; + + &:focus { + border-color: var(--primary-blue); + } + } + } + .contributors-card-container { + margin-top: 40px; + } + } -.contributers-context { + .contributors-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 2%; - margin-top: 1%; -} - - -.repo-selection { - border-radius: 10px; - padding: 10px 20px; - margin: 2% 5%; - align-items: center; - + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 24px; + + .contributor-card { + padding: 24px; + border: 1px solid var(--gray-200); + border-radius: 12px; + transition: all 0.2s ease; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transform: translateY(-2px); + } + + .profile-image { + width: 80px; + height: 80px; + border-radius: 50%; + margin-bottom: 16px; + } + + .profile-info { + h3 { + margin: 0 0 8px 0; + color: var(--gray-900); + font-size: 18px; + } + + .contribution-count { + color: var(--gray-900); + opacity: 0.8; + margin-bottom: 12px; + font-size: 14px; + } + + .stats { + display: flex; + gap: 16px; + font-size: 14px; + color: var(--gray-900); + opacity: 0.7; + } + + .github-link { + display: flex; + align-items: center; + gap: 6px; + color: var(--gray-900); + text-decoration: none; + margin-top: 12px; + font-size: 14px; + + &:hover { + color: var(--primary-blue); + } + } + } + } + } } -.search-button { - margin-top: 0.1%; +.loader { + border: 8px solid #f3f3f3; + border-top: 8px solid #3498db; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; + margin: 0 auto; + display: block; } - -/* Media Queries */ -@media (max-width: 1200px) { - .contributers-context { - grid-template-columns: repeat(3, 1fr); - } - .box{ - width: 100%; - height: 100%; +@media screen and (max-width: 768px) { + .contributors-page { + .search-section { + .search-container { + .search-wrapper { + .search-button { + span { + display: none; + } + padding: 16px; + } + } + } } + } } -@media (max-width: 992px) { - .search-font{ - display: none; - } - .contributers-context { - grid-template-columns: repeat(2, 1fr); - } - .search-text{ - display: none; - } -} +@media screen and (max-width: 480px) { + .contributors-page { + margin: 20px auto; -@media (max-width: 500px) { - .contributers-context { - grid-template-columns: repeat(1, 1fr); + .contributors-grid { + grid-template-columns: 1fr; } - .search-components{ - margin-left: 10%; + + .search-section { + .search-container { + .search-wrapper { + flex-direction: column; + + .search-button { + width: 100%; + justify-content: center; + } + } + } } + } } - diff --git a/webiu-ui/src/app/page/contributors/contributors.component.ts b/webiu-ui/src/app/page/contributors/contributors.component.ts index 13a3fdeb..c95df926 100644 --- a/webiu-ui/src/app/page/contributors/contributors.component.ts +++ b/webiu-ui/src/app/page/contributors/contributors.component.ts @@ -1,4 +1,4 @@ -import { Component , OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { NavbarComponent } from '../../components/navbar/navbar.component'; import { Contributor, contributors } from '../../common/data/contributor'; @@ -9,7 +9,13 @@ import { CommmonUtilService } from '../../common/service/commmon-util.service'; @Component({ selector: 'app-contributors', standalone: true, - imports: [NavbarComponent, HttpClientModule , ReactiveFormsModule,CommonModule,ProfileCardComponent], + imports: [ + NavbarComponent, + HttpClientModule, + ReactiveFormsModule, + CommonModule, + ProfileCardComponent, + ], templateUrl: './contributors.component.html', styleUrl: './contributors.component.scss', }) @@ -17,70 +23,77 @@ export class ContributorsComponent implements OnInit { profiles?: Contributor[]; displayProfiles?: Contributor[]; searchText = new FormControl(''); - selectedRepo:string = ''; - allRepos:string[] =[]; + selectedRepo: string = ''; + allRepos: string[] = []; constructor( private http: HttpClient, - private commonUtil : CommmonUtilService, - ) { - - } + private commonUtil: CommmonUtilService + ) {} + + isLoading = true; - ngOnInit(){ - this.getProfiles() + ngOnInit() { + this.getProfiles(); } - - getProfiles(){ - this.http.get('http://localhost:5000/api/contributor/contributors').subscribe({ - next: (res)=>{ - if(res){ - this.profiles = res; - this.commonUtil.commonProfiles = this.profiles; - this.displayProfiles = this.profiles; - this.commonUtil.commonDisplayProfiles = this.displayProfiles; - this.allRepos = this.getUniqueRepos(); - this.commonUtil.commonAllRepos = this.allRepos - } - else{ - this.profiles = contributors.flatMap((profile: any)=>profile); - this.displayProfiles = this.profiles; - this.allRepos = this.getUniqueRepos() - } - }, - error: (error)=>{ - this.profiles = contributors.map((profile)=>profile); - console.log(error); - this.displayProfiles = this.profiles; - this.allRepos = this.getUniqueRepos() - } - }) - + getProfiles() { + this.http + .get('http://localhost:5000/api/contributor/contributors') + .subscribe({ + next: (res) => { + if (res) { + this.profiles = res; + this.commonUtil.commonProfiles = this.profiles; + this.displayProfiles = this.profiles; + this.commonUtil.commonDisplayProfiles = this.displayProfiles; + this.allRepos = this.getUniqueRepos(); + this.commonUtil.commonAllRepos = this.allRepos; + this.isLoading = false; + } else { + this.profiles = contributors.flatMap((profile: any) => profile); + this.displayProfiles = this.profiles; + this.allRepos = this.getUniqueRepos(); + this.isLoading = false; + } + }, + error: (error) => { + this.profiles = contributors.map((profile) => profile); + console.log(error); + this.displayProfiles = this.profiles; + this.allRepos = this.getUniqueRepos(); + this.isLoading = false; + }, + }); } getUniqueRepos(): string[] { - let array: string[] = [] - if( this.profiles?.length){ - const repos = this.profiles.flatMap(profile => profile.repos); - array = Array.from(new Set(repos)); + let array: string[] = []; + if (this.profiles?.length) { + const repos = this.profiles.flatMap((profile) => profile.repos); + array = Array.from(new Set(repos)); } - return array + return array; } - onRepoChange(event:Event){ + onRepoChange(event: Event) { const selectElement = event.target as HTMLSelectElement; this.selectedRepo = selectElement.value; this.filterProfiles(); } - filterProfiles() { - let searchTextValue:string= this.searchText.value?.toLocaleLowerCase().trim()||''; - this.displayProfiles = this.profiles?.filter( doc =>{ - return (searchTextValue?.length ? [doc.login].some(str => str.toLocaleLowerCase().includes(searchTextValue)): true) - && (this.selectedRepo?.length ? doc.repos.includes(this.selectedRepo):true) -  }) - -  } - + let searchTextValue: string = + this.searchText.value?.toLocaleLowerCase().trim() || ''; + this.displayProfiles = this.profiles?.filter((doc) => { + return ( + (searchTextValue?.length + ? [doc.login].some((str) => + str.toLocaleLowerCase().includes(searchTextValue) + ) + : true) && + (this.selectedRepo?.length + ? doc.repos.includes(this.selectedRepo) + : true) + ); + }); + } } - diff --git a/webiu-ui/src/app/page/projects/projects.component.scss b/webiu-ui/src/app/page/projects/projects.component.scss index d92dcf6e..7e558026 100644 --- a/webiu-ui/src/app/page/projects/projects.component.scss +++ b/webiu-ui/src/app/page/projects/projects.component.scss @@ -94,7 +94,7 @@ width: 50px; height: 50px; animation: spin 1s linear infinite; - margin: 0 auto; /* Center horizontally */ + margin: 0 auto; display: block; }