Gottfried/KI-Kunst-Kirsten-Kloeckner
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases Wiki Activity

Ein paar Websiten hinzugefügt

Browse Source
This commit is contained in:
jankaminski1
2023-08-18 14:57:12 +02:00
parent 31c3e33b11
commit 705146cb8b
13 changed files with 485 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
KIKunstKirstenKlöckner/Pages/Gallery.razor
View File

@ -1,29 +1,5 @@
@page "/gallery"
<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
<Template Context="imagePath">
<div class="image-grid-item">
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
<RadzenButton Click="@(args => ShowImageInfo(imagePath))">
<RadzenImage Src="@imagePath" 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>
<style>
.image-grid {
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
@ -80,6 +56,32 @@
}
</style>
<div>
<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
<Template Context="imagePath">
<div class="image-grid-item">
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
<RadzenButton Click="@(args => ShowImageInfo(imagePath))">
<RadzenImage Src="@imagePath" 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 {
List<string> imagePaths = new List<string>();
string selectedImage;