Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-28 07:44:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: adjust search result filter mobile style

Browse Source
This commit is contained in:
shinya
2025-08-15 00:57:23 +08:00
parent 2c53d0e0b9
commit 394730327b
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/search/page.tsx
View File

@@ -481,7 +481,7 @@ function SearchPageClient() {
</div> </div>
{/* 聚合开关 */} {/* 聚合开关 */}
<label className='flex items-center gap-2 cursor-pointer select-none shrink-0'> <label className='flex items-center gap-2 cursor-pointer select-none shrink-0'>
<span className='text-sm text-gray-700 dark:text-gray-300'>聚合</span> <span className='text-xs sm:text-sm text-gray-700 dark:text-gray-300'>聚合</span>
<div className='relative'> <div className='relative'>
<input <input
type='checkbox' type='checkbox'

10
src/components/SearchResultFilter.tsx
View File

@@ -51,7 +51,9 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
const isMobile = viewportWidth < 768; const isMobile = viewportWidth < 768;
let x = rect.left; let x = rect.left;
let dropdownWidth = Math.max(rect.width, 240); // 为标题筛选设置更大的最小宽度，其他保持原来的最小宽度
const minWidth = categoryKey === 'title' ? 400 : 240;
let dropdownWidth = Math.max(rect.width, minWidth);
let useFixedWidth = false; let useFixedWidth = false;
if (isMobile) { if (isMobile) {
@@ -191,16 +193,16 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
{activeCategory && createPortal( {activeCategory && createPortal(
<div <div
ref={dropdownRef} ref={dropdownRef}
className='fixed z-[9999] bg-white/95 dark:bg-gray-800/95 rounded-xl border border-gray-200/50 dark:border-gray-700/50 backdrop-blur-sm' className='fixed z-[9999] bg-white/95 dark:bg-gray-800/95 rounded-xl border border-gray-200/50 dark:border-gray-700/50 backdrop-blur-sm max-h-[50vh] flex flex-col'
style={{ style={{
left: `${dropdownPosition.x}px`, left: `${dropdownPosition.x}px`,
top: `${dropdownPosition.y}px`, top: `${dropdownPosition.y}px`,
...(typeof window !== 'undefined' && window.innerWidth < 768 ? { width: `${dropdownPosition.width}px` } : { minWidth: `${Math.max(dropdownPosition.width, 240)}px` }), ...(typeof window !== 'undefined' && window.innerWidth < 768 ? { width: `${dropdownPosition.width}px` } : { minWidth: `${Math.max(dropdownPosition.width, activeCategory === 'title' ? 400 : 240)}px` }),
maxWidth: '600px', maxWidth: '600px',
position: 'fixed', position: 'fixed',
}} }}
> >
<div className='p-2 sm:p-4'> <div className='p-2 sm:p-4 overflow-y-auto flex-1 min-h-0'>
<div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1 sm:gap-2'> <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-1 sm:gap-2'>
{categories.find((cat) => cat.key === activeCategory)?.options.map((option) => ( {categories.find((cat) => cat.key === activeCategory)?.options.map((option) => (
<button <button