now displaying a user profile (early stage)
This commit is contained in:
Nicolas Constant
parent
b175137149
commit
81ae99cc7f
|
|
@ -4,10 +4,10 @@
|
|||
<a href class="overlay-previous">PREV</a>
|
||||
<a href class="overlay-next">NEXT</a>
|
||||
</div>
|
||||
<div class="stream-overlay__title">
|
||||
<!-- <div class="stream-overlay__title">
|
||||
Account
|
||||
</div>
|
||||
<app-user-profile></app-user-profile>
|
||||
<app-hashtag></app-hashtag>
|
||||
<app-thread></app-thread>
|
||||
</div> -->
|
||||
<app-user-profile *ngIf="browseAccount" [currentAccount]="browseAccount"></app-user-profile>
|
||||
<app-hashtag *ngIf="browseHashtag"></app-hashtag>
|
||||
<app-thread *ngIf="browseThread"></app-thread>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
// z-index: 50;
|
||||
width: $stream-column-width;
|
||||
height: calc(100%);
|
||||
background-color: rgba(#ff0000, 0.3);
|
||||
background-color: $column-color;
|
||||
|
||||
|
||||
// margin: 0 0 0 $stream-column-separator;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { Account } from "../../../services/models/mastodon.interfaces";
|
||||
|
||||
@Component({
|
||||
selector: 'app-stream-overlay',
|
||||
|
|
@ -6,9 +7,36 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
|||
styleUrls: ['./stream-overlay.component.scss']
|
||||
})
|
||||
export class StreamOverlayComponent implements OnInit {
|
||||
private account: Account;
|
||||
private thread: string;
|
||||
private hashtag: string;
|
||||
|
||||
@Output() closeOverlay = new EventEmitter();
|
||||
|
||||
@Input('browseAccount')
|
||||
set browseAccount(account: Account) {
|
||||
this.account = account;
|
||||
}
|
||||
get browseAccount(): Account{
|
||||
return this.account;
|
||||
}
|
||||
|
||||
@Input('browseThread')
|
||||
set browseThread(thread: string) {
|
||||
this.thread = thread;
|
||||
}
|
||||
get browseThread(): string{
|
||||
return this.thread;
|
||||
}
|
||||
|
||||
@Input('browseHashtag')
|
||||
set browseHashtag(hashtag: string) {
|
||||
this.hashtag = hashtag;
|
||||
}
|
||||
get browseHashtag(): string{
|
||||
return this.hashtag;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<div class="stream-column">
|
||||
|
||||
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"></app-stream-overlay>
|
||||
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive"
|
||||
(closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse"></app-stream-overlay>
|
||||
|
||||
<div class="stream-column__stream-header">
|
||||
<a href title="return to top" (click)="goToTop()">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<p>
|
||||
user-profile works!
|
||||
</p>
|
||||
<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>
|
||||
<div class="profile-description" *ngIf="hasNote">
|
||||
<p innerHTML="{{account.note}}"></p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
@import "variables";
|
||||
.profile-header {
|
||||
position: relative;
|
||||
height: 140px;
|
||||
overflow: hidden; // background-color: 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;
|
||||
}
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 80px;
|
||||
border-radius: 50%; // border: 1px solid black;
|
||||
// background-color: black;
|
||||
}
|
||||
&__display-name {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 115px;
|
||||
// font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
&__fullhandle {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
left: 15px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-description {
|
||||
padding: 5px 10px 0 10px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
|
@ -1,15 +1,26 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Account } from "../../../services/models/mastodon.interfaces";
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-profile',
|
||||
templateUrl: './user-profile.component.html',
|
||||
styleUrls: ['./user-profile.component.scss']
|
||||
selector: 'app-user-profile',
|
||||
templateUrl: './user-profile.component.html',
|
||||
styleUrls: ['./user-profile.component.scss']
|
||||
})
|
||||
export class UserProfileComponent implements OnInit {
|
||||
account: Account;
|
||||
hasNote: boolean;
|
||||
|
||||
constructor() { }
|
||||
@Input('currentAccount')
|
||||
set currentAccount(account: Account) {
|
||||
this.account = account;
|
||||
this.hasNote = account && account.note && account.note !== '<p></p>';
|
||||
console.warn('currentAccount');
|
||||
console.warn(account);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue