Enhance InteractionRow and ProspectContainer: refactor layout to use grid, improve styling, and add interaction handling

.gitignore

@@ -16,3 +16,5 @@ FoodsharingSiegen.Server/Shared/NavMenu.razor.css
 FoodsharingSiegen.Server/wwwroot/css/site.css
 FoodsharingSiegen.Server/wwwroot/css/site.min.css
 FoodsharingSiegen.Server/wwwroot/css/site.css.map
+FoodsharingSiegen.Server/Controls/ProspectContainer.razor.css
+FoodsharingSiegen.Server/Controls/ProspectContainer.razor.css.map

FoodsharingSiegen.Server/Controls/InteractionRow.razor

@@ -5,52 +5,63 @@
 @inherits FsBase
 
 @{
+    var colorClass = "";
+    if(Done) colorClass = "interaction--color-done";
+
     var rowClass = "";
     if (Done) rowClass += " done";
     if (NotNeeded) rowClass += " notneeded";
     if (Alert) rowClass += " fs-alert";
 }
 
-<tr class="@rowClass" style="border-top: 5px solid transparent;">
-    <th class="text-center align-top pr-2">
-        <i class="@IconClass"></i>
-    </th>
-    <th class="pr-2 align-top" style="white-space: nowrap;">@Type.Translate(AppSettings):</th>
-    <td class="align-top d-flex flex-column">
+@if(!AllowInteraction || Prospect is {Complete: true })
+{
+    <Button Size="Size.Small" Disabled="true">
+        <i class="@ButtonIconClass"></i>
+    </Button>
+} 
+else
+{
+    @if(Interactions.Count == 0 || Multiple)
+    {
+        if (Multiple) ButtonIconClass = "fa-solid fa-plus";
+        <Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
+    } else {
+        <Button Size="Size.Small" Clicked="@(async () => { await RemoveFirstAsync(Type); })"><i class="fa-solid fa-times" style="color: rgb(153, 0, 0);"></i></Button>
+    }
+}
+
+<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+    <div class="@colorClass" style="display: inline-block;"><i class="@IconClass"></i> @Type.Translate(AppSettings)</div>
+    
     @if(Interactions.Count > 0)
     {
-            foreach (var interaction in Interactions)
-            {
-                <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) && AllowInteraction)
-                        {
-                            <span>&nbsp;<a href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a></span>
+        <span title="@Interactions.First().User.Memo"> (@Interactions.First().User.Name</span> <span>@Interactions.First().Date.ToShortDateString())</span>
     }
 </div>
 
-                    <div>
-                        @FeedbackBuilder(interaction)
-                    </div>
+@if(Multiple && Interactions.Count > 0)
+{
     
+    @foreach (var interaction in Interactions)
+    {
+        <div class="d-flex justify-content-end">
+            @if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowInteraction)
+            {
+                <a style="display: inline-block;"" href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a>
+            } else {
+                <span>&bull;</span>
+            }
+        </div>
         <div>
+            <div>
+                <span title="@interaction.User.Memo">@interaction.User.Name (@interaction.Date.ToShortDateString())</span>
                 @if (!string.IsNullOrWhiteSpace(interaction.FeedbackInfo))
                 {
                     <span>(<i>@interaction.FeedbackInfo</i>)</span>
                 }
             </div>
+            @FeedbackBuilder(interaction)
         </div>
     }
 }
-
-        @if (Prospect is not {Complete: true } && (Interactions.Count == 0 || Multiple) && AllowInteraction)
-        {
-            if (Multiple) ButtonIconClass = "fa-solid fa-plus";
-            <div class="m-auto">
-                <Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
-            </div>
-        }
-    </td>
-</tr>

FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs

@@ -94,6 +94,15 @@ namespace FoodsharingSiegen.Server.Controls
 
         #endregion
 
+        private async Task RemoveFirstAsync(InteractionType type)
+        {
+            if (Prospect != null && RemoveClick != null)
+            {
+                var interaction = Interactions.FirstOrDefault(x => x.Type == type);
+                if (interaction != null) await RemoveClick(interaction.Id);
+            }
+        }
+
         private MarkupString FeedbackBuilder(Interaction interaction)
         {
             var infoList = new List<string>();

FoodsharingSiegen.Server/Controls/ProspectContainer.razor

@@ -51,8 +51,7 @@
         </Alert>
     }
 
-    <table class="flex-column" style="width: 100%;">
-
+    <div class="interaction-grid mb-3">
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.Welcome"
@@ -63,12 +62,6 @@
             IconClass="fa-solid fa-handshake-simple">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         @if (!AppSettings.DisableStepIn)
         {
             <InteractionRow
@@ -94,12 +87,6 @@
             IconClass="fa-solid fa-basket-shopping">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.ReleasedForVerification"
@@ -145,14 +132,14 @@
                 IconClass="fa-solid fa-user-check">
             </InteractionRow>
         }
-
-    </table>
+    </div>
     
     <div class="flex-grow-1"></div>
 
     @if(Prospect?.Images?.Count > 0)
-    {<div class="text-center mt-3">
-        <Badge Color="Color.Info" Style="margin-bottom: 0.5rem;">Perso-Check möglich</Badge></div>
+    {
+        <div class="text-center mt-3">
+        <Badge Color="Color.Info" Style="margin-bottom: 0.5rem; cursor: pointer;" @onclick="OpenVerificationDialogAsync"><i class="fa-solid fa-address-card"></i>-Prüfung möglich</Badge></div>
     }      
 
     <div class="text-center d-flex justify-content-center gap-2 mt-1">

FoodsharingSiegen.Server/Controls/ProspectContainer.razor.css

@@ -1,55 +0,0 @@
-::deep a,
-::deep a.invert:hover{
-    
-    color: #64ae24;
-}
-
-::deep a.invert,
-::deep a:hover {
-    color: #533a20;
-}
-
-.green {
-    color: #64ae24;
-}
-
-.pc-main {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    max-width: none;
-    border-radius: 12px;
-    margin: 0;
-    padding: 1rem 1rem 0 1rem;
-}
-
-@media (max-width: 576px) {
-    .pc-main {
-        padding: .5rem .5rem 0 .5rem;
-    }
-}
-
-.pc-main.warning {
-    -webkit-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
-    -moz-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
-    box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
-}
-
-.pc-main.deleted {
-    -webkit-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
-    -moz-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
-    box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
-}
-
-.complete {
-    background: #76ff003b;
-}
-
-i.link {
-    cursor: pointer; color: #64ae24;
-}
-
-i.link:hover {
-    color: #000;
-}

FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss

@@ -0,0 +1,72 @@
+::deep a {
+    color: #64ae24;
+    display: block;
+
+    &.invert,
+    &:hover {
+        color: #533a20;
+    }
+
+    &.invert:hover {
+        color: #64ae24;
+    }
+}
+
+.green {
+    color: #64ae24;
+}
+
+.pc-main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    max-width: none;
+    border-radius: 12px;
+    margin: 0;
+    padding: 1rem 1rem 0 1rem;
+
+    @media (max-width: 576px) {
+        padding: .5rem .5rem 0 .5rem;
+    }
+
+    &.warning {
+        -webkit-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
+        -moz-box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
+        box-shadow: 0 0 9px 4px rgba(214,100,23,0.87);
+    }
+
+    &.deleted {
+        -webkit-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
+        -moz-box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
+        box-shadow: 0 0 9px 4px rgb(214 23 23 / 87%);
+    }
+}
+
+.complete {
+    background: #76ff003b;
+}
+
+i.link {
+    cursor: pointer;
+    color: #64ae24;
+
+    &:hover {
+        color: #000;
+    }
+}
+
+.interaction-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: .5rem;
+
+    ::deep .interaction {
+        &--color {
+            &-done{
+                color: #64ae24;
+            }
+        }
+    }
+}

FoodsharingSiegen.Server/Program.cs

@@ -1,4 +1,5 @@
 using System.Globalization;
+using AspNetCore.SassCompiler;
 using Blazorise;
 using Blazorise.Icons.Material;
 using Blazorise.Material;
@@ -19,6 +20,9 @@ builder.WebHost.UseUrls("http://+:8700");
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.AddDatabaseContext();
+#if DEBUG
+builder.Services.AddSassCompiler();
+#endif
 
 // DI
 builder.Services.AddScoped<LocalStorageService>();

FoodsharingSiegen.Server/sasscompiler.json

@@ -0,0 +1,10 @@
+{
+  "GenerateScopedCss": true,
+  "ScopedCssFolders": [
+    "Views",
+    "Pages",
+    "Shared",
+    "Components",
+    "Controls"
+  ]
+}