122 lines
3.2 KiB
Plaintext
122 lines
3.2 KiB
Plaintext
@page "/gallery"
|
|
|
|
@using DataAccess.Data
|
|
@using DataAccess.Models
|
|
|
|
@inject BildInfoData BildInfoData;
|
|
@inject WunschInfoData WunschInfoData;
|
|
|
|
<style>
|
|
.image-grid {
|
|
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
|
|
}
|
|
|
|
.rz-data-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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" Data="@_bildInfos" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
|
|
<Template Context="bildInfo">
|
|
<div class="image-grid-item">
|
|
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
|
|
<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();
|
|
}
|
|
|
|
private async void ShowImageInfo(BildInfoModel bildInfo)
|
|
{
|
|
selectedImage = bildInfo.Dateiname;
|
|
popupStyle = "display: block;";
|
|
|
|
WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
|
infoText = wunschInfo.BildBeschreibung;
|
|
}
|
|
|
|
private void CloseImageInfo()
|
|
{
|
|
popupStyle = "display: none;";
|
|
}
|
|
|
|
[Inject]
|
|
private IWebHostEnvironment _environment { get; set; }
|
|
}
|