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

better display of user statuses in profil

This commit is contained in:
Nicolas Constant 2018-11-01 00:55:55 -04:00
parent c3fedcd1de
commit 6530ad7bde
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 107 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/components/stream/stream.component.scss
View File

@ -1,4 +1,5 @@
@import "variables";
@import "commons";
.stream-column {
position: relative;
@ -31,25 +32,25 @@
}
}
.flexcroll {
scrollbar-face-color: #08090d;
scrollbar-shadow-color: #08090d;
scrollbar-highlight-color: #08090d;
scrollbar-3dlight-color: #08090d;
scrollbar-darkshadow-color: #08090d;
scrollbar-track-color: #08090d;
scrollbar-arrow-color: #08090d;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
// background: #08090d;
background: lighten($color-primary, 5);
// -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}
// .flexcroll {
// scrollbar-face-color: #08090d;
// scrollbar-shadow-color: #08090d;
// scrollbar-highlight-color: #08090d;
// scrollbar-3dlight-color: #08090d;
// scrollbar-darkshadow-color: #08090d;
// scrollbar-track-color: #08090d;
// scrollbar-arrow-color: #08090d;
// &::-webkit-scrollbar {
// width: 7px;
// }
// &::-webkit-scrollbar-thumb {
// -webkit-border-radius: 0px;
// border-radius: 0px;
// // background: #08090d;
// background: lighten($color-primary, 5);
// // -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
// }
// }
.stream-overlay {
position: absolute;

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

@ -1,20 +1,22 @@
<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 class="profile flexcroll">
<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>
<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>
<!-- <p innerHTML="{{account.note}}"></p> -->
</div>
<div class="profile-statuses">
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
<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>
<!-- <p innerHTML="{{account.note}}"></p> -->
</div>
<div class="profile-statuses">
<app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
<div *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)"></app-status>
<div *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)"></app-status>
</div>
</div>
</div>

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

@ -1,56 +1,56 @@
@import "variables";
@import "commons";
.profile {
overflow: auto;
height: calc(100% - 30px);
.profile-header {
background-size: cover;
position: relative;
// height: 140px;
overflow: hidden; // background-color: black;
border-bottom: 1px solid black;
& h2 {
font-size: $default-font-size;
}
&__inner{
height: 160px;
background-color: rgba(0, 0, 0, .45);
&-header {
background-size: cover;
position: relative; // height: 140px;
overflow: hidden; // background-color: black;
border-bottom: 1px solid black;
& h2 {
font-size: $default-font-size;
}
&__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;
left: 15px;
width: 80px;
border-radius: 50%; // border: 1px solid black;
// background-color: black;
}
&__display-name {
position: absolute;
top: 105px;
left: 15px;
color: white;
}
&__fullhandle {
position: absolute;
top: 130px;
left: 15px;
color: white;
}
}
// &__header {
// position: absolute;
// // width: calc(100%);
// width: calc(100%);
// height: auto;
// float: left;
// display: block;
// opacity: 0.3;
// }
&__avatar {
position: absolute;
top: 15px;
left: 15px;
width: 80px;
border-radius: 50%; // border: 1px solid black;
// background-color: black;
&-description {
padding: 10px 10px 15px 10px;
font-size: 13px;
border-bottom: 1px solid black;
}
&__display-name {
position: absolute;
top: 105px;
left: 15px;
color: white;
}
&__fullhandle {
position: absolute;
top: 130px;
left: 15px;
color: white;
}
}
.profile-description {
padding: 10px 10px 15px 10px;
font-size: 13px;
border-bottom: 1px solid black;
}

20
src/sass/_commons.scss
View File

@ -2,4 +2,24 @@
width: 40px;
display: block;
margin: 5px auto;
}
.flexcroll {
scrollbar-face-color: #08090d;
scrollbar-shadow-color: #08090d;
scrollbar-highlight-color: #08090d;
scrollbar-3dlight-color: #08090d;
scrollbar-darkshadow-color: #08090d;
scrollbar-track-color: #08090d;
scrollbar-arrow-color: #08090d;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
// background: #08090d;
background: lighten($color-primary, 5);
// -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}