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

feat: Implement responsive design improvements and add custom hooks for keyboard navigation and click outside detection

Browse Source
This commit is contained in:
kuekhaoyang
2025-11-18 15:23:42 +08:00
parent 79ac2c349e
commit 2bc0be5d95
6 changed files with 302 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/history/WatchHistorySidebar.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ export function WatchHistorySidebar() {
style={{
transform: isOpen ? 'translateX(0) translateZ(0)' : 'translateX(100%) translateZ(0)'
}}
className={`fixed top-0 right-0 bottom-0 w-[90%] max-w-[420px] z-[2000] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] border-l border-[var(--glass-border)] rounded-tl-[var(--radius-2xl)] rounded-bl-[var(--radius-2xl)] p-6 flex flex-col shadow-[0_8px_32px_rgba(0,0,0,0.2)] transition-transform duration-[400ms] cubic-bezier(0.2,0.8,0.2,1)`}
className={`fixed top-0 right-0 bottom-0 w-[85%] sm:w-[90%] max-w-[420px] z-[2000] bg-[var(--glass-bg)] backdrop-blur-[25px] saturate-[180%] border-l border-[var(--glass-border)] rounded-tl-[var(--radius-2xl)] rounded-bl-[var(--radius-2xl)] p-6 flex flex-col shadow-[0_8px_32px_rgba(0,0,0,0.2)] transition-transform duration-[400ms] cubic-bezier(0.2,0.8,0.2,1)`}
>
{/* Header */}
<header className="flex items-center justify-between mb-6 pb-4 border-b border-[var(--glass-border)]">
components/search/SearchForm.tsx
+2 -2
View File
@@ -78,7 +78,7 @@ export function SearchForm({
onChange={(e) => setQuery(e.target.value)}
onFocus={handleInputFocus}
placeholder="搜索电影、电视剧、综艺..."
className="text-lg pr-24 md:pr-32 truncate"
className="text-base sm:text-lg pr-24 md:pr-32 truncate"
role="combobox"
aria-expanded={showHistory && !isLoading}
aria-controls="search-history-listbox"
@@ -99,7 +99,7 @@ export function SearchForm({
type="submit"
disabled={!query.trim()}
variant="primary"
className="absolute right-2 top-1/2 -translate-y-1/2 px-4 md:px-8"
className="absolute right-2 top-1/2 -translate-y-1/2 px-3 sm:px-4 md:px-8"
>
<span className="flex items-center gap-2">
<Icons.Search size={20} />
components/search/VideoGrid.tsx
+3 -3
View File
@@ -32,9 +32,9 @@ export function VideoGrid({ videos, className = '' }: VideoGridProps) {
// Calculate columns for grid navigation
const getColumns = () => {
if (typeof window === 'undefined') return 7;
if (typeof window === 'undefined') return 6;
const width = window.innerWidth;
if (width >= 1536) return 7; // 2xl
if (width >= 1536) return 6; // 2xl
if (width >= 1280) return 6; // xl
if (width >= 1024) return 5; // lg
if (width >= 768) return 4; // md
@@ -84,7 +84,7 @@ export function VideoGrid({ videos, className = '' }: VideoGridProps) {
return (
<div
ref={gridRef}
className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 md:gap-4 lg:gap-6 ${className}`}
className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-6 gap-3 md:gap-4 lg:gap-6 max-w-[1920px] mx-auto ${className}`}
role="list"
aria-label="视频搜索结果"
>