Gallerie zumindest etwas schicker gemacht

KIKunstKirstenKlöckner/Pages/Gallery.razor

@@ -3,117 +3,68 @@
 @using DataAccess.Data
 @using DataAccess.Models
 
+@inject DialogService DialogService;
 @inject BildInfoData BildInfoData;
 @inject WunschInfoData WunschInfoData;
 
 <style>
-    .image-grid {
+    .small-image {
-        background-color: white; /* Hintergrund der RadzenDataList weiß machen */
+        width: 10em;
+        height: 10em;
+        z-index: auto;
+        margin: 0.5em;
+        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+        border-radius: 1em;
+        /* Gibt an, dass Änderungen an der transform-Eigenschaft innerhalb von 0.2s angewandt werden.*/
+        transition: transform 0.2s;
     }
 
-    .rz-data-list {
+    /* Style, der angewendet wird, wenn über small-image gehovert wird. */
-        display: flex;
+    .small-image:hover {
-        flex-wrap: wrap;
+        transform: scale(1.1, 1.1);
-        justify-content: center;
+        z-index: 100;
-    }
-
-    .image-grid-item {
-        margin: 5px;
-    }
-
-    .image-popup {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
-        z-index: 9999;
-    }
-
-    .image-popup-content {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        max-width: 800px;
-        max-height: 400px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        padding: 20px;
-        border-radius: 5px;
-        background-color: white; /* Weißer Hintergrund für den Inhalt */
-    }
-
-    .image-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .close-button {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-end;
     }
 </style>
 
-<div>
+<RadzenDataList WrapItems="@true" AllowPaging="true" PageSize="40" Data="@_bildInfos" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
-    <RadzenDataList WrapItems="@true" AllowPaging="true" Data="@_bildInfos" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
+    <Template Context="bildInfo">
-        <Template Context="bildInfo">
+        <RadzenImage class="small-image" Src="@bildInfo.Dateiname" Click="@(args => ShowImageDialog(bildInfo))" />
-            <div class="image-grid-item">
+    </Template>
-                <RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
+</RadzenDataList>
-                    <RadzenButton Click="@(args => ShowImageInfo(bildInfo))">
-                        <RadzenImage Src="@bildInfo.Dateiname" Style="width: 100%; height: 100%; object-fit: cover;" />
-                    </RadzenButton>
-                </RadzenCard>
-            </div>
-        </Template>
-    </RadzenDataList>
-
-    <div class="image-popup" style="@popupStyle">
-        <div class="image-popup-content">
-            <div class="image-info">
-                <RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
-                <p>@infoText</p>
-            </div>
-            <div class="close-button">
-                <RadzenButton Text="Close" Click="CloseImageInfo" />
-            </div>
-        </div>
-    </div>
-</div>
 
 @code {
-    string selectedImage;
-    string infoText = "Info Text";
-    string popupStyle = "display: none;";
-
     IEnumerable<BildInfoModel>? _bildInfos;
 
     protected override async Task OnInitializedAsync()
     {
-        await base.OnInitializedAsync();
-
         _bildInfos = await BildInfoData.GetAllBildInfosAsync();
+
+        await base.OnInitializedAsync();
     }
     
-    private async void ShowImageInfo(BildInfoModel bildInfo)
+    async Task ShowImageDialog(BildInfoModel bildInfo)
     {
-        selectedImage = bildInfo.Dateiname;
-        popupStyle = "display: block;";
-
         WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
-        infoText = wunschInfo.BildBeschreibung;
-    }
 
-    private void CloseImageInfo()
+        List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
-    {
+
-        popupStyle = "display: none;";
+        var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
+            @<div>
+                <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
+                    <RadzenStack Orientation="Orientation.Horizontal">
+                        <RadzenStack Orientation="Orientation.Vertical">
+                            <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
+                        </RadzenStack>
+                        <RadzenText Text="@wunschInfo.BildBeschreibung"/>
+                    </RadzenStack>
+                    @foreach (var bild in bilderVomWunsch)
+                    {
+                        <RadzenImage class="small-image" Path="@bild.Dateiname" 
+                                     Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
+                    }
+                </RadzenStack>
+            </div>, 
+            new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
     }
 
     [Inject]