better positionning of avatar/name/relationship

src/app/components/stream/user-profile/user-profile.component.html

@@ -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" 
+            <app-status-user-context-menu class="profile-header__more" [displayedAccount]="displayedAccount">
-                [displayedAccount]="displayedAccount"></app-status-user-context-menu>
+            </app-status-user-context-menu>
         </div>
 
         <div class="profile-sub-header">
 
             <div *ngIf="displayedAccount">
-                <div *ngIf="hasNote" class="profile-description">
+                <div class="profile-name">
-                    <app-databinded-text class="profile-description__content" [textIsSelectable]="false" [text]="note"
+                    <h2 class="profile-name__link profile-name__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
-                        (accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
+                        title="{{displayedAccount.display_name}}"></h2>
-                    </app-databinded-text>
+                    <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"

src/app/components/stream/user-profile/user-profile.component.scss

@@ -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;
+            top: 14px;
-            left: 102px;
+            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%);