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

Fix multi select list height
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 1m0s
Details

Browse Source
This commit is contained in:
Maxime Adler
2025-04-08 15:57:35 +02:00
parent 7cd289fc5d
commit c9473307f6
5 changed files with 148 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs
View File

@@ -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<SelectElement<string>> Developers = [

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
View File

@@ -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<TItem>
{
[Inject] IJSRuntime JS { get; set; } = default!;
[Parameter] public IEnumerable<TItem>? Values { get; set; }
[Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
[Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
@@ -16,6 +18,14 @@ public partial class MultipleSelectList<TItem>
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<TItem> selectedValue)
{
selectedValue.IsSelected = !selectedValue.IsSelected;

27
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
View File

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

19
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js Normal file
View File

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

2
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
View File

@@ -26,6 +26,8 @@
<span class="dismiss">🗙</span>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
<script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
</body>
</html>