Remove sidebar navigation and floating elements
Deleted NavMenu component and its styles, removed sidebar layout from MainLayout, and cleaned up related CSS. The Home page was simplified by removing floating icons and animation effects. This streamlines the UI and focuses on main content presentation.
This commit is contained in:
@@ -1,10 +1,6 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main class="main-content">
|
||||
<article class="content">
|
||||
@Body
|
||||
@@ -70,55 +66,4 @@
|
||||
.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>
|
||||
|
||||
@@ -69,11 +69,6 @@ main {
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
@* 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>
|
||||
|
||||
<!-- 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,105 +0,0 @@
|
||||
.navbar-toggler {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 3.5rem;
|
||||
height: 2.5rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-toggler:checked {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.75rem;
|
||||
top: -1px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bi-house-door-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-plus-square-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-list-nested-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link {
|
||||
color: #d7d7d7;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.37);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:checked ~ .nav-scrollable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@@ -2,20 +2,7 @@
|
||||
<PageTitle>I Know Them!</PageTitle>
|
||||
|
||||
<div class="landing-page">
|
||||
<div class="floating-elements">
|
||||
<div class="floating-icon">🎬</div>
|
||||
<div class="floating-icon">📺</div>
|
||||
<div class="floating-icon">🎭</div>
|
||||
<div class="floating-icon">🌟</div>
|
||||
<div class="floating-icon">🎪</div>
|
||||
<div class="floating-icon">🎯</div>
|
||||
<div class="floating-icon">🎨</div>
|
||||
<div class="floating-icon">🎵</div>
|
||||
<div class="floating-icon">🎮</div>
|
||||
</div>
|
||||
|
||||
<div class="hero">
|
||||
<div class="pulse-dot"></div>
|
||||
<h1>Welcome to <span class="highlight">I Know Them!</span></h1>
|
||||
<p class="subtitle">Ever watched a movie or show and thought, "I know that actor from somewhere..."?</p>
|
||||
<p class="description">This app helps you quickly identify actors, find out what else they've been in, and explore cast details for your favorite <strong>movies</strong> and <strong>TV shows</strong>.</p>
|
||||
@@ -45,91 +32,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@keyframes gradientFlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-icon {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
animation: float 20s infinite linear;
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(1) {
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(2) {
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(3) {
|
||||
left: 30%;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(4) {
|
||||
left: 40%;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(5) {
|
||||
left: 50%;
|
||||
animation-delay: 16s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(6) {
|
||||
left: 60%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(7) {
|
||||
left: 70%;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(8) {
|
||||
left: 80%;
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.floating-icon:nth-child(9) {
|
||||
left: 90%;
|
||||
animation-delay: 15s;
|
||||
}
|
||||
|
||||
@@keyframes float {
|
||||
0% {
|
||||
transform: translateY(100vh) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
@@ -175,15 +77,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(45deg, #ffeaa7, #fdcb6e);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
animation: shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@keyframes shimmer {
|
||||
0%, 100% {
|
||||
filter: brightness(1);
|
||||
@@ -311,34 +204,6 @@
|
||||
box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ffeaa7;
|
||||
border-radius: 50%;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.hero {
|
||||
margin: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user