pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 13:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement mobile responsiveness enhancements

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 17:13:56 +00:00
parent 7920bdb911
commit 866f376eda
4 changed files with 166 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/moderation/DependencyVisualizer.tsx
View File

@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
import { ArrowDown, AlertCircle } from 'lucide-react';
import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { useIsMobile } from '@/hooks/use-mobile';
interface DependencyVisualizerProps {
items: SubmissionItemWithDeps[];
@@ -11,6 +12,8 @@ interface DependencyVisualizerProps {
}
export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) {
const isMobile = useIsMobile();
const dependencyLevels = useMemo(() => {
const levels: SubmissionItemWithDeps[][] = [];
const visited = new Set<string>();
@@ -62,13 +65,13 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{dependencyLevels.map((level, levelIdx) => (
<div key={levelIdx} className="space-y-3">
<div className="flex items-center gap-2">
<h4 className="text-sm font-medium text-muted-foreground">
<h4 className={`font-medium text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
Level {levelIdx + 1}
</h4>
<div className="flex-1 h-px bg-border" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className={`grid gap-3 ${isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
{level.map((item) => (
<Card
key={item.id}
@@ -76,28 +79,31 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
selectedIds.has(item.id)
? 'ring-2 ring-primary'
: ''
}`}
} ${isMobile ? 'touch-manipulation' : ''}`}
>
<CardHeader className="pb-2">
<div className="flex items-center justify-between">
<CardTitle className="text-sm">
<CardHeader className={isMobile ? "pb-2 p-4" : "pb-2"}>
<div className="flex items-center justify-between gap-2">
<CardTitle className={isMobile ? "text-xs" : "text-sm"}>
{item.item_type.replace('_', ' ').toUpperCase()}
</CardTitle>
<Badge variant={
item.status === 'approved' ? 'default' :
item.status === 'rejected' ? 'destructive' :
'secondary'
}>
<Badge
variant={
item.status === 'approved' ? 'default' :
item.status === 'rejected' ? 'destructive' :
'secondary'
}
className={isMobile ? "text-xs shrink-0" : ""}
>
{item.status}
</Badge>
</div>
</CardHeader>
<CardContent>
<p className="text-sm font-medium">
<CardContent className={isMobile ? "p-4 pt-0" : ""}>
<p className={`font-medium ${isMobile ? 'text-sm' : 'text-sm'}`}>
{item.item_data.name || 'Unnamed'}
</p>
{item.dependents && item.dependents.length > 0 && (
<p className="text-xs text-muted-foreground mt-1">
<p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
Has {item.dependents.length} dependent(s)
</p>
)}
@@ -108,7 +114,7 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
{levelIdx < dependencyLevels.length - 1 && (
<div className="flex justify-center py-2">
<ArrowDown className="w-5 h-5 text-muted-foreground" />
<ArrowDown className={isMobile ? "w-4 h-4 text-muted-foreground" : "w-5 h-5 text-muted-foreground"} />
</div>
)}
</div>