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

better positionning of avatar/name/relationship

This commit is contained in:
Nicolas Constant 2019-08-10 12:59:08 -04:00
parent 5d61c44700
commit ff02dea006
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,10 +54,10 @@
<img class="profile-header__avatar" [class.profile__disabled]="displayedAccount.moved"
src="{{displayedAccount.avatar}}" alt="header" />
</a>
<h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
<!-- <h2 class="profile-header__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
title="{{displayedAccount.display_name}}"></h2>
<h2 class="profile-header__fullhandle"><a href="{{displayedAccount.url}}" target="_blank"
title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2> -->
<div class="profile-header__follow" *ngIf="relationship && !displayedAccount.moved">
<app-waiting-animation *ngIf="loadingRelationShip"
@ -86,23 +86,25 @@
<div class="profile-header__state--data" *ngIf="relationship.blocked_by">blocks you</div>
<div class="profile-header__state--data" *ngIf="relationship.domain_blocking">domain blocked</div>
<div class="profile-header__state--data" *ngIf="relationship.muting">muted</div>
<div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications
<div class="profile-header__state--data" *ngIf="relationship.endorsed">endorsed</div>
<!-- <div class="profile-header__state--data" *ngIf="relationship.muting_notifications">notifications
muted
</div>
</div> -->
</div>
</div>
<app-status-user-context-menu class="profile-header__more"
[displayedAccount]="displayedAccount"></app-status-user-context-menu>
<app-status-user-context-menu class="profile-header__more" [displayedAccount]="displayedAccount">
</app-status-user-context-menu>
</div>
<div class="profile-sub-header">
<div *ngIf="displayedAccount">
<div *ngIf="hasNote" class="profile-description">
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
</app-databinded-text>
<div class="profile-name">
<h2 class="profile-name__link profile-name__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
title="{{displayedAccount.display_name}}"></h2>
<h2 class="profile-name__link profile-name__fullhandle"><a href="{{displayedAccount.url}}" target="_blank"
title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
</div>
<!-- <div class="profile__extra-info">
@ -133,6 +135,12 @@
</div>
</div>
</div>
<div *ngIf="hasNote" class="profile-description">
<app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
(accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
</app-databinded-text>
</div>
</div>
<div class="profile__extra-info profile__extra-info__preparefloating" *ngIf="!isLoading"

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

@ -3,7 +3,7 @@
@import "commons";
$validated-font-color: #4fde23;
$validated-background: #164109;
$header-height: 160px;
$header-height: 140px;
$full-alias-color: rgb(201, 201, 201);
$full-alias-color-hover: white;
@ -135,7 +135,7 @@ $full-alias-color-hover: white;
background-size: cover;
position: relative;
overflow: hidden; // background-color: black;
border-bottom: 1px solid black;
//border-bottom: 1px solid black;
& h2 {
font-size: $default-font-size;
@ -149,37 +149,12 @@ $full-alias-color-hover: white;
&__avatar {
position: absolute;
top: 12px;
bottom: 12px;
left: 12px;
width: 80px;
border-radius: 3px;
}
&__display-name {
position: absolute;
top: 105px;
left: 15px;
width: calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
color: white;
}
&__fullhandle a {
transition: all .2s;
position: absolute;
top: 130px;
left: 15px;
width: calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
color: $full-alias-color;
&:hover {
color: $full-alias-color-hover;
}
}
&__follow {
// transition: all .4s;
position: absolute;
@ -211,10 +186,17 @@ $full-alias-color-hover: white;
&__state {
position: absolute;
top: 13px;
left: 102px;
top: 14px;
left: 14px;
top: 11px;
left: 11px;
font-size: 12px;
max-width: 150px;
// max-width: 150px;
width: 265px;
//outline: 1px solid greenyellow;
&--data {
display: inline-block;
@ -242,10 +224,40 @@ $full-alias-color-hover: white;
// border: 1px solid greenyellow;
}
&-name {
padding: 9px 10px 10px 10px;
width: calc(100%);
&__link {
width: calc(100%);
font-size: 15px;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
&:not(:last-child){
margin-bottom: 3px;
}
}
&__display-name {
color: white;
}
&__fullhandle a {
transition: all .2s;
color: $full-alias-color;
&:hover {
color: $full-alias-color-hover;
}
}
}
&-description {
padding: 10px 10px 15px 10px;
font-size: 13px;
border-bottom: 1px solid black;
// border-bottom: 1px solid black;
&__content {
width: calc(100%);