PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add detail game page #41

Merged
Egamorf merged 4 commits from feature/add-detail-game-page into main 2025-05-04 15:27:06 +02:00
Conversation 0 Commits 4 Files Changed 37 +213 -60
9 changed files with 213 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dd08baacf5 - Show all commits

106
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor
View File

@@ -1,5 +1,8 @@
@page "/Detail/{GameId:int}"
@using GameIdeas.BlazorApp.Helpers
@using GameIdeas.BlazorApp.Shared.Components.Header
@using GameIdeas.BlazorApp.Shared.Components.Interest
@using GameIdeas.BlazorApp.Shared.Constants
@layout MainLayout
<HeaderGameIdeas>
@@ -7,54 +10,89 @@
</HeaderGameIdeas>
<div class="detail-container">
<h1 class="header-1 expand-col-2">@Game.Title</h1>
<div class="description">@Game.Description</div>
<div class="medias"></div>
<div class="section flex">
<a href="" class="square-button">@Icons.Back</a>
<h1 class="header-1">@Game.Title</h1>
<Interest Value="Game.Interest" />
</div>
<div class="properties-tags expand-col-2">
<div class="properties-container">
<div class="section col-2">
<span class="description">@Game.Description</span>
<div class="medias"></div>
</div>
<div class="section dark col-2">
<div class="properties">
<h2 class="header-2 grd-col-1">@ResourcesKey.Properties</h2>
@foreach (var property in Game.Properties ?? [])
{
<div class="pill body-lg">@property.Label</div>
}
<div class="pills">
@foreach (var property in Game.Properties ?? [])
{
<div class="pill body-lg">@property.Label</div>
}
</div>
</div>
<div class="tags-container">
<div class="tags">
<h2 class="header-2">@ResourcesKey.Tags</h2>
@foreach (var property in Game.Tags ?? [])
{
<div class="pill body-lg">@property.Label</div>
}
<div class="pills">
@foreach (var property in Game.Tags ?? [])
{
<div class="pill body-lg">@property.Label</div>
}
</div>
</div>
</div>
<div class="how-long-to-beat expand-col-2">
</div>
<div class="section col-2 first-larger">
<div class="additional-informations">
<h2 class="header-2">@ResourcesKey.About</h2>
<div class="informations">
@if (Game.ReleaseDate != null)
{
<div class="information">
<span class="body-sm">@ResourcesKey.ReleaseDate</span>
<span class="body-lg">@Game.ReleaseDate?.ToShortDateString()</span>
</div>
}
<div class="additional-informations">
<h2 class="header-2">@ResourcesKey.About</h2>
<div class="more-information">
@if (Game.StorageSpace != null)
{
<div class="information">
<span class="body-sm">@ResourcesKey.StorageSize</span>
<span class="body-lg">@GameHelper.GetFormatedStorageSpace(Game.StorageSpace)</span>
</div>
}
</div>
<div class="information">
<span class="body-sm">@ResourcesKey.Platforms</span>
@foreach (var platform in Game.Platforms ?? [])
{
<a class="body-lg" href="@platform.Url">@platform.Label</a>
}
</div>
<div class="information">
<span class="body-sm">@ResourcesKey.Developer</span>
<span class="body-lg">@Game.Developer?.Name</span>
@if (Game.Developer != null)
{
<div class="information">
<span class="body-sm">@ResourcesKey.Developer</span>
<span class="body-lg">@Game.Developer?.Name</span>
</div>
}
@if (Game.Publisher != null)
{
<div class="information">
<span class="body-sm">@ResourcesKey.Publisher</span>
<span class="body-lg">@Game.Publisher?.Name</span>
</div>
}
</div>
</div>
<div class="information">
<span class="body-sm">@ResourcesKey.Publisher</span>
<span class="body-lg">@Game.Publisher?.Name</span>
<div class="platforms">
<h2 class="header-2">@ResourcesKey.Platforms</h2>
<div class="pills">
@foreach (var platform in Game.Platforms ?? [])
{
<a class="body-lg pill platform-pill" href="@platform.Url">@platform.Label</a>
}
</div>
</div>
</div>
<div class="files grd-col-2">
<div class="section">
</div>
</div>

103
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css
View File

@@ -1,12 +1,103 @@
.detail-container, .properties-tags {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.medias {
grid-column: 2
}
.properties {
.flex {
display: flex;
gap: 8px;
align-items: center;
}
.section {
padding: 20px 100px;
}
.col-2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
}
.first-larger {
grid-template-columns: 3fr 2fr;
}
.dark {
background: rgb(0, 0, 0, 0.4)
}
.header-1, .header-2 {
width: 100%;
}
.header-2 {
margin-bottom: 20px;
}
.pills, .informations {
display: flex;
flex-wrap: wrap;
gap: 34px;
}
.additional-informations, .platforms {
padding: 20px;
background: var(--input-secondary);
box-shadow: var(--drop-shadow);
border-radius: var(--big-radius);
}
.pill {
width: fit-content;
height: 24px;
padding: 0 6px;
background: rgb(255, 255, 255, 0.2);
border-radius: var(--small-radius);
align-content: center;
}
.platform-pill {
color: var(--violet);
cursor: pointer;
text-decoration: none;
}
.platform-pill:hover {
text-decoration: underline;
}
.square-button {
height: 28px;
min-height: 28px;
width: 28px;
min-width: 28px;
border-radius: var(--small-radius);
background: var(--input-primary);
overflow: hidden;
cursor: pointer;
}
.square-button ::deep svg {
fill: var(--white);
}
.square-button:hover ::deep svg {
background: var(--input-selected);
}
@media screen and (max-width: 1000px) {
.section {
padding: 20px;
}
}
@media screen and (max-width: 700px) {
.col-2 {
grid-template-columns: 1fr;
}
.platforms {
grid-row: 1;
}
}

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
View File

@@ -1,4 +1,5 @@
@using GameIdeas.BlazorApp.Helpers
@using GameIdeas.BlazorApp.Shared.Components.Interest
@using GameIdeas.BlazorApp.Shared.Constants
@inherits GameBase
@@ -30,12 +31,7 @@
<span class="storage">@GameHelper.GetFormatedStorageSpace(GameDto.StorageSpace)</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>
<Interest Value="GameDto.Interest" />
<button class="detail">@Icons.Triangle</button>
</div>

14
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
View File

@@ -11,7 +11,7 @@
overflow: hidden;
}
.row * {
.row > * {
max-height: 64px;
height: fit-content;
padding: 6px 0;
@@ -39,7 +39,7 @@
background: var(--input-selected);
}
.release-date, .storage, .max-value {
.release-date, .storage {
color: rgb(184, 184, 184);
}
@@ -80,16 +80,6 @@
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;

9
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor Normal file
View File

@@ -0,0 +1,9 @@
@using GameIdeas.BlazorApp.Helpers
<div class="interest">
<span class="value" style="@($"color: var({GameHelper.GetInterestColor(Value, 5)})")">
@Value
</span>
<span class="max-value">/5</span>
</div>

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor.cs Normal file
View File

@@ -0,0 +1,8 @@
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Interest;
public partial class Interest
{
[Parameter] public int Value { get; set; }
}

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Interest/Interest.razor.css Normal file
View File

@@ -0,0 +1,16 @@
.interest {
position: relative;
display: flex;
}
.value {
align-content: center;
font-size: 24px;
font-weight: bold;
}
.max-value {
align-content: center;
transform: translate(2px, 10px);
color: rgb(184, 184, 184);
}

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs
View File

@@ -39,4 +39,8 @@ public static class Icons
public readonly static MarkupString Check = new(OpenBraket +
"<path d=\"M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z\" />" +
CloseBraket);
public readonly static MarkupString Back = new(OpenBraket +
"<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
CloseBraket);
}

1
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -150,6 +150,7 @@ code {
}
.header-1, .header-2, span, a {
display: block;
color: var(--white);
margin: 0;
padding: 0;