improve readability of category selector on mobile

NielsPilgaard · Dec 15, 2024 · 5146d11 · 5146d11
1 parent 16bec30
commit 5146d11
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/src/web/Jordnaer/Features/Category/CategorySelector.razor b/src/web/Jordnaer/Features/Category/CategorySelector.razor
@@ -1,15 +1,19 @@
 @inject ICategoryCache CategoryCache
 
-<MudSelectExtended ItemCollection="_allCategories"
-                   T="string"
-                   Label="Kategorier"
-                   Placeholder="Vælg"
-                   MultiSelection="true"
-                   ValuePresenter="ValuePresenter.Chip"
-                   AnchorOrigin="Origin.BottomCenter"
-                   SelectedValues="Categories"
-                   SelectedValuesChanged="SelectedCategoriesChanged">
-</MudSelectExtended>
+<MudChipSet T="string" 
+            Style="display: flex; flex-wrap: wrap; justify-content: center;"
+            SelectionMode="SelectionMode.MultiSelection"
+            SelectedValues="Categories"
+            CheckMark
+            Color="Color.Tertiary"
+            SelectedColor="Color.Success"
+            SelectedValuesChanged="SelectedCategoriesChanged"
+            Variant="Variant.Outlined">
+	@foreach (var category in _allCategories)
+	{
+		<MudChip Text="@category" Value="@category" />
+	}
+</MudChipSet>
 @code
 {
     private List<string> _allCategories = [];

diff --git a/src/web/Jordnaer/Features/GroupSearch/GroupSearchForm.razor b/src/web/Jordnaer/Features/GroupSearch/GroupSearchForm.razor
@@ -46,7 +46,7 @@
 					<MudTextField @bind-Value="Filter.Name" Placeholder="Gruppenavn" Label="Søg på navn" Clearable/>
 				</MudItem>
 
-				<MudItem xs="12" sm="11" md="10" lg="9" xl="8" Class="mt-8">
+				<MudItem xs="12" sm="11" md="10" lg="9" xl="8" Class="mt-6">
 
 					<MudButtonGroup OverrideStyles="false" Style="width: 100%;">
 						<MudButton FullWidth

diff --git a/src/web/Jordnaer/Features/UserSearch/UserSearchForm.razor b/src/web/Jordnaer/Features/UserSearch/UserSearchForm.razor
@@ -33,7 +33,7 @@
                     <CategorySelector @bind-Categories="Filter.Categories" />
                 </MudItem>
 
-                <MudItem xs="12" Class="mt-6">
+                <MudItem xs="12" Class="mt-3">
 	                <MudButton OnClick="ToggleAdvancedSearch"
 	                           FullWidth
 	                           Variant="Variant.Outlined"