From 49fd3ae02718937346c5caca2ee04355b7595d26 Mon Sep 17 00:00:00 2001
From: Mohd Zaid <72139621+zaidmstrr@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:18:29 +0530
Subject: [PATCH] Improving the BlockCore Notes UI (#146)

---
 src/app/home/home.css  |  30 ++++++++--
 src/app/home/home.html | 128 +++++++++++++++++++++--------------------
 2 files changed, 91 insertions(+), 67 deletions(-)

diff --git a/src/app/home/home.css b/src/app/home/home.css
index 35fcd72..e227ec9 100644
--- a/src/app/home/home.css
+++ b/src/app/home/home.css
@@ -14,7 +14,7 @@
 
 .default-card {
   display: inline-block;
-  /* margin-bottom: 1em; */
+  margin-bottom: 1em;
   width: 300px;
   height: 160px;
   margin-right: 1em;
@@ -90,21 +90,34 @@
 
 .home {
   display: flex;
+  /* flex-wrap: nowrap; */
+  justify-content: space-between;
   gap: 1.5em;
-  max-width: 1360px;
+  max-width: 1100px;
   align-self: center;
+  /* flex-direction: row; */
+  
 }
 
 .home-left {
-  flex: 1 1 0;
-  min-width: 240px;
+  /* flex: 1 1 0;
+  min-width: 240px; */
+  display: flex;
+  flex-wrap: nowrap;  
+  justify-content: space-around;  
+
 }
 
 .home-right {
-  flex: 3 1 0;
+  /* flex: 3 1 0; */
+  display: flex;
+  justify-content:space-between;
+  /* flex-wrap: nowrap; */
 }
 
 .home-card {
+  margin: 15px;
+  flex-grow: 1;
   border-radius: 15px;
   margin-bottom: 1.8em;
   width: 100%;
@@ -123,10 +136,15 @@
 }
 
 .page {
+ 
   box-sizing: border-box;
   display: flex;
   width: 100%;
+  justify-content: space-between;
   flex-direction: column;
+  
+  /* flex-direction: row; */
+  /* flex-direction: row-reverse; */
 }
 
 @media only screen and (max-width: 599px) {
@@ -155,6 +173,8 @@
   display: flex;
   flex-direction: row;
   margin-bottom: 0.2em;
+  /* align-items: center; */
+  
 }
 
 .profile-line::-webkit-scrollbar-thumb {
diff --git a/src/app/home/home.html b/src/app/home/home.html
index 9141b7e..9b13011 100644
--- a/src/app/home/home.html
+++ b/src/app/home/home.html
@@ -8,6 +8,72 @@
         <mat-icon>more_horiz</mat-icon>
       </button>
     </drag-scroll>
+
+
+
+    <div class="home-right">
+      <br /><br />
+      <div class="centered">
+        <button routerLink="/editor" mat-fab extended color="primary">
+          <mat-icon>note_add</mat-icon>
+          {{ 'Home.WriteANote' | translate }}
+        </button>
+      </div>
+
+      <br /><br />
+
+      <!-- <mat-card class="home-card">
+        <mat-card-header>
+          <mat-card-title>Create Note</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <br />
+          <form [formGroup]="formGroup">
+            <div mat-dialog-content class="mat-dialog-content">
+
+              <emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
+              <mat-form-field class="input-full-width">
+                <mat-label>Note</mat-label>
+                <textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
+              </mat-form-field>
+
+            </div>
+            <div mat-dialog-actions class="mat-dialog-actions" align="end">
+              <button mat-stroked-button (click)="onCancel()">Cancel</button>&nbsp;
+              <button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
+            </div>
+          </form>
+        </mat-card-content>
+      </mat-card> -->
+
+      <mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
+        <div class="events-header">
+          <app-event-header [pubkey]="event.pubkey"><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
+          <app-event-actions [event]="event"></app-event-actions>
+        </div>
+        <app-content [event]="event"></app-content>
+      </mat-card>
+
+      <p class="view-more-container">
+        <button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
+      </p>
+
+      <!-- <mat-card class="home-card">
+        <mat-card-header>
+          <img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
+          <mat-card-title>Shiba Inu</mat-card-title>
+          <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+        </mat-card-header>
+        <img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
+        <mat-card-content>
+          <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p>
+        </mat-card-content>
+        <mat-card-actions>
+          <button mat-button>Like</button>
+          <button mat-button>Comments</button>
+        </mat-card-actions>
+      </mat-card> -->
+    </div>
   </div>
 
   <div class="home">
@@ -107,69 +173,7 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="home-right">
-      <br /><br />
-      <div class="centered">
-        <button routerLink="/editor" mat-fab extended color="primary">
-          <mat-icon>note_add</mat-icon>
-          {{ 'Home.WriteANote' | translate }}
-        </button>
-      </div>
-
-      <br /><br />
-
-      <!-- <mat-card class="home-card">
-        <mat-card-header>
-          <mat-card-title>Create Note</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-          <br />
-          <form [formGroup]="formGroup">
-            <div mat-dialog-content class="mat-dialog-content">
-
-              <emoji-mart class="picker" *ngIf="isEmojiPickerVisible" emoji="point_up" [isNative]="true" [showPreview]="false" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>
-              <mat-form-field class="input-full-width">
-                <mat-label>Note</mat-label>
-                <textarea class="note-input" matInput type="text" [(ngModel)]="note" formControlName="note" rows="6"></textarea>
-              </mat-form-field>
-
-            </div>
-            <div mat-dialog-actions class="mat-dialog-actions" align="end">
-              <button mat-stroked-button (click)="onCancel()">Cancel</button>&nbsp;
-              <button mat-flat-button (click)="postNote()" color="primary" cdkFocusInitial>Post</button>
-            </div>
-          </form>
-        </mat-card-content>
-      </mat-card> -->
-
-      <mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems; trackBy: trackByFn">
-        <div class="events-header">
-          <app-event-header [pubkey]="event.pubkey"><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
-          <app-event-actions [event]="event"></app-event-actions>
-        </div>
-        <app-content [event]="event"></app-content>
-      </mat-card>
-
-      <p class="view-more-container">
-        <button mat-button routerLink="/feed">{{ 'Home.ViewFollowingNotes' | translate }}</button>
-      </p>
 
-      <!-- <mat-card class="home-card">
-        <mat-card-header>
-          <img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
-          <mat-card-title>Shiba Inu</mat-card-title>
-          <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-        </mat-card-header>
-        <img mat-card-image class="home-card-image" src="https://material.angular.io/assets/img/examples/shiba2.jpg" />
-        <mat-card-content>
-          <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.</p>
-        </mat-card-content>
-        <mat-card-actions>
-          <button mat-button>Like</button>
-          <button mat-button>Comments</button>
-        </mat-card-actions>
-      </mat-card> -->
-    </div>
   </div>
 
   <!-- <div class="dashboard-header">