From 3f4edb3e30eafaa0b293e27e2c1d177104930fc4 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sat, 31 Dec 2022 18:31:01 +0100
Subject: [PATCH] Tune the layout and make the root event render with same
 style

---
 src/app/note/note.component.html | 32 +++++++++++++++++---------------
 src/app/note/note.component.ts   |  3 +++
 src/styles.scss                  | 16 +++++++++++-----
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/app/note/note.component.html b/src/app/note/note.component.html
index 78a48aa..570f226 100644
--- a/src/app/note/note.component.html
+++ b/src/app/note/note.component.html
@@ -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
diff --git a/src/app/note/note.component.ts b/src/app/note/note.component.ts
index b6f21e5..2741a1d 100644
--- a/src/app/note/note.component.ts
+++ b/src/app/note/note.component.ts
@@ -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.
diff --git a/src/styles.scss b/src/styles.scss
index b63564c..3044723 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -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;