improve ux of profiles and search results

NielsPilgaard · Jun 14, 2023 · ce7c162 · ce7c162
1 parent 69a7076
commit ce7c162
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 34 deletions.
diff --git a/src/web/Client/Features/UserSearch/UserSearchResultComponent.razor b/src/web/Client/Features/UserSearch/UserSearchResultComponent.razor
@@ -29,34 +29,35 @@
                                     <MudTextField Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" T="string" Text="@($"{user.FirstName} {user.LastName}".TrimEnd())" ReadOnly />
                                 </MudItem>
 
-                                @if (user.LookingFor.Any())
+                                @if (user.Children.Any())
                                 {
                                     <MudItem xs="12">
-                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
+                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
                                     </MudItem>
                                     <MudItem xs="12">
-                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-center flex-grow-1 gap-3">
-                                        @foreach (var lookingFor in user.LookingFor)
+                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1 gap-3">
+                                            @foreach (var child in user.Children.OrderBy(c => c.DateOfBirth))
                                             {
-                                                <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
+                                                <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="GetAgeString(child)">
+                                                    <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
+                                                </MudBadge>
                                             }
                                         </MudChipSet>
                                     </MudItem>
                                 }
 
-                                @if (user.Children.Any())
+                                @if (user.LookingFor.Any())
                                 {
-                                    <MudDivider />
+                                  <MudDivider />
+
                                     <MudItem xs="12">
-                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
+                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
                                     </MudItem>
                                     <MudItem xs="12">
-                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-center flex-grow-1 gap-3">
-                                        @foreach (var child in user.Children.OrderBy(c => c.DateOfBirth))
+                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1">
+                                            @foreach (var lookingFor in user.LookingFor)
                                             {
-                                                <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="GetAgeString(child)">
-                                                    <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
-                                                </MudBadge>
+                                                <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
                                             }
                                         </MudChipSet>
                                     </MudItem>

diff --git a/src/web/Client/Pages/Profile/Profile.razor b/src/web/Client/Pages/Profile/Profile.razor
@@ -1,11 +1,15 @@
 @page "/{userName}"
 
-@using System.Net
 @inject ISnackbar Snackbar
 @inject IProfileApiClient ProfileApiClient
 @inject IJSRuntime JsRuntime
 
-<MudFab StartIcon="@Icons.Material.Filled.ArrowBack" Class="mb-5" Color="Color.Primary" OnClick="GoBack"/>
+
+<MetadataComponent Title="@($"{UserName}'s profil")"
+                   Description="@($"Beskrivelse af {UserName}:\n {_profile?.Description}")"
+                   Image="@_profile?.ProfilePictureUrl" />
+
+<MudFab StartIcon="@Icons.Material.Filled.ArrowBack" Class="mb-5" Color="Color.Primary" OnClick="GoBack" />
 
 <MudLoading @bind-Loading="_isLoading" Darken Overlap>
     @if (_profile is null)
@@ -26,37 +30,42 @@
                 <MudTextField AdornmentIcon="@Icons.Material.Filled.Place" Adornment="Adornment.Start" T="string" Text="@_profile.DisplayLocation()" ReadOnly />
             </MudItem>
             <MudItem xs="12">
-                <MudTextField Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" T="string" Text="@($"{_profile.FirstName} {_profile.LastName}".TrimEnd())" ReadOnly />
+                <MudTextField Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" T="string" Text="@($"{_profile.FirstName} {_profile.LastName}")" ReadOnly />
+            </MudItem>
+            <MudItem xs="12">
+                <MudText Typo="Typo.body1">
+                    @_profile.Description
+                </MudText>
             </MudItem>
 
-            @if (_profile.LookingFor.Any())
+            @if (_profile.ChildProfiles.Any())
             {
                 <MudItem xs="12">
-                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
+                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
                 </MudItem>
-                <MudItem xs="12">
+                <MudItem xs="12" Class="d-flex justify-start">
                     <MudChipSet ReadOnly>
-                    @foreach (var lookingFor in _profile.LookingFor)
+                    @foreach (var child in _profile.ChildProfiles)
                         {
-                            <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
+                            <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="child.GetAge()">
+                                <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
+                            </MudBadge>
                         }
                     </MudChipSet>
                 </MudItem>
             }
 
-            @if (_profile.ChildProfiles.Any())
+            @if (_profile.LookingFor.Any())
             {
-                <MudDivider />
-                <MudItem xs="12">
-                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
+              <MudDivider />
+              <MudItem xs="12">
+                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
                 </MudItem>
-                <MudItem xs="12" Class="d-flex justify-center">
+                <MudItem xs="12" Class="d-flex justify-start">
                     <MudChipSet ReadOnly>
-                    @foreach (var child in _profile.ChildProfiles)
+                    @foreach (var lookingFor in _profile.LookingFor)
                         {
-                            <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="child.GetAge()">
-                                <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
-                            </MudBadge>
+                            <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
                         }
                     </MudChipSet>
                 </MudItem>
@@ -90,8 +99,8 @@
         _isLoading = false;
     }
 
-  private async Task GoBack()
-  {
-    await JsRuntime.InvokeVoidAsync("history.back");
-  }
+    private async Task GoBack()
+    {
+        await JsRuntime.InvokeVoidAsync("history.back");
+    }
 }
diff --git a/src/web/Client/Pages/Users/Search.razor b/src/web/Client/Pages/Users/Search.razor
@@ -4,6 +4,9 @@
 @inject ISnackbar Snackbar
 @inject ISessionStorageService SessionStorage
 
+<MetadataComponent Title="Mini Møder - Søg efter brugere"
+                   Description="Søg efter brugere" />
+
 <MudLoading @bind-Loading="_isSearching" Darken Overlap>
 
     <UserSearchForm OnValidSubmit="@UserSearch" @bind-Filter="_filter" />