mmcghen/IKnowThem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace emoji icons with Bootstrap icons in search pages

Browse Source 
Updated SearchMovies.razor and SearchShows.razor to use Bootstrap icon classes instead of emoji icons for navigation, input, and state indicators. Also improved the matched movie result layout and styling in SearchMovies.razor for a more modern and consistent UI.
This commit is contained in:
Michael McGhen
2025-08-25 20:56:42 -04:00
parent 1dbcc39bc7
commit 48082b64f8
2 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MovieActorLookup/Components/Pages/SearchMovies.razor
+99 -25
View File
@@ -10,7 +10,7 @@
<div class="search-header">
<div class="navigation-toggle">
<a href="/searchshows" class="nav-btn shows-btn">
<span class="nav-icon">📺</span>
<i class="bi bi-tv"></i>
<span class="nav-text">Switch to TV Shows</span>
</a>
</div>
@@ -26,7 +26,7 @@
@bind="_movieTitle"
placeholder="Enter movie title..."
@onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
<div class="input-icon">🎬</div>
<div class="input-icon bi bi-film"></div>
</div>
<div class="input-wrapper">
<input type="text"
@@ -34,7 +34,7 @@
@bind="_characterName"
placeholder="Enter character name..."
@onkeypress="@(async (e) => { if (e.Key == "Enter") await SearchForActorAndCharacters(); })" />
<div class="input-icon">🎭</div>
<div class="input-icon bi bi-person-vcard"></div>
</div>
</div>
<button class="search-btn @(_isSearching ? "searching" : "")"
@@ -47,7 +47,7 @@
}
else
{
<span>🔍 Search</span>
<span class="bi bi-search"> Search</span>
}
</button>
</div>
@@ -74,25 +74,20 @@
@if (_matchedMovie != null)
{
<div class="matched-movie-section">
<h4 class="section-title">Your Search Match</h4>
<div class="movie-card featured">
<div class="poster-container">
<img class="poster-image"
src="@($"https://image.tmdb.org/t/p/w500{_matchedMovie.MoviePosterPath}")"
<h4 class="section-title">
<span class="match-indicator"></span>
Your Search Result
</h4>
<div class="search-match-banner">
<div class="match-poster">
<img src="@($"https://image.tmdb.org/t/p/w200{_matchedMovie.MoviePosterPath}")"
alt="@_matchedMovie.MovieTitle Poster"
loading="lazy" />
<div class="match-badge">✨ Match</div>
</div>
<div class="card-content">
<h5 class="movie-title">@_matchedMovie.MovieTitle</h5>
<div class="character-name">as @_matchedMovie.CharacterName</div>
@if (!string.IsNullOrEmpty(_matchedMovie.Overview?.Trim()))
{
<p class="movie-overview expanded">
@_matchedMovie.Overview.Trim()
</p>
}
<div class="release-date">Released: @_matchedMovie.ReleaseDate</div>
<div class="match-info">
<h5 class="match-title">@_matchedMovie.MovieTitle</h5>
<div class="match-character">as @_matchedMovie.CharacterName</div>
<div class="match-date">Released: @_matchedMovie.ReleaseDate</div>
</div>
</div>
</div>
@@ -159,7 +154,7 @@
else if (!string.IsNullOrEmpty(_movieTitle) || !string.IsNullOrEmpty(_characterName))
{
<div class="no-results">
<div class="no-results-icon">🔍</div>
<div class="no-results-icon bi bi-search"></div>
<h4>No matches found</h4>
<p>Try adjusting your search terms or check the spelling</p>
</div>
@@ -167,7 +162,7 @@
else
{
<div class="welcome-state">
<div class="welcome-icon">🎬</div>
<div class="welcome-icon bi bi-film"></div>
<h4>Ready to explore?</h4>
<p>Enter a movie title and character name to discover an actor's complete film journey</p>
</div>
@@ -175,14 +170,35 @@
</div>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.08)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.06)"/></svg>') repeat;
opacity: 0.3;
pointer-events: none;
animation: float 20s ease-in-out infinite;
z-index: -1;
}
.search-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
position: relative;
z-index: 1;
}
.search-container::before {
@@ -545,7 +561,65 @@
}
.matched-movie-section {
margin-bottom: 3rem;
margin-bottom: 2rem;
}
.search-match-banner {
background: rgba(255,255,255,0.15);
border-radius: 1rem;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.match-poster {
flex-shrink: 0;
}
.match-poster img {
width: 80px;
height: 120px;
object-fit: cover;
border-radius: 0.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.match-info {
flex: 1;
color: white;
}
.match-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: white;
}
.match-character {
font-size: 0.95rem;
color: rgba(255,255,255,0.8);
margin-bottom: 0.25rem;
}
.match-date {
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
}
.match-indicator {
font-family: 'Courier New', monospace;
background: rgba(16, 185, 129, 0.8);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
margin-right: 0.5rem;
}
.section-title {