From 271e2e364cd49140bcbd6e84f9efc9a556f903aa Mon Sep 17 00:00:00 2001
From: Milad Raeisi <miladsoft@yahoo.com>
Date: Sat, 7 Sep 2024 12:34:33 +0400
Subject: [PATCH] Improve UI for Project list

---
 src/app/app.module.ts                         |  4 +-
 .../components/explore/explore.component.css  |  4 +-
 .../components/explore/explore.component.html |  6 +-
 .../components/explore/explore.component.ts   |  2 +
 src/app/components/home/home.component.css    | 61 ++++++++++++++++---
 src/app/shared/truncate.pipe.ts               | 13 ++++
 6 files changed, 74 insertions(+), 16 deletions(-)
 create mode 100644 src/app/shared/truncate.pipe.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d96263b..a5b3649 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import { EventDetailComponent } from './components/events/event-detail/event-det
 import { EventsComponent } from './components/events/events.component';
 import { EmojiPickerComponent } from './shared/emoji-picker/emoji-picker.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { TruncatePipe } from './shared/truncate.pipe';
 
 @NgModule({
   declarations: [
@@ -66,7 +67,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
     UserComponent,
     EventDetailComponent,
     EventsComponent,
-    EmojiPickerComponent
+    EmojiPickerComponent,
+    TruncatePipe
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/explore/explore.component.css b/src/app/components/explore/explore.component.css
index e65302a..f4d88f0 100644
--- a/src/app/components/explore/explore.component.css
+++ b/src/app/components/explore/explore.component.css
@@ -26,8 +26,8 @@
 }
 
 .project-thumbnail img {
-  width: 40px;
-  height: 40px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   margin-right: 15px;
 }
diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html
index 67a025e..2b4e2d3 100644
--- a/src/app/components/explore/explore.component.html
+++ b/src/app/components/explore/explore.component.html
@@ -14,13 +14,13 @@ <h1 itemprop="name">
           <ul>
             <li *ngFor="let project of projects" (click)="goToProjectDetails(project)" class="project-item">
               <div class="project-thumbnail">
-                <img [src]="project.picture || 'assets/images/no-image.jpg'"
+                <img [src]="project.picture?.toString() || '/assets/images/no-image.jpg'"
                   onerror="this.onerror=null; this.src='assets/images/no-image.jpg';"
                   alt="{{ project.displayName || 'Project' }}" />
               </div>
               <div class="project-details">
-                <h3>{{ project.displayName || "Unknown Project" }}</h3>
-                <p>{{ project.nostrPubKey }}</p>
+                <h3>{{ project.displayName || project.nostrPubKey }}</h3>
+                <p>{{ project.about!| truncate:100 }}</p>
               </div>
             </li>
           </ul>
diff --git a/src/app/components/explore/explore.component.ts b/src/app/components/explore/explore.component.ts
index d883f2c..ad18245 100644
--- a/src/app/components/explore/explore.component.ts
+++ b/src/app/components/explore/explore.component.ts
@@ -8,6 +8,7 @@ interface Project {
   projectIdentifier:string;
   nostrPubKey: string;
   displayName?: string;
+  about?: string;
   picture?: string;
 }
 
@@ -103,6 +104,7 @@ interface Project {
 
   updateProjectMetadata(project: Project, metadata: any): void {
     project.displayName = metadata.name;
+    project.about = metadata.about;
     project.picture = metadata.picture;
   }
   @HostListener('window:scroll', [])
diff --git a/src/app/components/home/home.component.css b/src/app/components/home/home.component.css
index d4ff86c..f1343f0 100644
--- a/src/app/components/home/home.component.css
+++ b/src/app/components/home/home.component.css
@@ -1,4 +1,4 @@
-*{
+* {
   color: var(--neut-L75);
 }
 
@@ -38,7 +38,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
- }
+}
 
 .profile-picture {
   width: 80px;
@@ -61,7 +61,7 @@
 
 .profile-details p {
   margin: 5px 0 0;
- }
+}
 
 .chat-container {
   display: flex;
@@ -91,11 +91,11 @@
 
 .my-message {
   align-self: flex-end;
- }
+}
 
 .other-message {
   align-self: flex-start;
- }
+}
 
 img, video {
   max-width: 100%;
@@ -107,7 +107,7 @@ img, video {
 .reply-info {
   margin-top: 5px;
   font-size: 12px;
- }
+}
 
 .reply-info a {
   color: var(--primary);
@@ -116,7 +116,7 @@ img, video {
 
 .event-details {
   font-size: 12px;
-   margin-top: 5px;
+  margin-top: 5px;
   display: flex;
   justify-content: space-between;
 }
@@ -125,7 +125,7 @@ img, video {
 .event-item {
   background: var(--input-field);
   color: var(--text-color);
-   margin: 10px auto;
+  margin: 10px auto;
   padding: 15px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -143,7 +143,7 @@ img, video {
   margin: 0;
   margin-left: 10px;
   font-size: 18px;
- }
+}
 
 .author-picture {
   width: 50px;
@@ -155,7 +155,7 @@ img, video {
 .event-content {
   font-size: 16px;
   line-height: 1.5;
-   max-width: 100%;
+  max-width: 100%;
   overflow: hidden;
   word-wrap: break-word;
 }
@@ -165,3 +165,44 @@ img, video {
   border-top: 1px solid #ddd;
   margin-top: 15px;
 }
+
+/* Styling for responsive buttons */
+.meta-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+}
+
+.meta-info {
+  flex: 1 1;
+  text-align: center;
+}
+
+.btn-angor {
+  display: inline-block;
+  padding: 12px 20px;
+  font-size: 16px;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+
+
+@media (max-width: 768px) {
+  .meta-info-bar {
+    flex-direction: column;
+  }
+
+  .meta-info {
+    width: 100%;
+  }
+
+  .btn-angor {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
diff --git a/src/app/shared/truncate.pipe.ts b/src/app/shared/truncate.pipe.ts
new file mode 100644
index 0000000..4ada2d6
--- /dev/null
+++ b/src/app/shared/truncate.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+export class TruncatePipe implements PipeTransform {
+
+  transform(value: string, limit: number): string {
+    if (!value) return '';
+    if (value.length <= limit) return value;
+    return value.substring(0, limit) + '...';
+  }
+}