diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css index 563f058..00c4284 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css @@ -1,6 +1,8 @@ .page { - height: 100%; - overflow: hidden; + display: flex; + flex-direction: column; + max-height: 100vh; + height: 100vh; } .orb { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css index e2e6529..b854400 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css @@ -5,6 +5,8 @@ padding-right: 20px; padding-left: 10px; height: 100%; + box-sizing: border-box; + width: 240px; border-left: 2px solid var(--line); z-index: var(--index-component); } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor index 8ceeca7..f94456b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor @@ -1,4 +1,5 @@ -
+@using GameIdeas.Shared.Constants +
- @if (!string.IsNullOrEmpty(Text)) - { -
- - - -
- } +
+ @if (!string.IsNullOrEmpty(Text)) + { +
+ @ClearIcon +
+ } -
- - @if (Icon == SearchInputIcon.Search) - { - - } - else if (Icon == SearchInputIcon.Dropdown) - { - - } - +
+ @GetSearchIcon() +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs index 755f951..5b8ddfd 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs @@ -1,3 +1,4 @@ +using GameIdeas.Shared.Constants; using Microsoft.AspNetCore.Components; namespace GameIdeas.BlazorApp.Shared.Components.Search; @@ -13,6 +14,7 @@ public partial class SearchInput [Parameter] public SearchInputIcon Icon { get; set; } private ElementReference InputText; + private readonly MarkupString ClearIcon = new(Icons.Search.Clear); protected override void OnInitialized() { @@ -45,4 +47,14 @@ public partial class SearchInput { await FocusIn.InvokeAsync(); } + + private MarkupString GetSearchIcon() + { + return Icon switch + { + SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle), + SearchInputIcon.Search => new MarkupString(Icons.Search.Glass), + _ => new MarkupString() + }; + } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css index eedab03..2b6eddc 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css @@ -9,8 +9,8 @@ background: var(--input-primary); overflow: hidden; align-items: center; - width: 140px; z-index: var(--index-component); + justify-content: space-between; } ::deep .search-field { @@ -34,7 +34,7 @@ cursor: pointer; } - .clear-icon svg { + ::deep .clear-icon svg { fill: var(--white); } @@ -49,11 +49,11 @@ cursor: pointer; } - .search-icon svg { - fill: var(--white); - } +::deep .search-icon svg { + fill: var(--white); +} - .search-icon.dropdown svg { - fill: var(--violet); - transform: scale(.8, .5); - } +::deep .search-icon.dropdown svg { + fill: var(--violet); + transform: scale(.8, .5); +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs index 917c9a6..d434875 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs @@ -10,13 +10,6 @@ public partial class SelectListElement [Parameter] public SelectListTheme Theme { get; set; } private async Task HandleItemClicked() { - if (Value == null) - { - return; - } - - Value.IsSelected = true; - StateHasChanged(); await ValueChanged.InvokeAsync(Value); } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css index ad6d4c6..ea41ed2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css @@ -1,8 +1,7 @@ .select-element { display: flex; flex-direction: row; - width: fit-content; - width: 100%; + width: auto; gap: 6px; height: 20px; align-items: center; @@ -17,6 +16,7 @@ min-width: 12px; height: 12px; min-height: 12px; + border: 1px solid var(--line); } .selected svg { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor index 0f91a06..83c296a 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor @@ -13,7 +13,7 @@ SearchClicked="HandleSearchClicked" FocusIn="HandleTextFocusIn"/>
-
+
@if (IsContentOpen) { 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 7fb4b15..870cf7c 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 @@ -26,9 +26,17 @@ public partial class MultipleSelectList await ValuesChanged.InvokeAsync(Values); } - private void HandleTextChanged() + private async Task HandleTextChanged() { IsContentOpen = false; + + foreach (var item in Items) + { + item.IsSelected = false; + } + + Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!); + await ValuesChanged.InvokeAsync(Values); } private void HandleSearchClicked() 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 3f5a5d9..b229fa7 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 @@ -3,15 +3,14 @@ } .select-container { + overflow: auto; + right: 0; + min-width: 100%; margin-top: 4px; position: absolute; z-index: var(--index-dropdown) } -.align-right { - right: 0; -} - .select-content { overflow: hidden; display: flex; @@ -33,24 +32,12 @@ border-bottom: 2px solid var(--input-selected); } -/***** Filter Theme *****/ -.select-content.filter { - min-width: 140px; -} - -/***** Advanced Filter Theme *****/ -.select-content.advancedfilter { - min-width: 210px; -} - ::deep .select-button.advancedfilter .search-container { height: 24px; - width: 210px; - border: 2px solid var(--input-selected); background: var(--input-secondary); } ::deep .select-button.advancedfilter .search-container input::placeholder { - color: #ddd; + color: #bbb; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index c8e9eca..95c1137 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -40,7 +40,6 @@ html, body, #app { margin: 0; padding: 0; height: 100%; - overflow: hidden; } .valid.modified:not([type=checkbox]) { diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs new file mode 100644 index 0000000..5c2f030 --- /dev/null +++ b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs @@ -0,0 +1,23 @@ +namespace GameIdeas.Shared.Constants; + +public static class Icons +{ + private const string OpenBraket = ""; + private const string CloseBraket = ""; + + + public static class Search + { + public const string Clear = OpenBraket + + "" + + CloseBraket; + + public const string Glass = OpenBraket + + "" + + CloseBraket; + + public const string Triangle = OpenBraket + + "" + + CloseBraket; + } +}