Compare commits
5 Commits
538445760e
...
98810ad1fc
Author | SHA1 | Date |
---|---|---|
klappstuhl24 | 98810ad1fc | |
klappstuhl24 | 3fb4ab3934 | |
klappstuhl24 | 74fe4ca4a1 | |
klappstuhl24 | a4e6cc4518 | |
klappstuhl24 | 5d8d3f1f2f |
|
@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
|
|||
EndProject
|
||||
Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
@using KIKunstKirstenKlöckner.Data
|
||||
@using System.Diagnostics
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@inject IConfiguration Config
|
||||
@inject TooltipService TooltipService
|
||||
@inject NotificationService NotificationService
|
||||
|
@ -64,8 +65,12 @@
|
|||
</ChildContent>
|
||||
</RadzenPanel>
|
||||
|
||||
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
|
||||
<RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
|
||||
|
||||
@if (_imageSectionVisible)
|
||||
{
|
||||
<section id="imageSection">
|
||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
||||
<RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
|
||||
|
||||
<RadzenCard class="rz-mt-4" Style="width: 800px;">
|
||||
|
@ -125,6 +130,9 @@
|
|||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenCard>
|
||||
</RadzenStack>
|
||||
</section>
|
||||
}
|
||||
|
||||
</RadzenStack>
|
||||
</div>
|
||||
|
@ -142,6 +150,7 @@
|
|||
private bool _buttonVisible = true;
|
||||
private bool _addonsVisible = false;
|
||||
private bool _bothVisible = false;
|
||||
private bool _imageSectionVisible = false;
|
||||
|
||||
public string BusyMessage { get; set; } = "Initial Message";
|
||||
|
||||
|
@ -156,6 +165,15 @@
|
|||
FadeIn
|
||||
}
|
||||
|
||||
private async Task OnGenerateButtonClickAsync()
|
||||
{
|
||||
_imageSectionVisible = true;
|
||||
StateHasChanged();
|
||||
await Task.Delay(100);
|
||||
await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
|
||||
await GenerateImagesAsync();
|
||||
}
|
||||
|
||||
async Task ShowImageDialog(string imageUrl)
|
||||
{
|
||||
var result = await DialogService.OpenAsync("", ds =>
|
||||
|
|
|
@ -33,11 +33,11 @@
|
|||
</RadzenDataList>
|
||||
|
||||
@code {
|
||||
IEnumerable<BildInfoModel>? _bildInfos;
|
||||
List<BildInfoModel>? _bildInfos;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_bildInfos = await BildInfoData.GetAllBildInfosAsync();
|
||||
_bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
@ -46,27 +46,54 @@
|
|||
{
|
||||
WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
|
||||
int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));
|
||||
|
||||
List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
|
||||
async Task ButtonLeft()
|
||||
{
|
||||
listIndex = (listIndex != 0) ? listIndex - 1 : 0;
|
||||
bildInfo = _bildInfos[listIndex];
|
||||
wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
DialogService.Refresh();
|
||||
}
|
||||
|
||||
async Task ButtonRight()
|
||||
{
|
||||
listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
|
||||
bildInfo = _bildInfos[listIndex];
|
||||
wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
|
||||
bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
|
||||
DialogService.Refresh();
|
||||
}
|
||||
|
||||
|
||||
var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
|
||||
@<div>
|
||||
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
|
||||
<RadzenStack Orientation="Orientation.Horizontal">
|
||||
<RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
|
||||
<div>
|
||||
<RadzenStack Orientation="Orientation.Vertical">
|
||||
<RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
|
||||
</RadzenStack>
|
||||
<RadzenText Text="@wunschInfo.BildBeschreibung" />
|
||||
</div>
|
||||
<RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
|
||||
</RadzenStack>
|
||||
@foreach (var bild in bilderVomWunsch)
|
||||
{
|
||||
<RadzenImage class="small-image" Path="@bild.Dateiname"
|
||||
Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
|
||||
Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
|
||||
}
|
||||
</RadzenStack>
|
||||
</div>,
|
||||
</div>
|
||||
,
|
||||
new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
|
||||
}
|
||||
|
||||
|
||||
[Inject]
|
||||
private IWebHostEnvironment _environment { get; set; }
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
@page "/"
|
||||
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<div class="hero_area">
|
||||
|
||||
|
@ -69,7 +69,7 @@
|
|||
|
||||
|
||||
<!-- about section -->
|
||||
<section class="about_section layout_padding">
|
||||
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about_section layout_padding">
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
@ -141,11 +141,22 @@
|
|||
<!-- end about section -->
|
||||
|
||||
|
||||
@code {
|
||||
private ElementReference animatedAboutSection1;
|
||||
private ElementReference animatedAboutSection2;
|
||||
|
||||
|
||||
private List<ElementReference> animatedElements = new List<ElementReference>();
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
animatedElements.Add(animatedAboutSection1);
|
||||
animatedElements.Add(animatedAboutSection2);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -27,6 +27,9 @@
|
|||
</div>
|
||||
<!-- explaining section -->
|
||||
<div class="container">
|
||||
<NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
|
||||
<span class="nav-link">Erklärung</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -42,6 +42,8 @@
|
|||
<link href="css/style.css" rel="stylesheet" />
|
||||
<!-- responsive style -->
|
||||
<link href="css/responsive.css" rel="stylesheet" />
|
||||
<!-- animations style -->
|
||||
<link href="css/animations.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
@ -63,6 +65,7 @@
|
|||
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/animator.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,52 @@
|
|||
.text-animate {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
.text-animate.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-animate-left {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
left: -100%;
|
||||
transition: left 2s ease-in-out, opacity 2s ease-in-out;
|
||||
}
|
||||
|
||||
.image-animate-left.visible {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-animate-left {
|
||||
width: 100% margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
left: -100%;
|
||||
transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-animate-left.visible {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-animate-right {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-animate-right.visible {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
After Width: | Height: | Size: 332 KiB |
|
@ -0,0 +1,25 @@
|
|||
function initScrollAnimations(elements) {
|
||||
function checkVisibility(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return rect.top < window.innerHeight && rect.bottom >= 0;
|
||||
}
|
||||
|
||||
function animateElements() {
|
||||
elements.forEach(element => {
|
||||
if (checkVisibility(element)) {
|
||||
element.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', animateElements);
|
||||
|
||||
animateElements();
|
||||
}
|
||||
|
||||
function scrollToElement(elementId) {
|
||||
var element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue