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

added names in floating header

This commit is contained in:
Nicolas Constant 2019-08-06 20:13:40 -04:00
parent e51973df54
commit e77858e021
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,12 @@
src="{{displayedAccount.avatar}}" alt="header" />
</a>
<div class="profile__floating-header__names">
<h2 class="profile__floating-header__names__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
title="{{displayedAccount.display_name}}"></h2>
<a class="profile__floating-header__names__fullhandle" href="{{displayedAccount.url}}" target="_blank" title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a>
</div>
<div class="profile__floating-header__follow" *ngIf="relationship && !displayedAccount.moved">
<app-waiting-animation *ngIf="loadingRelationShip"
class="waiting-icon profile-header__follow--waiting">

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

@ -4,6 +4,8 @@
$validated-font-color: #4fde23;
$validated-background: #164109;
$header-height: 160px;
$full-alias-color: rgb(201, 201, 201);
$full-alias-color-hover: white;
.outer-profile {
height: calc(100%);
@ -59,6 +61,34 @@ $header-height: 160px;
border-radius: 2px;
}
&__names {
position: absolute;
top: 6px;
left: 56px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 46px;
width: calc(100% - 44px - 65px);
padding: 3px 5px 0px 3px;
&__display-name {
font-size: 15px;
color: white;
margin: 0 0 2px 0;
}
&__fullhandle {
transition: all .2s;
font-size: 15px;
color: $full-alias-color;
&:hover {
color: $full-alias-color-hover;
}
}
}
&__follow {
// transition: all .4s;
position: absolute;
@ -135,14 +165,19 @@ $header-height: 160px;
}
&__fullhandle a {
transition: all .2s;
position: absolute;
top: 130px;
left: 15px;
width: calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
color: $full-alias-color;
&:hover {
color: $full-alias-color-hover;
}
}
&__follow {
// transition: all .4s;