Tune the layout and make the root event render with same style

This commit is contained in:
SondreB 2022-12-31 18:31:01 +01:00
parent 382469ab25
commit 3f4edb3e30
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
3 changed files with 31 additions and 20 deletions

View File

@ -1,7 +1,7 @@
<!-- <mat-progress-bar *ngIf="!events || events.length == 0" mode="indeterminate"></mat-progress-bar> -->
<div class="feed-page">
<div class="parent-events events" *ngIf="thread.root$ | async as event">
<div class="root-event events" *ngIf="thread.root$ | async as event">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
@ -12,20 +12,22 @@
</span>
</div>
<div class="feed-page" *ngIf="thread.before$ | async as events">
<div class="events" *ngFor="let event of events; trackBy: trackByFn">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
></app-profile-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</span>
<ng-template *ngIf="thread.before$ | async as events">
<div class="feed-page" *ngIf="events.length > 0">
<div class="events" *ngFor="let event of events; trackBy: trackByFn">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
></app-profile-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</span>
</div>
</div>
</div>
<div *ngIf="!thread.before$">NO ITEMS!</div>
</ng-template>
<!-- <div *ngIf="!thread.before$">NO ITEMS!</div> -->
<!-- </span> -->
<!-- <div class="parent-events events" *ngFor="let event of filteredThread(); trackBy: trackByFn">
<span *ngIf="event.kind != 7">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
@ -37,7 +39,7 @@
</span>
</div> -->
<div class="original-post events noclick" *ngIf="thread.event$ | async as event">
<div class="current-event events noclick" *ngIf="thread.event$ | async as event">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon

View File

@ -106,6 +106,9 @@ export class NoteComponent {
ngOnInit() {
console.log('NG INIT ON NOTE:');
// this.appState.title = 'Blockcore Notes';
this.appState.title = 'Thread';
this.appState.showBackButton = true;
// Subscribe to the event which will update whenever user requests to view a different event.

View File

@ -213,18 +213,24 @@ mat-sidenav-content mat-toolbar {
margin: 0;
}
.parent-events {
.root-event {
// margin-left: 3em;
background-color: #303030 !important;
background-color: #a30770 !important;
// background-color: #a30770 !important;
}
.original-post {
.current-event {
margin-bottom: 2em;
background-color: #a30770 !important;
// margin-left: 2em;
background-color: #303030 !important;
}
@media only screen and (max-width: 599px) {
.current-event {
margin-bottom: 1em;
// margin-left: 1em;
}
}
.events {
margin-top: 1em;
padding: 1em;