aljaz/angor-hub-old
1
1
Fork 0
mirror of https://github.com/block-core/angor-hub-old.git synced 2026-02-23 02:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update explore.component.html

Browse Source
This commit is contained in:
Milad Raeisi
2024-09-28 00:40:55 +04:00
parent 7031205559
commit 74b7f63c1f
1 changed files with 58 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/app/components/explore/explore.component.html
View File

@@ -2,7 +2,7 @@
<!-- Header -->
<div class="dark relative flex-0 overflow-hidden bg-gray-800 px-4 py-8 sm:p-16">
<!-- Background -->
<svg class="absolute inset-0 pointer-events-none" viewBox="0 0 960 540" width="100%" height="100%"
<svg class="pointer-events-none absolute inset-0" viewBox="0 0 960 540" width="100%" height="100%"
preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
<g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
<circle r="234" cx="196" cy="23"></circle>
@@ -15,7 +15,8 @@
What’s your next investment?
</div>
<div class="text-secondary mt-6 max-w-2xl text-center tracking-tight sm:text-2xl">
Check out our projects and find your next investment opportunity.
Check out our projects and find your next investment
opportunity.
</div>
</div>
</div>
@@ -36,71 +37,98 @@
</div>
</div>
<div class="mx-auto flex w-full flex-auto flex-col sm:max-w-5xl">
<!-- Project Cards -->
<div class="grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-10">
<div class="mt-10 grid w-full min-w-0 grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2">
<!-- Loop through projects and render cards -->
<ng-container *ngFor="let project of projects">
<angor-card class="filter-info flex w-full flex-col">
<div class="flex h-32">
<img class="object-cover"
[src]="getSafeUrl(project?.banner, true) || 'images/pages/profile/cover.jpg'"
onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
<img class="object-cover" [src]="
getSafeUrl(project?.banner, true) ||
'images/pages/profile/cover.jpg'
" onerror="this.onerror=null; this.src='/images/pages/profile/cover.jpg';"
alt="Card cover image" />
</div>
<div class="flex px-8">
<div class="bg-card -mt-12 rounded-full p-1">
<img class="h-24 w-24 rounded-full object-cover"
[src]="getSafeUrl(project?.picture, false) || 'images/avatars/avatar-placeholder.png'"
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
<img class="h-24 w-24 rounded-full object-cover" [src]="
getSafeUrl(project?.picture, false) ||
'images/avatars/avatar-placeholder.png'
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
alt="Project logo" />
</div>
</div>
<div class="flex flex-col px-8 pb-6 pt-4">
<div class="flex items-center justify-between">
<div class="mr-4 flex-1 min-w-0">
<div class="text-2xl font-semibold leading-tight truncate" role="button" (click)="goToProjectDetails(project)">
{{ project.displayName || project.nostrPubKey }}
<div class="mr-4 min-w-0 flex-1">
@if (project.displayName || project.name) {
<div class="truncate text-2xl font-semibold leading-tight" role="button" (click)="
goToProjectDetails(project)
">
{{
project.displayName ||
project.nostrPubKey
}}
</div>
<div class="text-secondary mt-1 leading-tight truncate">
{{ project.about || 'No description available' }}
}
@if (
!project.name && !project.displayName
) {
<div class="truncate text-2xl font-semibold leading-tight">
{{
project.displayName ||
project.nostrPubKey
}}
</div>
}
<div class="text-secondary mt-1 truncate leading-tight">
{{
project.about ||
'No description available'
}}
</div>
</div>
@if (project.displayName ||project.name) {
@if (project.displayName || project.name) {
<div class="flex h-10 w-10 items-center justify-center rounded-full border">
<button mat-icon-button (click)="openChat(project.nostrPubKey)">
<mat-icon class="icon-size-5"
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
<button mat-icon-button (click)="
openChat(project.nostrPubKey)
">
<mat-icon class="icon-size-5" [svgIcon]="
'heroicons_outline:chat-bubble-left-right'
"></mat-icon>
</button>
</div>
}
</div>
<hr class="my-6 w-full border-t" />
<div class="flex items-center justify-between">
<div class="text-secondary mr-3 text-md font-medium">
{{ project.totalInvestmentsCount || 0 }} investors
{{ project.totalInvestmentsCount || 0 }}
investors
</div>
<div class="flex items-center">
<ng-container
*ngFor="let investor of [].constructor(project.totalInvestmentsCount || 0); let i = index">
<ng-container *ngFor="
let investor of [].constructor(project.totalInvestmentsCount || 0);
let i = index
">
<ng-container *ngIf="i < 10">
<img class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
[ngClass]="{'-ml-3': project.totalInvestmentsCount > 1 && i > 0}"
[src]="'images/avatars/avatar-placeholder.png'"
alt="Investor avatar {{ i + 1 }}" />
[ngClass]="{
'-ml-3': project.totalInvestmentsCount > 1 && i > 0
}"
[src]="'images/avatars/avatar-placeholder.png'"
alt="Investor avatar {{ i + 1 }}" />
</ng-container>
</ng-container>
</div>
</div>
</div>
</angor-card>
</ng-container>
</div>
<!-- Load More Button -->
<div class="flex justify-center mt-10">
<div class="mt-10 flex justify-center">
<button mat-raised-button color="primary" (click)="loadProjects()" [disabled]="loading">
{{ loading ? 'Loading...' : 'Load More Projects' }}
</button>