diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs
index d806f8e..8f830c2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs
@@ -9,4 +9,17 @@ public static class GameHelper
game.CreationUserId = 100000;
game.CreationDate = DateTime.Now;
}
+
+ public static string GetInterestColor(int interest, int maxInterest)
+ {
+ int firstTier = (int)Math.Floor(0.33 * maxInterest);
+ int secondTier = (int)Math.Ceiling(0.66 * maxInterest);
+
+ return interest switch
+ {
+ int x when x <= firstTier => "--red",
+ int x when x >= secondTier => "--green",
+ _ => "--yellow",
+ };
+ }
}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameBase.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameBase.cs
index 68229fb..efc56cf 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameBase.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameBase.cs
@@ -10,7 +10,7 @@ public class GameBase : ComponentBase
protected void HandleDetailClicked()
{
- NavigationManager.NavigateTo($"/Game/Detail/{GameDto.Id}");
+ NavigationManager.NavigateTo($"/Games/Detail/{GameDto.Id}");
}
protected string GetFormatedStorageSpace()
@@ -22,8 +22,8 @@ public class GameBase : ComponentBase
return GameDto.StorageSpace switch
{
- > 1000000 => $"{GameDto.StorageSpace / 1000000:f1} To",
- > 1000 => $"{GameDto.StorageSpace / 1000:f1} Go",
+ >= 1000000 => $"{GameDto.StorageSpace / 1000000:f1} To",
+ >= 1000 => $"{GameDto.StorageSpace / 1000:f1} Go",
_ => $"{GameDto.StorageSpace:f1} Mo"
};
}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
index a14e4a6..d694e4f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor
@@ -1,10 +1,11 @@
-@using GameIdeas.BlazorApp.Shared.Constants
+@using GameIdeas.BlazorApp.Helpers
+@using GameIdeas.BlazorApp.Shared.Constants
@inherits GameBase

-
@GameDto.Title
+
@GameDto.Title
@(GameDto.ReleaseDate?.ToShortDateString() ?? @ResourcesKey.Unknown)
@@ -30,7 +31,9 @@
@GetFormatedStorageSpace()
- @GameDto.Interest
+
+ @GameDto.Interest
+
/5
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
index ad76215..7bb678f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor.css
@@ -1,21 +1,44 @@
.row {
display: grid;
- grid-template-columns: 48px 5fr 70px 2fr 3fr 60px 30px 30px;
+ 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;
- align-content: center;
- align-items:center;
-}
-.title {
- font-weight: bold;
}
-.release-date, .storage, .max-value {
+.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;
+ 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);
}
@@ -30,6 +53,7 @@
.platforms, .tags {
display: flex;
+ flex-wrap: wrap;
gap: 4px;
}
@@ -44,7 +68,7 @@
}
.detail {
- transform: scale(0.8, 1.2) rotate(-90deg);
+ transform: scale(0.6, 1) rotate(-90deg);
background: none;
border: none;
outline: none;
@@ -61,15 +85,16 @@
}
.max-value {
- translate: 0 200px;
+ position: absolute;
+ transform: translate(2px, 10px);
}
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 1000px) {
.row {
- grid-template-columns: 48px 5fr 2fr 3fr 30px 30px;
+ grid-template-columns: 48px 3fr 2fr 3fr 30px 30px;
}
- .release-date, .storage {
+ .tags, .storage {
display: none;
}
}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
index a7a9081..2be42ae 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
@@ -3,7 +3,6 @@
flex-direction: row;
gap: 8px;
align-items: center;
- z-index: var(--index-content);
}
.search-container {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs
index 007bf0a..ea2be8f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Helpers;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Slider;
@@ -16,15 +17,6 @@ public partial class Slider
private string StatusColor(int value)
{
string str = "--thumb-color: var({0});";
-
- int firstTier = (int)Math.Floor(0.33 * Params.Max);
- int secondTier = (int)Math.Ceiling(0.66 * Params.Max);
-
- return value switch
- {
- int x when x <= firstTier => string.Format(str, "--red"),
- int x when x >= secondTier => string.Format(str, "--green"),
- _ => string.Format(str, "--yellow"),
- };
+ return string.Format(str, GameHelper.GetInterestColor(value, Params.Max));
}
}
\ No newline at end of file