Got the episodes appearing in a dialog instead of below

This commit is contained in:
Tracy Pearson
2023-02-20 14:23:10 -05:00
parent df57fae27d
commit 68cf150f54
2 changed files with 13 additions and 12 deletions

View File

@@ -1,23 +1,20 @@
@using Dvd.Data
@{
var showClass = IsVisible ? "d-block" : "d-none";
}
@if (Series != null)
{
<div role="dialog">
<div class="toast-container p-6 @showClass" data-bs-autohide="true" data-bs-delay="5000">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="modal @ModalClass" tabindex="-1" style="display:@ModalDisplay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<select @onchange="ChangeSeason">
@foreach (var s in Seasons)
{
<option value=@s>@s</option>
}
</select>
<button type="button" class="btn-close" aria-label="Close" @onclick="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick="Close"></button>
</div>
<div class="toast-body">
<div class="modal-body">
@foreach (var episode in currentSeason.Episodes.Episode)
{
<EpisodeComponent Episode="@episode"></EpisodeComponent>
@@ -31,9 +28,10 @@
@code {
[Parameter]
public DvdSeries Series { get; set; }
private bool IsVisible { get; set; } = false;
private List<string> Seasons { get; set; } = new();
private DvdSeason currentSeason { get; set; }
private string ModalClass = "";
private string ModalDisplay = "none";
public void Close()
{
@@ -41,7 +39,7 @@
}
protected override void OnParametersSet()
{
IsVisible = Series != null;
ModalClass = "";
if (Series != null)
{
currentSeason = Series.Seasons.Season[0];
@@ -50,6 +48,9 @@
{
Seasons.Add(item.Season_name);
}
ModalClass = "Show";
ModalDisplay = "block";
StateHasChanged();
}
base.OnParametersSet();

View File

@@ -1,7 +1,7 @@
@using DvdCollection.Pages.Dvd.Data;
<div class="product-card">
<div class="card">
<h3 class="card-top" alt="Card image cap">@Series.Name</h3>
<h3 class="card-top">@Series.Name</h3>
<div class="card-body">
<h5 class="card-title">@Series.Season_count seasons<a class="btn" @onclick="ShowEpisodes">Episodes</a></h5>
<p class="card-text">@Series.Overview</p>