Display list of games (#16)
Co-authored-by: Maxime Adler <madler@sqli.com> Reviewed-on: #16
This commit was merged in pull request #16.
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
using GameIdeas.Shared.Dto;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Pages.Games.Components;
|
||||
|
||||
public class GameBase : ComponentBase
|
||||
{
|
||||
[Parameter] public GameDto GameDto { get; set; } = new();
|
||||
[Inject] public NavigationManager NavigationManager { get; set; } = default!;
|
||||
|
||||
protected void HandleDetailClicked()
|
||||
{
|
||||
NavigationManager.NavigateTo($"/Games/Detail/{GameDto.Id}");
|
||||
}
|
||||
|
||||
protected string GetFormatedStorageSpace()
|
||||
{
|
||||
if (GameDto.StorageSpace == null)
|
||||
{
|
||||
return string.Empty;
|
||||
}
|
||||
|
||||
return GameDto.StorageSpace switch
|
||||
{
|
||||
>= 1000000 => $"{GameDto.StorageSpace / 1000000:f1} To",
|
||||
>= 1000 => $"{GameDto.StorageSpace / 1000:f1} Go",
|
||||
_ => $"{GameDto.StorageSpace:f1} Mo"
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@using GameIdeas.BlazorApp.Helpers
|
||||
@using GameIdeas.BlazorApp.Shared.Constants
|
||||
@inherits GameBase
|
||||
|
||||
<div class="row">
|
||||
<img class="icon" src="~/icon.png" />
|
||||
|
||||
<a class="title" href="@($"/Games/Detail/{GameDto.Id}")">@GameDto.Title</a>
|
||||
|
||||
<span class="release-date">@(GameDto.ReleaseDate?.ToShortDateString() ?? @ResourcesKey.Unknown)</span>
|
||||
|
||||
<div class="platforms">
|
||||
@foreach (var platform in GameDto.Platforms ?? [])
|
||||
{
|
||||
<a href="@platform.Url"
|
||||
class="pill @(string.IsNullOrEmpty(platform.Url) ? "" : "platform-pill")">
|
||||
@platform.Label
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="tags">
|
||||
@foreach (var tag in GameDto.Tags ?? [])
|
||||
{
|
||||
<div class="pill">
|
||||
@tag.Label
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<span class="storage">@GetFormatedStorageSpace()</span>
|
||||
|
||||
<div class="interest">
|
||||
<span class="value" style="@($"color: var({GameHelper.GetInterestColor(GameDto.Interest, 5)})")">
|
||||
@GameDto.Interest
|
||||
</span>
|
||||
<span class="max-value">/5</span>
|
||||
</div>
|
||||
|
||||
<button class="detail">@Icons.Triangle</button>
|
||||
</div>
|
||||
@@ -0,0 +1,101 @@
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 3fr 70px 2fr 3fr 60px 30px 30px;
|
||||
grid-gap: 8px;
|
||||
text-wrap: nowrap;
|
||||
height: 64px;
|
||||
background: var(--input-secondary);
|
||||
box-shadow: var(--drop-shadow);
|
||||
border-radius: var(--big-radius);
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row * {
|
||||
max-height: 64px;
|
||||
height: fit-content;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 0;
|
||||
margin: 8px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
padding: 6px;
|
||||
border-radius: var(--small-radius);
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
background: var(--input-selected);
|
||||
}
|
||||
|
||||
.release-date, .storage, .max-value {
|
||||
color: rgb(184, 184, 184);
|
||||
}
|
||||
|
||||
.pill {
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
border-radius: var(--small-radius);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.platforms, .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.platform-pill {
|
||||
color: var(--violet);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.platform-pill:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: scale(0.6, 1) rotate(-90deg);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::deep .detail svg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max-value {
|
||||
position: absolute;
|
||||
transform: translate(2px, 10px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.row {
|
||||
grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;
|
||||
}
|
||||
|
||||
.tags, .storage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@using GameIdeas.BlazorApp.Helpers
|
||||
@using GameIdeas.BlazorApp.Shared.Constants
|
||||
|
||||
<div class="row">
|
||||
<div class="icon">@Icons.Game</div>
|
||||
|
||||
<div class="title"></div>
|
||||
|
||||
<span class="release-date">@ResourcesKey.Unknown</span>
|
||||
|
||||
<div class="platforms">
|
||||
<div class="pill"></div>
|
||||
<div class="pill pill-sm"></div>
|
||||
<div class="pill pill-lg"></div>
|
||||
</div>
|
||||
|
||||
<div class="tags">
|
||||
<div class="pill"></div>
|
||||
<div class="pill lg-pill"></div>
|
||||
</div>
|
||||
|
||||
<span class="storage">10.0 Go</span>
|
||||
|
||||
<div class="interest">
|
||||
<span class="value" style="@($"color: var({GameHelper.GetInterestColor(Interest, 5)})")">
|
||||
@Interest
|
||||
</span>
|
||||
<span class="max-value">/5</span>
|
||||
</div>
|
||||
|
||||
<button class="detail">@Icons.Triangle</button>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private int Interest = @Random.Shared.Next(1, 5);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 3fr 70px 2fr 3fr 60px 30px 30px;
|
||||
grid-gap: 8px;
|
||||
height: 64px;
|
||||
background: var(--input-secondary);
|
||||
box-shadow: var(--drop-shadow);
|
||||
border-radius: var(--big-radius);
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row * {
|
||||
max-height: 64px;
|
||||
height: fit-content;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-radius: var(--small-radius);
|
||||
padding: 4px;
|
||||
margin: 8px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
animation: loading 3s ease infinite;
|
||||
}
|
||||
|
||||
.icon ::deep svg {
|
||||
fill: var(--input-secondary);
|
||||
}
|
||||
|
||||
.title {
|
||||
border-radius: var(--small-radius);
|
||||
animation: loading 3s ease infinite;
|
||||
width: 160px;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
border-radius: var(--small-radius);
|
||||
}
|
||||
|
||||
.release-date, .storage, .max-value {
|
||||
color: rgb(184, 184, 184);
|
||||
}
|
||||
|
||||
.pill {
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
border-radius: var(--small-radius);
|
||||
align-content: center;
|
||||
animation: loading 3s ease infinite;
|
||||
}
|
||||
|
||||
.pill-lg {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.pill-sm {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.platforms, .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
transform: scale(0.6, 1) rotate(-90deg);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::deep .detail svg {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max-value {
|
||||
position: absolute;
|
||||
transform: translate(2px, 10px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.row {
|
||||
grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;
|
||||
}
|
||||
|
||||
.tags, .storage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
50% {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
100% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user