ZSCGR/KVideo
1
0
Fork 0
mirror of https://github.com/KuekHaoYang/KVideo.git synced 2026-08-21 03:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance search history dropdown with absolute positioning and empty state styling; improve video player autoplay functionality

Browse Source
This commit is contained in:
kuekhaoyang
2025-11-19 12:22:20 +08:00
parent fad6041df0
commit 3a756dd06f
10 changed files with 187 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+13 -3
View File
@@ -585,10 +585,10 @@ nav {
SEARCH HISTORY DROPDOWN - LIQUID GLASS
=========================================== */
/* Search History Dropdown - Fixed positioning, Liquid Glass effect */
/* Search History Dropdown - Absolute positioning under search bar, Liquid Glass effect */
.search-history-dropdown {
position: fixed;
z-index: 9999;
/* Removed position: fixed - now using absolute from component */
max-height: 400px;
overflow-y: auto;
/* Liquid Glass effect - Core aesthetic */
@@ -749,6 +749,16 @@ nav {
background: color-mix(in srgb, var(--accent-color) 50%, transparent);
}
/* Empty state styling */
.search-history-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
text-align: center;
}
/* Accessibility - Focus visible states */
.search-history-item:focus-visible {
outline: 2px solid var(--accent-color);
app/page.tsx
+11 -3
View File
@@ -105,9 +105,14 @@ function HomePage() {
return (
<div className="min-h-screen">
{/* Glass Navbar */}
<nav className="sticky top-0 z-50 pt-4 pb-2">
<nav className="sticky top-0 z-50 pt-4 pb-2" style={{
transform: 'translate3d(0, 0, 0)',
willChange: 'transform'
}}>
<div className="max-w-7xl mx-auto px-4">
<div className="bg-[var(--glass-bg)] backdrop-blur-[12px] saturate-[120%] [-webkit-backdrop-filter:blur(12px)_saturate(120%)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] px-6 py-4 rounded-[var(--radius-2xl)]">
<div className="bg-[var(--glass-bg)] backdrop-blur-[12px] saturate-[120%] [-webkit-backdrop-filter:blur(12px)_saturate(120%)] border border-[var(--glass-border)] shadow-[var(--shadow-md)] px-6 py-4 rounded-[var(--radius-2xl)]" style={{
transform: 'translate3d(0, 0, 0)'
}}>
<div className="flex items-center justify-between">
<Link
href="/"
@@ -147,7 +152,10 @@ function HomePage() {
</nav>
{/* Search Form - Separate from navbar */}
<div className="max-w-7xl mx-auto px-4 mt-6 mb-8">
<div className="max-w-7xl mx-auto px-4 mt-6 mb-8 relative" style={{
transform: 'translate3d(0, 0, 0)',
zIndex: 1000
}}>
<SearchForm
onSearch={handleSearch}
onClear={handleReset}