Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added avatar and relationship on floating header

This commit is contained in:
Nicolas Constant 2019-08-05 20:23:09 -04:00
parent c38db1d1e1
commit 433917fae4
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 45 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/stream/user-profile/user-profile.component.html
View File

@ -3,7 +3,31 @@
<div class="profile__floating-header" [ngStyle]="{'background-image':'url('+displayedAccount.header+')'}"
[class.profile__floating-header__activated]="showFloatingHeader">
<div class="profile__floating-header__inner">
FLOATING HEADER
<a href (click)="showAvatar(displayedAccount.avatar)" (auxclick)="openAccount()" title="open avatar">
<img class="profile__floating-header__avatar" [class.profile__disabled]="displayedAccount.moved"
src="{{displayedAccount.avatar}}" alt="header" />
</a>
<div class="profile__floating-header__follow" *ngIf="relationship && !displayedAccount.moved">
<app-waiting-animation *ngIf="loadingRelationShip"
class="waiting-icon profile-header__follow--waiting">
</app-waiting-animation>
<div *ngIf="!loadingRelationShip">
<button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
(click)="follow()" *ngIf="!relationship.following && !relationship.requested">
<fa-icon [icon]="faUserRegular"></fa-icon>
</button>
<button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
(click)="unfollow()" *ngIf="relationship.following">
<fa-icon [icon]="faUserCheck"></fa-icon>
</button>
<button class="profile-header__follow--button profile-header__follow--followed" title="pending"
(click)="unfollow()" *ngIf="relationship.requested">
<fa-icon [icon]="faHourglassHalf"></fa-icon>
</button>
</div>
</div>
</div>
</div>

21
src/app/components/stream/user-profile/user-profile.component.scss
View File

@ -35,7 +35,7 @@ $header-height: 160px;
// opacity: 0;
&__inner {
overflow: auto;
overflow: hidden;
height: 60px;
background-color: rgba(0, 0, 0, .45);
}
@ -46,6 +46,25 @@ $header-height: 160px;
transition-timing-function: ease-out;
top: 0px;
}
&__avatar {
position: absolute;
top: 6px;
left: 6px;
width: 44px;
border-radius: 2px;
}
&__follow {
// transition: all .4s;
position: absolute;
top: 6px;
right: 10px;
font-size: 28px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
}
&__moved {