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

better display of name and user background image in profil

This commit is contained in:
Nicolas Constant 2018-11-01 00:05:34 -04:00
parent 4f02759204
commit 8f160d71e5
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,13 @@
<div class="profile-header">
<img class="profile-header__header" src="{{account.header}}" alt="header" />
<img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
<h2 class="profile-header__display-name">{{account.display_name}}</h2>
<h2 class="profile-header__fullhandle">@{{account.acct}}</h2>
<div class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
<div class="profile-header__inner">
<!-- <img class="profile-header__header" src="{{account.header}}" alt="header" /> -->
<img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
<h2 class="profile-header__display-name">{{account.display_name}}</h2>
<h2 class="profile-header__fullhandle">@{{account.acct}}</h2>
</div>
</div>
<div class="profile-description" *ngIf="hasNote">
<app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note" (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)" ></app-databinded-text>
<app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note" (accountSelected)="accountSelected($event)"
(hashtagSelected)="hashtagSelected($event)"></app-databinded-text>
<!-- <p innerHTML="{{account.note}}"></p> -->
</div>

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

@ -1,23 +1,30 @@
@import "variables";
.profile-header {
background-size: cover;
position: relative;
height: 140px;
// height: 140px;
overflow: hidden; // background-color: black;
border-bottom: 1px solid black;
border-bottom: 1px solid black;
& h2 {
font-size: $default-font-size;
}
&__header {
position: absolute;
// width: calc(100%);
width: calc(100%);
height: auto;
float: left;
display: block;
opacity: 0.3;
&__inner{
height: 160px;
background-color: rgba(0, 0, 0, .45);
}
// &__header {
// position: absolute;
// // width: calc(100%);
// width: calc(100%);
// height: auto;
// float: left;
// display: block;
// opacity: 0.3;
// }
&__avatar {
position: absolute;
top: 15px;
@ -28,21 +35,20 @@
}
&__display-name {
position: absolute;
top: 45px;
left: 115px;
// font-weight: bold;
top: 105px;
left: 15px;
color: white;
}
&__fullhandle {
position: absolute;
top: 105px;
top: 130px;
left: 15px;
color: white;
}
}
.profile-description {
padding: 5px 10px 0 10px;
padding: 10px 10px 15px 10px;
font-size: 13px;
border-bottom: 1px solid black;
}