From 4a80888d95befe8254abdebb6e5b9b967f2a8f41 Mon Sep 17 00:00:00 2001 From: maziggy Date: Sun, 4 Jan 2026 08:34:03 +0100 Subject: [PATCH] Printer card size can now be choosen by user --- frontend/src/pages/PrintersPage.tsx | 69 ++++++-- .../{index-Bo9Lo1_A.js => index-BWv5Xlm9.js} | 148 +++++++++--------- static/assets/index-j3n1gAEX.css | 1 - static/assets/index-ta6Ao_MI.css | 1 + static/index.html | 4 +- 5 files changed, 130 insertions(+), 93 deletions(-) rename static/assets/{index-Bo9Lo1_A.js => index-BWv5Xlm9.js} (55%) delete mode 100644 static/assets/index-j3n1gAEX.css create mode 100644 static/assets/index-ta6Ao_MI.css diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx index 0785b87a3..e15de0a2e 100644 --- a/frontend/src/pages/PrintersPage.tsx +++ b/frontend/src/pages/PrintersPage.tsx @@ -37,6 +37,7 @@ import { Fan, Wind, AirVent, + Minus, } from 'lucide-react'; // Custom Skip Objects icon - arrow jumping over boxes @@ -2236,12 +2237,9 @@ function PrinterCard({ }`} > {plugStatus.state || '?'} - - )} - {/* Power consumption display */} - {plugStatus?.energy?.power != null && plugStatus.state === 'ON' && ( - - {plugStatus.energy.power}W + {plugStatus.state === 'ON' && plugStatus.energy?.power != null && ( + · {plugStatus.energy.power}W + )} )} @@ -3343,6 +3341,11 @@ export function PrintersPage() { const [viewMode, setViewMode] = useState(() => { return (localStorage.getItem('printerViewMode') as ViewMode) || 'expanded'; }); + // Card size: 1=small, 2=medium, 3=large, 4=xl + const [cardSize, setCardSize] = useState(() => { + const saved = localStorage.getItem('printerCardSize'); + return saved ? parseInt(saved, 10) : 2; // Default to medium + }); const queryClient = useQueryClient(); const { data: printers, isLoading } = useQuery({ @@ -3452,6 +3455,25 @@ export function PrintersPage() { localStorage.setItem('printerViewMode', newMode); }; + const changeCardSize = (delta: number) => { + const newSize = Math.max(1, Math.min(4, cardSize + delta)); + setCardSize(newSize); + localStorage.setItem('printerCardSize', String(newSize)); + }; + + // Grid classes based on card size (1=small, 2=medium, 3=large, 4=xl) + const getGridClasses = () => { + switch (cardSize) { + case 1: return 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'; + case 2: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'; + case 3: return 'grid-cols-1 md:grid-cols-2'; + case 4: return 'grid-cols-1 max-w-3xl'; + default: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'; + } + }; + + const cardSizeLabels = ['S', 'M', 'L', 'XL']; + // Sort printers based on selected option const sortedPrinters = useMemo(() => { if (!printers) return []; @@ -3558,6 +3580,29 @@ export function PrintersPage() { )} + {/* Card size control */} +
+ + + {cardSizeLabels[cardSize - 1]} + + +
+