oliverbooth.dev/OliverBooth/Pages/Projects/Index.cshtml
Oliver Booth cbfdefae71
style: redesign projects page
This change separates the project logo and details into separate pages and makes the list more visually striking.
2023-12-24 12:20:03 +00:00

68 lines
3.1 KiB
Plaintext

@page
@using OliverBooth.Data.Web
@using OliverBooth.Services
@inject IProjectService ProjectService
@{
ViewData["Title"] = "Projects";
IEnumerable<IProject> projects = ProjectService.GetProjects(ProjectStatus.Ongoing).OrderBy(p => p.Rank)
.Concat(ProjectService.GetProjects(ProjectStatus.Past).OrderBy(p => p.Rank))
.Concat(ProjectService.GetProjects(ProjectStatus.Hiatus).OrderBy(p => p.Rank));
}
<main class="container">
<h1 class="display-4">Projects</h1>
@foreach (IProject[] chunk in projects.Chunk(2))
{
<div class="card-group row" style="margin-top: 20px;">
@foreach (IProject project in chunk)
{
<div class="col-xs-1 col-md-6 col-lg-6 d-flex align-items-stretch">
@switch (project.Status)
{
case ProjectStatus.Ongoing:
<div class="project-card">
<div class="ribbon ribbon-top-left green">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>Ongoing</span>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
case ProjectStatus.Past:
<div class="border-info project-card">
<div class="ribbon ribbon-top-left blue">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>Past Work</span>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
case ProjectStatus.Hiatus:
<div class="border-danger project-card">
<div class="ribbon ribbon-top-left red">
<a asp-page="Project" asp-route-slug="@project.Slug">
<span>On Hiatus</span>
</a>
</div>
<a asp-page="Project" asp-route-slug="@project.Slug">
<img src="https://cdn.olivr.me/projects/hero/@project.HeroUrl" class="card-img-top" alt="@project.Name">
</a>
</div>
break;
}
</div>
}
</div>
}
</main>