57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
<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>
|