NavBar layout achieved
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
@page "/searchshows"
|
||||
@using MovieActorLookup.Models
|
||||
@inject ShowService ShowService
|
||||
@inject IJSRuntime JSRuntime
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<div class="search-container">
|
||||
@@ -77,6 +78,12 @@
|
||||
<div class="card-content">
|
||||
<h5 class="show-title">@_matchedShow.ShowTitle</h5>
|
||||
<div class="character-name">as @_matchedShow.CharacterName</div>
|
||||
@if (!string.IsNullOrEmpty(_matchedShow.Overview?.Trim()))
|
||||
{
|
||||
<p class="show-overview expanded">
|
||||
@_matchedShow.Overview.Trim()
|
||||
</p>
|
||||
}
|
||||
<div class="air-date">First aired: @_matchedShow.FirstAirDate</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,7 +122,17 @@
|
||||
<div class="character-name">as @show.CharacterName</div>
|
||||
@if (!string.IsNullOrEmpty(show.Overview))
|
||||
{
|
||||
<p class="show-overview">@(show.Overview.Length > 120 ? show.Overview.Substring(0, 120) + "..." : show.Overview)</p>
|
||||
<div class="overview-container">
|
||||
<p class="show-overview @(IsOverviewExpanded(show.ShowTitle) ? "expanded" : "truncated")">
|
||||
@show.Overview
|
||||
</p>
|
||||
@if (show.Overview.Length > 150)
|
||||
{
|
||||
<button class="read-more-btn" @onclick="() => ToggleOverview(show.ShowTitle)">
|
||||
@(IsOverviewExpanded(show.ShowTitle) ? "Show less" : "Read more")
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="air-date">@show.FirstAirDate</div>
|
||||
</div>
|
||||
@@ -254,22 +271,8 @@
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top: 2px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* keyframes spin {
|
||||
0%
|
||||
|
||||
{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
} */
|
||||
|
||||
.loading-state, .welcome-state, .no-results {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
@@ -288,31 +291,8 @@
|
||||
height: 8px;
|
||||
background: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loading-dot:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
/* keyframes bounce {
|
||||
0%, 80%, 100%
|
||||
|
||||
|
||||
{
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
} */
|
||||
|
||||
.welcome-icon, .no-results-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
@@ -376,7 +356,7 @@
|
||||
|
||||
.shows-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -407,14 +387,16 @@
|
||||
|
||||
.poster-container {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.poster-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
background-color: #f8f9fa;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -460,6 +442,34 @@
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.show-overview.truncated {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.show-overview.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0;
|
||||
margin-top: 0.5rem;
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.read-more-btn:hover {
|
||||
color: #4c63d2;
|
||||
}
|
||||
|
||||
.air-date {
|
||||
color: #999;
|
||||
font-size: 0.85rem;
|
||||
@@ -495,12 +505,82 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.startAnimations = () => {
|
||||
console.log('Starting animations...');
|
||||
|
||||
// Spinner animation
|
||||
const spinners = document.querySelectorAll('.spinner');
|
||||
console.log('Found spinners:', spinners.length);
|
||||
|
||||
spinners.forEach((spinner, index) => {
|
||||
let rotation = 0;
|
||||
const animate = () => {
|
||||
rotation += 6;
|
||||
spinner.style.transform = `rotate(${rotation}deg)`;
|
||||
if (document.body.contains(spinner)) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
});
|
||||
|
||||
// Loading dots bounce animation
|
||||
const loadingDots = document.querySelectorAll('.loading-dot');
|
||||
console.log('Found loading dots:', loadingDots.length);
|
||||
|
||||
loadingDots.forEach((dot, index) => {
|
||||
let scale = 0;
|
||||
let direction = 1;
|
||||
const delay = index * 300;
|
||||
|
||||
setTimeout(() => {
|
||||
const animate = () => {
|
||||
scale += direction * 0.1;
|
||||
if (scale >= 1) {
|
||||
scale = 1;
|
||||
direction = -1;
|
||||
} else if (scale <= 0.2) {
|
||||
scale = 0.2;
|
||||
direction = 1;
|
||||
}
|
||||
|
||||
dot.style.transform = `scale(${scale})`;
|
||||
|
||||
if (document.body.contains(dot)) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
}, delay);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@code {
|
||||
private string _tvTitle = "";
|
||||
private string _characterName = "";
|
||||
private Actor _actor;
|
||||
private TvCharacter _matchedShow;
|
||||
private bool _isSearching = false;
|
||||
private HashSet<string> _expandedOverviews = new HashSet<string>();
|
||||
|
||||
private bool IsOverviewExpanded(string showTitle)
|
||||
{
|
||||
return _expandedOverviews.Contains(showTitle);
|
||||
}
|
||||
|
||||
private void ToggleOverview(string showTitle)
|
||||
{
|
||||
if (_expandedOverviews.Contains(showTitle))
|
||||
{
|
||||
_expandedOverviews.Remove(showTitle);
|
||||
}
|
||||
else
|
||||
{
|
||||
_expandedOverviews.Add(showTitle);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SearchForActorAndCharacters()
|
||||
{
|
||||
@@ -512,6 +592,10 @@
|
||||
_matchedShow = null;
|
||||
StateHasChanged();
|
||||
|
||||
// Start animations after a small delay to ensure DOM is ready
|
||||
await Task.Delay(100);
|
||||
await JSRuntime.InvokeVoidAsync("startAnimations");
|
||||
|
||||
try
|
||||
{
|
||||
var shows = await ShowService.GetShowsByTitle(_tvTitle);
|
||||
|
||||
Reference in New Issue
Block a user