-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ac07262
commit 9fae16d
Showing
15 changed files
with
281 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/app/pages/article-detail/user/user-detail/user-detail.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
src/app/pages/user-profile/user-header/user-header.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <header> | ||
| <div class="profile-header"> | ||
| <span class="img-container"> | ||
| <img [src]="user.profile_image" class="crayons-avatar__image"> | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="profile-header-details"> | ||
| <h1>{{user.name}}</h1> | ||
| <p class="user-summary">{{user.summary}}</p> | ||
|
|
||
| <div class="profile-header-meta"> | ||
| <span class="item"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" | ||
| aria-labelledby="a3xkbc3f5m10eo7hk1nzp5q1qe2ucrgd" fill="currentColor"> | ||
| <title id="a3xkbc3f5m10eo7hk1nzp5q1qe2ucrgd">Location</title> | ||
| <path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1112.728 0zM12 13a2 2 0 100-4 2 2 0 000 4z"> | ||
| </path> | ||
| </svg> | ||
|
|
||
| {{user.location}} | ||
| </span> | ||
|
|
||
| <span class="item"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" | ||
| aria-labelledby="akim0j43z2hwtb3thdyfl4p0yzonmkz4" fill="currentColor"> | ||
| <title id="akim0j43z2hwtb3thdyfl4p0yzonmkz4">Joined</title> | ||
| <path | ||
| d="M8 6v3.999h3V6h2v3.999h3V6h2v3.999L19 10a3 3 0 012.995 2.824L22 13v1c0 1.014-.377 1.94-.999 2.645L21 21a1 1 0 01-1 1H4a1 1 0 01-1-1v-4.36a4.025 4.025 0 01-.972-2.182l-.022-.253L2 14v-1a3 3 0 012.824-2.995L5 10l1-.001V6h2zm11 6H5a1 1 0 00-.993.883L4 13v.971l.003.147a2 2 0 003.303 1.4c.363-.312.602-.744.674-1.218l.015-.153.005-.176c.036-1.248 1.827-1.293 1.989-.134l.01.134.004.147a2 2 0 003.992.031l.012-.282c.124-1.156 1.862-1.156 1.986 0l.012.282a2 2 0 003.99 0L20 14v-1a1 1 0 00-.883-.993L19 12zM7 1c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 11-2.898-.776C5.85 2.002 7 2.5 7 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C10.85 2.002 12 2.5 12 1zm5 0c1.32.871 1.663 2.088 1.449 2.888a1.5 1.5 0 01-2.898-.776C15.85 2.002 17 2.5 17 1z"> | ||
| </path> | ||
| </svg> | ||
|
|
||
| Joined on | ||
| <time datetime="2019-12-22T18:18:27Z" class="date">{{user.joined_at}}</time> | ||
| </span> | ||
|
|
||
| <a [href]="user.website_url" target="_blank" rel="noopener me" class="item"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" | ||
| aria-labelledby="aebnezdzwf5e4o5wmaxg1njyfr0rjm7f" fill="currentColor"> | ||
| <title id="aebnezdzwf5e4o5wmaxg1njyfr0rjm7f">Personal website</title> | ||
| <path | ||
| d="M10 6v2H5v11h11v-5h2v6a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"> | ||
| </path> | ||
| </svg> | ||
|
|
||
| {{user.website_url}} | ||
| </a> | ||
|
|
||
| <a href="https://github.com/{{user.github_username}}" target="_blank" rel="noopener me" | ||
| class="item p-1"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" | ||
| aria-labelledby="alew5grzyihmlmjw8r3tn7d8qlmmfyuy" class="crayons-icon shrink-0"> | ||
| <title id="alew5grzyihmlmjw8r3tn7d8qlmmfyuy">github website</title> | ||
| <path | ||
| d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"> | ||
| </path> | ||
| </svg> | ||
|
|
||
| </a> | ||
| <a href="https://twitter.com/{{user.twitter_username}}" target="_blank" rel="noopener me" | ||
| class="item p-1"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" | ||
| aria-labelledby="ad10oxf6c94z8heubxzlzwcqvveec5dw" class="crayons-icon shrink-0"> | ||
| <title id="ad10oxf6c94z8heubxzlzwcqvveec5dw">twitter website</title> | ||
| <path | ||
| d="M22.162 5.656a8.383 8.383 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 00-7.126 3.814 11.874 11.874 0 01-8.62-4.37 4.168 4.168 0 00-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 01-1.894-.523v.052a4.185 4.185 0 003.355 4.101 4.211 4.211 0 01-1.89.072A4.185 4.185 0 007.97 16.65a8.395 8.395 0 01-6.191 1.732 11.83 11.83 0 006.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.495 8.495 0 002.087-2.165l-.001-.001z" | ||
| fill="#65bbf2"></path> | ||
| </svg> | ||
|
|
||
| </a> | ||
| </div> | ||
| </div> | ||
| </header> |
64 changes: 64 additions & 0 deletions
64
src/app/pages/user-profile/user-header/user-header.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| :host { | ||
| display: block; | ||
| padding: 1rem; | ||
| padding-top: 2rem; | ||
| margin: 0 auto; | ||
| max-width: 1024px; | ||
| } | ||
|
|
||
| header { | ||
| border-radius: 5px; | ||
| background: #fff; | ||
| color: #08090a; | ||
| box-shadow: 0 0 0 1px rgba(8, 9, 10, 0.1); | ||
| overflow-wrap: anywhere; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profile-header { | ||
| position: relative; | ||
| } | ||
|
|
||
| img { | ||
| padding: 0.5rem; | ||
| width: 8rem; | ||
| height: 8rem; | ||
| border-radius: 100%; | ||
| } | ||
|
|
||
| .profile-header-details { | ||
| padding: 1.5rem; | ||
| h1 { | ||
| font-weight: 800; | ||
| font-size: 1.875rem; | ||
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
| .user-summary { | ||
| font-size: 1.125rem; | ||
| margin-bottom: 1rem; | ||
| color: #202408; | ||
| } | ||
| } | ||
|
|
||
| .profile-header-meta { | ||
| font-size: 0.875rem; | ||
| color: #64707d; | ||
| margin-bottom: 0.5rem; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 1.5rem; | ||
| .item { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| svg { | ||
| margin-right: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| color: #64707d; | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/app/pages/user-profile/user-header/user-header.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { UserHeaderComponent } from './user-header.component'; | ||
|
|
||
| describe('UserHeaderComponent', () => { | ||
| let component: UserHeaderComponent; | ||
| let fixture: ComponentFixture<UserHeaderComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ UserHeaderComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(UserHeaderComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
11 changes: 11 additions & 0 deletions
11
src/app/pages/user-profile/user-header/user-header.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { Component, Input, } from '@angular/core'; | ||
| import { UserDetails } from 'src/app/models/user'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-user-header', | ||
| templateUrl: './user-header.component.html', | ||
| styleUrls: ['./user-header.component.scss'], | ||
| }) | ||
| export class UserHeaderComponent { | ||
| @Input() user!: UserDetails; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <ng-container *rxLet="user$;let user"> | ||
| <app-user-header *ngIf="user" [user]="user"></app-user-header> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngFor="let article of articles$|push"> | ||
| <app-article-card [article]="article"></app-article-card> | ||
| </ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| app-article-card { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| max-width: 994px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { UserProfileComponent } from './user-profile.component'; | ||
|
|
||
| describe('UserProfileComponent', () => { | ||
| let component: UserProfileComponent; | ||
| let fixture: ComponentFixture<UserProfileComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [ UserProfileComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(UserProfileComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
Oops, something went wrong.