diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs index adfddfd..dc99931 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs @@ -28,6 +28,99 @@ public partial class AdvancedGameFilter new() { Item = "Ubisoft", Label = "Ubisoft" }, new() { Item = "Activision Blizzard", Label = "Activision Blizzard" }, new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" }, ]; private readonly IEnumerable> Developers = [ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs index 5c372af..def2a83 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs @@ -1,11 +1,13 @@ using GameIdeas.BlazorApp.Shared.Components.Search; using GameIdeas.BlazorApp.Shared.Components.Select.Models; using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; namespace GameIdeas.BlazorApp.Shared.Components.Select; public partial class MultipleSelectList { + [Inject] IJSRuntime JS { get; set; } = default!; [Parameter] public IEnumerable? Values { get; set; } [Parameter] public EventCallback?> ValuesChanged { get; set; } [Parameter] public IEnumerable> Items { get; set; } = []; @@ -16,6 +18,14 @@ public partial class MultipleSelectList private bool IsContentOpen = false; private SearchInput? SearchInput; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await JS.InvokeVoidAsync("addResizeListener"); + + await base.OnAfterRenderAsync(firstRender); + } + private async Task HandleItemClicked(SelectElement selectedValue) { selectedValue.IsSelected = !selectedValue.IsSelected; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css index b229fa7..db31296 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css @@ -8,14 +8,13 @@ min-width: 100%; margin-top: 4px; position: absolute; - z-index: var(--index-dropdown) + z-index: var(--index-dropdown); + border-radius: var(--small-radius); } .select-content { - overflow: hidden; display: flex; flex-direction: column; - border-radius: var(--small-radius); animation-name: fade-in; animation-duration: 0.4s; background: var(--dropdown-content); @@ -41,3 +40,25 @@ color: #bbb; } +/* width */ +.select-container::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +.select-container::-webkit-scrollbar-track { + background: var(--input-secondary); + border-radius: 0 var(--small-radius) var(--small-radius) 0; +} + +/* Handle */ +.select-container::-webkit-scrollbar-thumb { + background: #555; + border-radius: var(--small-radius); +} + + /* Handle on hover */ + .select-container::-webkit-scrollbar-thumb:hover { + background: #777; + } + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js new file mode 100644 index 0000000..3506868 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js @@ -0,0 +1,19 @@ +function offset(el) { + var rect = el.getBoundingClientRect(), + scrollLeft = window.scrollY || document.documentElement.scrollLeft, + scrollTop = window.scrollX || document.documentElement.scrollTop; + return { top: rect.top + scrollTop, left: rect.left + scrollLeft } +} + +function resizeSelectContent() { + const height = window.innerHeight; + const selects = document.getElementsByClassName('select-container'); + for (var i = 0; i < selects.length; i++) { + selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px"; + } +} + +window.addResizeListener = () => { + resizeSelectContent(); + window.addEventListener('resize', resizeSelectContent); +}; \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html index 4d324bb..13a0479 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html @@ -26,6 +26,8 @@ 🗙 + +