Complete style for game rows

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",
+        };
+    }
 }

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"
         };
     }

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
 
 <div class="row">
     <img class="icon" src="~/icon.png" />
 
-    <span class="title">@GameDto.Title</span>
+    <a class="title" href="@($"/Games/Detail/{GameDto.Id}")">@GameDto.Title</a>
 
     <span class="release-date">@(GameDto.ReleaseDate?.ToShortDateString() ?? @ResourcesKey.Unknown)</span>
 
@@ -30,7 +31,9 @@
     <span class="storage">@GetFormatedStorageSpace()</span>
 
     <div class="interest">
-        <span class="value">@GameDto.Interest</span>
+        <span class="value" style="@($"color: var({GameHelper.GetInterestColor(GameDto.Interest, 5)})")">
+            @GameDto.Interest
+        </span>
         <span class="max-value">/5</span>
     </div>
 

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

@@ -1,18 +1,41 @@
 .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;
 }
+
+.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 {   
@@ -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;
     }
 }

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 {

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));
     }
 }