Gallerie zumindest etwas schicker gemacht
This commit is contained in:
Simon Lübeß
parent
150cb24ce8
commit
9c298c6e76
|
|
@ -3,117 +3,68 @@
|
|||
@using DataAccess.Data
|
||||
@using DataAccess.Models
|
||||
|
||||
@inject DialogService DialogService;
|
||||
@inject BildInfoData BildInfoData;
|
||||
@inject WunschInfoData WunschInfoData;
|
||||
|
||||
<style>
|
||||
.image-grid {
|
||||
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
|
||||
.small-image {
|
||||
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 {
|
||||
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, der angewendet wird, wenn über small-image gehovert wird. */
|
||||
.small-image:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
z-index: 100;
|
||||
}
|
||||
</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>
|
||||
<RadzenDataList WrapItems="@true" AllowPaging="true" PageSize="40" Data="@_bildInfos" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
|
||||
<Template Context="bildInfo">
|
||||
<RadzenImage class="small-image" Src="@bildInfo.Dateiname" Click="@(args => ShowImageDialog(bildInfo))" />
|
||||
</Template>
|
||||
</RadzenDataList>
|
||||
|
||||
@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()
|
||||
{
|
||||
popupStyle = "display: none;";
|
||||
List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
|
||||
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]
|
||||
|
|
|
|||
Loading…
Reference in New Issue