Compare commits
No commits in common. "98810ad1fc9d389c8d3e706d8f3542b3a4d25f33" and "538445760e109e879ebf6c13f15fd072c803462e" have entirely different histories.
98810ad1fc
...
538445760e
|
@ -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("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
@using KIKunstKirstenKlöckner.Data
|
||||
@using System.Diagnostics
|
||||
|
||||
@inject IJSRuntime JSRuntime
|
||||
@inject IConfiguration Config
|
||||
@inject TooltipService TooltipService
|
||||
@inject NotificationService NotificationService
|
||||
|
@ -65,12 +64,8 @@
|
|||
</ChildContent>
|
||||
</RadzenPanel>
|
||||
|
||||
<RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
|
||||
<RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>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;">
|
||||
|
@ -130,9 +125,6 @@
|
|||
</RadzenColumn>
|
||||
</RadzenRow>
|
||||
</RadzenCard>
|
||||
</RadzenStack>
|
||||
</section>
|
||||
}
|
||||
|
||||
</RadzenStack>
|
||||
</div>
|
||||
|
@ -150,7 +142,6 @@
|
|||
private bool _buttonVisible = true;
|
||||
private bool _addonsVisible = false;
|
||||
private bool _bothVisible = false;
|
||||
private bool _imageSectionVisible = false;
|
||||
|
||||
public string BusyMessage { get; set; } = "Initial Message";
|
||||
|
||||
|
@ -165,15 +156,6 @@
|
|||
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 {
|
||||
List<BildInfoModel>? _bildInfos;
|
||||
IEnumerable<BildInfoModel>? _bildInfos;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
|
||||
_bildInfos = await BildInfoData.GetAllBildInfosAsync();
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
@ -46,54 +46,27 @@
|
|||
{
|
||||
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="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
|
||||
Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
|
||||
}
|
||||
</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-animate-left" @ref="animatedAboutSection1">
|
||||
<section class="about_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
|
||||
<section class="about_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
@ -141,22 +141,11 @@
|
|||
<!-- 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,9 +27,6 @@
|
|||
</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,8 +42,6 @@
|
|||
<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>
|
||||
|
@ -65,7 +63,6 @@
|
|||
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/animator.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,52 +0,0 @@
|
|||
.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.
Before Width: | Height: | Size: 12 MiB |
Binary file not shown.
Before Width: | Height: | Size: 332 KiB |
|
@ -1,25 +0,0 @@
|
|||
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