Data loading update, prospect container styling

FoodsharingSiegen.Server/Controls/InteractionRow.razor

@@ -11,32 +11,36 @@
     <th class="text-center align-top pr-2">
         <i class="@IconClass"></i>
     </th>
-    <th class="pr-2 align-top">@Caption:</th>
-    <td class="align-top">
+    <th class="pr-2 align-top" style="white-space: nowrap;">@Caption:</th>
+    <td class="align-top d-flex flex-column">
         @if (Interactions.Count > 0)
         {
             foreach (var interaction in Interactions)
             {
-                <div>
-                    <span title="@interaction.User.Memo">@interaction.User.Name</span> (@interaction.Date.ToShortDateString())
+                <div style="padding-bottom: .5rem;">
+                    <div style="white-space: nowrap;">
+                        <span title="@interaction.User.Memo">@interaction.User.Name</span> (@interaction.Date.ToShortDateString())
+
+                        @if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowAddInteraction)
+                        {
+                            <span>&nbsp;<a href=""><i class="fa-solid fa-square-xmark" @onclick="async () => await RemoveClick.InvokeAsync(interaction.Id)" @onclick:preventDefault></i></a></span>
+                        }
+                    </div>
+                    
                     @if (!string.IsNullOrWhiteSpace(interaction.Info))
                     {
                         <span>(<i>@interaction.Info</i>)</span>
                     }
-
-                    @if ((Prospect is not {Complete: true } || interaction.Type == InteractionType.Complete) && AllowAddInteraction)
-                    {
-                        <span>&nbsp;<a href=""><i class="fa-solid fa-square-xmark" @onclick="async () => await RemoveClick.InvokeAsync(interaction.Id)" @onclick:preventDefault></i></a></span>
-                    }
-
                 </div>
             }
         }
 
         @if (Prospect is not {Complete: true } && (Interactions.Count == 0 || Multiple) && AllowAddInteraction)
         {
-            if (Multiple) ButtonText = "+";
-            <Button Size="Size.Small" Clicked="AddClick">@ButtonText</Button>
+            if (Multiple) ButtonIconClass = "fa-solid fa-plus";
+            <div class="m-auto">
+                <Button Size="Size.Small" Clicked="AddClick"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
+            </div>
         }
     </td>
 </tr>

FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs

@@ -26,7 +26,7 @@ namespace FoodsharingSiegen.Server.Controls
         ///     Gets or sets the value of the button text (ab)
         /// </summary>
         [Parameter]
-        public string? ButtonText { get; set; }
+        public string? ButtonIconClass { get; set; }
 
         /// <summary>
         ///     Gets or sets the value of the caption (ab)

FoodsharingSiegen.Server/Controls/ProspectContainer.razor

@@ -32,7 +32,7 @@
     }
     
     
-    <table>
+    <table style="width: 100%;">
 
         <InteractionRow
             Prospect="Prospect"
@@ -41,7 +41,7 @@
             AddClick="() => AddInteraction(InteractionType.Welcome)"
             RemoveClick="@RemoveInteraction"
             Caption="Begrüßung"
-            ButtonText="Abhaken"
+            ButtonIconClass="fa-solid fa-check"
             IconClass="fa-solid fa-handshake-simple">
         </InteractionRow>
 
@@ -54,18 +54,24 @@
             Caption="Einführungen"
             Multiple="true"
             Minimum="3"
-            ButtonText="Hinzufügen"
+            ButtonIconClass="fa-solid fa-plus"
             IconClass="fa-solid fa-basket-shopping">
         </InteractionRow>
 
+        <tr>
+            <td colspan="3">
+                <hr style="margin: 10px 0;">
+            </td>
+        </tr>
+        
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.IdCheck"
             AllowAddInteraction="@CurrentUser.IsInGroup(UserGroup.Ambassador)"
             AddClick="() => AddInteraction(InteractionType.IdCheck)"
             RemoveClick="@RemoveInteraction"
-            Caption="Perso prüfen"
-            ButtonText="Abhaken"
+            Caption="Perso checken"
+            ButtonIconClass="fa-solid fa-check"
             IconClass="fa-solid fa-magnifying-glass">
         </InteractionRow>
 
@@ -76,7 +82,7 @@
             AddClick="() => AddInteraction(InteractionType.PrintPass)"
             RemoveClick="@RemoveInteraction"
             Caption="FS-Ausweis (print)"
-            ButtonText="Abhaken"
+            ButtonIconClass="fa-solid fa-check"
             IconClass="fa-solid fa-id-card">
         </InteractionRow>
 
@@ -87,10 +93,16 @@
             AddClick="() => AddInteraction(InteractionType.Verify)"
             RemoveClick="@RemoveInteraction"
             Caption="Verifizieren"
-            ButtonText="Abhaken"
+            ButtonIconClass="fa-solid fa-check"
             IconClass="fa-solid fa-user-check">
         </InteractionRow>
 
+        <tr>
+            <td colspan="3">
+                <hr style="margin: 10px 0;">
+            </td>
+        </tr>
+        
         <InteractionRow
             Prospect="Prospect"
             AllowAddInteraction="@CurrentUser.IsInGroup(UserGroup.Ambassador)"
@@ -98,7 +110,7 @@
             AddClick="() => AddInteraction(InteractionType.Complete)"
             RemoveClick="@RemoveInteraction"
             Caption="Fertig"
-            ButtonText="Abhaken"
+            ButtonIconClass="fa-solid fa-check"
             IconClass="fa-solid fa-flag-checkered">
         </InteractionRow>