NavBar layout achieved
This commit is contained in:
@@ -5,12 +5,8 @@
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
<main class="main-content">
|
||||
<article class="content">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
@@ -21,3 +17,108 @@
|
||||
<a href="" class="reload">Reload</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.top-row a {
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.top-row a:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5; /* Optional: for contrast */
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Responsive tweaks */
|
||||
@@media (max-width: 768px) {
|
||||
.sidebar
|
||||
|
||||
{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
padding: 0 16px;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@media (max-width: 480px) {
|
||||
.sidebar
|
||||
|
||||
{
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.top-row a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,39 +1,106 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">I Know Them!</a>
|
||||
</div>
|
||||
</div>
|
||||
@* NavMenu.razor *@
|
||||
<div class="nav-vertical">
|
||||
<!-- Brand -->
|
||||
<a class="nav-brand" href="/">
|
||||
<div class="brand-icon">🎬</div>
|
||||
<div class="brand-text">I Know Them!</div>
|
||||
</a>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="searchmovies">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-reels" viewBox="0 0 16 16">
|
||||
<path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0M1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0" />
|
||||
<path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm6 8.73V7.27l-3.5 1.555v4.35zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1" />
|
||||
<path d="M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0" />
|
||||
</svg> Search Movies
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="searchshows">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tv" viewBox="0 0 16 16">
|
||||
<path d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M13.991 3l.024.001a1.5 1.5 0 0 1 .538.143.76.76 0 0 1 .302.254c.067.1.145.277.145.602v5.991l-.001.024a1.5 1.5 0 0 1-.143.538.76.76 0 0 1-.254.302c-.1.067-.277.145-.602.145H2.009l-.024-.001a1.5 1.5 0 0 1-.538-.143.76.76 0 0 1-.302-.254C1.078 10.502 1 10.325 1 10V4.009l.001-.024a1.5 1.5 0 0 1 .143-.538.76.76 0 0 1 .254-.302C1.498 3.078 1.675 3 2 3zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2" />
|
||||
</svg> TV Show Search
|
||||
</NavLink>
|
||||
</div>
|
||||
<!-- Navigation Links -->
|
||||
<nav class="nav-links">
|
||||
<NavLink href="/" class="nav-link" Match="NavLinkMatch.All">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-text">Home</span>
|
||||
</NavLink>
|
||||
<NavLink href="/searchmovies" class="nav-link">
|
||||
<span class="nav-icon">🎭</span>
|
||||
<span class="nav-text">Movies</span>
|
||||
</NavLink>
|
||||
<NavLink href="/searchshows" class="nav-link">
|
||||
<span class="nav-icon">📺</span>
|
||||
<span class="nav-text">TV Shows</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nav-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 32px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
color: #6c757d;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.nav-vertical
|
||||
|
||||
{
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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