Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile Ui resizing and overlap fixes
All checks were successful
Automated Container Build / build-and-push (push) Successful in 36s
Details

Browse source
This commit is contained in:
Elijah 2026-05-24 08:56:08 -07:00
parent 95a2b3ad0e
commit 7997ccb293
1 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/FileExplorer.tsx
View file

@ -6,7 +6,7 @@ import {
Folder as LucideFolder, File, Search, Pin, Trash2, HardDrive, Settings, Folder as LucideFolder, File, Search, Pin, Trash2, HardDrive, Settings,
ChevronRight, Grid3X3, List, Plus, Upload, LogOut, ChevronRight, Grid3X3, List, Plus, Upload, LogOut,
MoreVertical, Star, Download, Pencil, Copy, Move, MoreVertical, Star, Download, Pencil, Copy, Move,
FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, Home,
Sun, Moon, Music as MusicIcon, Code as CodeIcon, Archive as ArchiveIcon, CornerDownRight, Sun, Moon, Music as MusicIcon, Code as CodeIcon, Archive as ArchiveIcon, CornerDownRight,
CheckCircle, AlertCircle, Menu CheckCircle, AlertCircle, Menu
} from 'lucide-react'; } from 'lucide-react';
@ -1464,10 +1464,11 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
)} )}
<button <button
onClick={() => { navigateTo('.'); setActiveSection('files'); }} onClick={() => { navigateTo('.'); setActiveSection('files'); }}
className="text-sm font-medium hover:opacity-80 transition-opacity" className="text-sm font-medium hover:opacity-80 transition-opacity flex items-center"
style={{ color: 'var(--color-text-secondary)' }} style={{ color: 'var(--color-text-secondary)' }}
title="Home"
> >
Home {isMobile ? <Home className="w-4.5 h-4.5" /> : "Home"}
</button> </button>
{pathSegments.map((seg, i) => ( {pathSegments.map((seg, i) => (
<div key={i} className="flex items-center gap-1"> <div key={i} className="flex items-center gap-1">
@ -1739,7 +1740,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
{group.name && ( {group.name && (
<h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3> <h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3>
)} )}
<div className="grid gap-3" style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${gridSize}px, 1fr))` }}> <div className="grid gap-3" style={{ gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : `repeat(auto-fill, minmax(${gridSize}px, 1fr))` }}>
{group.files.map((file, idx) => ( {group.files.map((file, idx) => (
<motion.div <motion.div
key={file.path} key={file.path}
@ -1829,10 +1830,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
<h3 className="text-xs font-semibold uppercase tracking-wider mb-2 px-4" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3> <h3 className="text-xs font-semibold uppercase tracking-wider mb-2 px-4" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3>
)} )}
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="grid grid-cols-[1fr_100px_140px_40px] gap-4 px-4 py-2 text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-tertiary)' }}> <div className={`grid ${isMobile ? 'grid-cols-[1fr_40px]' : 'grid-cols-[1fr_100px_140px_40px]'} gap-4 px-4 py-2 text-xs font-medium uppercase tracking-wider`} style={{ color: 'var(--color-text-tertiary)' }}>
<span>Name</span> <span>Name</span>
<span>Size</span> {!isMobile && <span>Size</span>}
<span>Modified</span> {!isMobile && <span>Modified</span>}
<span></span> <span></span>
</div> </div>
{group.files.map((file, idx) => ( {group.files.map((file, idx) => (
@ -1851,7 +1852,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
onClick={(e) => handleFileClick(file, e)} onClick={(e) => handleFileClick(file, e)}
onContextMenu={(e) => handleContextMenu(e, file)} onContextMenu={(e) => handleContextMenu(e, file)}
{...getTouchHandlers(file)} {...getTouchHandlers(file)}
className={`grid grid-cols-[1fr_100px_140px_40px] gap-4 items-center px-4 py-2.5 rounded-lg cursor-pointer transition-all duration-100 group ${draggedFile === file.path ? 'opacity-50' : ''}`} className={`grid ${isMobile ? 'grid-cols-[1fr_40px]' : 'grid-cols-[1fr_100px_140px_40px]'} gap-4 items-center px-4 py-2.5 rounded-lg cursor-pointer transition-all duration-100 group ${draggedFile === file.path ? 'opacity-50' : ''}`}
style={{ backgroundColor: selectedFiles.has(file.path) || dragOverFolder === file.path ? 'var(--color-accent-subtle)' : 'transparent' }} style={{ backgroundColor: selectedFiles.has(file.path) || dragOverFolder === file.path ? 'var(--color-accent-subtle)' : 'transparent' }}
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
@ -1889,9 +1890,9 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
)} )}
{file.is_pinned && <Pin className="w-3 h-3 flex-shrink-0" style={{ color: 'var(--color-warning)' }} />} {file.is_pinned && <Pin className="w-3 h-3 flex-shrink-0" style={{ color: 'var(--color-warning)' }} />}
</div> </div>
<span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{file.is_dir ? '—' : formatSize(file.size)}</span> {!isMobile && <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{file.is_dir ? '—' : formatSize(file.size)}</span>}
<span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{formatDate(file.mod_time)}</span> {!isMobile && <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>{formatDate(file.mod_time)}</span>}
<button onClick={(e) => { e.stopPropagation(); handleContextMenu(e, file); }} className="p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"> <button onClick={(e) => { e.stopPropagation(); handleContextMenu(e, file); }} className={`p-1 rounded transition-opacity ${isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
<MoreVertical className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} /> <MoreVertical className="w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
</button> </button>
</motion.div> </motion.div>