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