Added profile-header component. Implemented follower feature
This commit is contained in:
56
src/app/users/components/profile-header/profile-header.html
Normal file
56
src/app/users/components/profile-header/profile-header.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<div class="card">
|
||||
|
||||
<div class="card-image">
|
||||
<div class="image app-profile-header-cover" [class.is-skeleton]="!userStore.isUserLoaded()">
|
||||
<!-- Todo change cover image -->
|
||||
<img src="https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<!-- Avatar -->
|
||||
<div class="image is-128x128 app-profile-header-avatar block" [class.is-skeleton]="!userStore.isUserLoaded()">
|
||||
<img [src]="userStore.getAvatarUrl()" [alt]="userStore.getUserFullName()" class="is-rounded">
|
||||
</div>
|
||||
<!-- Main -->
|
||||
<div class="block">
|
||||
<div class="level">
|
||||
<!-- Name -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="block app-profile-name">
|
||||
<p class="title is-3" [class.is-skeleton]="!userStore.isUserLoaded()">{{ userStore.getUserFullName() }}</p>
|
||||
<p class="subtitle is-5" [class.is-skeleton]="!userStore.isUserLoaded()">{{ userStore.user()?.headline }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Featured -->
|
||||
@if (userStore.isUserLoaded()){
|
||||
<div class="level-right">Featured</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="block">
|
||||
@if (userStore.isCurrentUser()){
|
||||
<div class="buttons">
|
||||
<button type="button" matButton="outlined">Edit profile</button>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="buttons">
|
||||
@if (followerStore.isLoaded()){
|
||||
@if (followerStore.isSubscribed()){
|
||||
<!-- Subscribed -->
|
||||
<button type="button" matButton="outlined" (click)="onUnfollowClicked()">Unfollow</button>
|
||||
} @else {
|
||||
<!-- Not subscribed -->
|
||||
<button type="button" matButton="filled" (click)="onFollowClicked()">Follow</button>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user