Skip to content

Commit

Permalink
Updated project display layout from table format to card-based design
Browse files Browse the repository at this point in the history
  • Loading branch information
@miladsoft
miladsoft committed Sep 21, 2024
1 parent aac267f commit 03e6ede
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 69 deletions.
148 changes: 79 additions & 69 deletions src/Angor/Client/Pages/Investor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,75 +136,85 @@
</div>
</div>



<div class="card-body">
<div class="table-responsive form-control" style="overflow-x: hidden;">
<table class="table table-sm table-striped align-items-center mb-0" style="table-layout: fixed; width: 100%;">
<thead>
<tr>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7" style="padding: 4px;">Name</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">Funding Target (@network.CoinTicker)</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">Raised (@network.CoinTicker)</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">Raised (% Target)</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7" style="padding: 4px;">Project Status</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">My Investment (@network.CoinTicker)</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">Spent by Founder</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">Available to Founder</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7 text-end" style="padding: 4px;">In Recovery</th>
<th class="text-uppercase text-xxs font-weight-bolder opacity-7" style="padding: 4px;">Founder Approval</th>
</tr>

</thead>
<tbody>
@foreach (var project in projects)
{
Stats.TryGetValue(project.ProjectInfo.ProjectIdentifier, out var stats);
var nostrPubKey = project.ProjectInfo.NostrPubKey;
investmentRequestsMap.TryGetValue(nostrPubKey, out bool hasInvestmentRequests);

<tr>
<td>
<a href=@($"/view/{project.ProjectInfo.ProjectIdentifier}") class="text-truncate">@project.Metadata?.Name</a>
</td>
<td class="text-end">@project.ProjectInfo.TargetAmount @network.CoinTicker</td>
<td class="text-end">@Money.Satoshis(stats?.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</td>
<td class="text-end">@((stats?.AmountInvested ?? 0) * 100 / Money.Coins(project.ProjectInfo.TargetAmount).Satoshi) %</td>
<td>
@if (project.ProjectInfo.StartDate < DateTime.UtcNow)
{
<span class="text-info">Funding</span>
}
else
{
<span class="text-success">Live</span>
}
</td>
<td class="text-end">
@Money.Satoshis(project.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker
@if (!project.SignaturesInfo?.Signatures.Any() ?? false)
{
<a href=@($"/invest/{project.ProjectInfo.ProjectIdentifier}") class="btn btn-link p-0" data-toggle="tooltip" title="Pending"> <i class="oi oi-clock"></i></a>
}
</td>
<td class="text-end">-</td>
<td class="text-end">-</td>
<td class="text-end">@Money.Satoshis(project.AmountInRecovery ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</td>
<td>
@if (hasInvestmentRequests)
{
<a href="@($"/invest/{project.ProjectInfo.ProjectIdentifier}")" class="text-info">Approved</a>
}
else
{
<span class="text-warning">Pending</span>
}
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="card-container">
@foreach (var project in projects)
{
Stats.TryGetValue(project.ProjectInfo.ProjectIdentifier, out var stats);
var nostrPubKey = project.ProjectInfo.NostrPubKey;
investmentRequestsMap.TryGetValue(nostrPubKey, out bool hasInvestmentRequests);

<div class="project-card">
<div class="project-header">
<h3>@project.Metadata?.Name</h3>
<a href=@($"/view/{project.ProjectInfo.ProjectIdentifier}") class="project-link">View Details</a>
</div>

<div class="project-body">
<div class="project-info">
<span>Funding Target:</span>
<strong>@project.ProjectInfo.TargetAmount @network.CoinTicker</strong>
</div>

<div class="project-info">
<span>Raised:</span>
<strong>@Money.Satoshis(stats?.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong>
</div>

<div class="project-info">
<span>Raised (% Target):</span>
<strong>@((stats?.AmountInvested ?? 0) * 100 / Money.Coins(project.ProjectInfo.TargetAmount).Satoshi) %</strong>
</div>

<div class="project-info">
<span>Status:</span>
@if (project.ProjectInfo.StartDate < DateTime.UtcNow)
{
<strong class="status funding">Funding</strong>
}
else
{
<strong class="status live">Live</strong>
}
</div>

<div class="project-info">
<span>My Investment:</span>
<strong>@Money.Satoshis(project.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong>
@if (!project.SignaturesInfo?.Signatures.Any() ?? false)
{
<a href=@($"/invest/{project.ProjectInfo.ProjectIdentifier}") class="btn-link" title="Pending"> <i class="oi oi-clock"></i></a>
}
</div>

<div class="project-info">
<span>Spent by Founder:</span>
<strong>-</strong>
</div>

<div class="project-info">
<span>Available to Founder:</span>
<strong>-</strong>
</div>

<div class="project-info">
<span>In Recovery:</span>
<strong>@Money.Satoshis(project.AmountInRecovery ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong>
</div>

<div class="project-info">
<span>Founder Approval:</span>
@if (hasInvestmentRequests)
{
<strong class="status approved">Approved</strong>
}
else
{
<strong class="status pending">Pending</strong>
}
</div>
</div>
</div>
}
</div>

</div>
Expand Down
98 changes: 98 additions & 0 deletions src/Angor/Client/wwwroot/assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1613,3 +1613,101 @@ textarea.form-control {
a, a p {
color: var(--angor-secondary) !important;
}

.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
padding: 2rem;
}

.project-card {
background-color: var(--angor-body-bg);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.project-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}

.project-header h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--angor-primary);
}

.project-header .project-link {
font-size: 1rem;
font-weight: 600;
color: var(--angor-primary);
text-decoration: none;
}

.project-header .project-link:hover {
text-decoration: underline;
}

.project-body {
display: grid;
gap: 0.5rem;
}

.project-info {
display: flex;
justify-content: space-between;
align-items: center;
}

.project-info span {
font-size: 0.875rem;
color: #6c757d;
}

.project-info strong {
font-size: 1rem;
font-weight: 600;
color: var(--angor-primary);
}

.status {
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
color: white;
}

.status.funding {
background-color: #ffc107;
}

.status.live {
background-color: #28a745;
}

.status.approved {
background-color: #007bff;
}

.status.pending {
background-color: #dc3545;
}

.btn-link {
color: #007bff;
text-decoration: none;
}

.btn-link:hover {
text-decoration: underline;
}

0 comments on commit 03e6ede

Please sign in to comment.