fix: widgets show more content in larger slots, not bigger text
This commit is contained in:
parent
42353145e0
commit
56e58c6c08
10 changed files with 137 additions and 272 deletions
|
|
@ -1,22 +1,9 @@
|
|||
/** SL line badge. `size` is the pixel height of the badge. */
|
||||
export const LineBadge = ({
|
||||
designation,
|
||||
size = 36,
|
||||
}: {
|
||||
export const LineBadge = ({ designation }: {
|
||||
designation: string;
|
||||
mode?: string;
|
||||
groupOfLines?: string;
|
||||
size?: number;
|
||||
}) => (
|
||||
<span
|
||||
className="border border-white text-white font-bold text-center tabular-nums shrink-0 inline-flex items-center justify-center"
|
||||
style={{
|
||||
height: size,
|
||||
minWidth: size * 1.6,
|
||||
fontSize: Math.max(10, size * 0.44),
|
||||
padding: `0 ${size * 0.18}px`,
|
||||
}}
|
||||
>
|
||||
<span className="border border-white text-white px-2 py-0.5 font-bold min-w-[56px] text-center text-xl inline-block shrink-0">
|
||||
{designation}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,21 +1,5 @@
|
|||
/** SBB line badge. `size` is the pixel height of the badge. */
|
||||
export const SBBLineBadge = ({
|
||||
name,
|
||||
size = 36,
|
||||
}: {
|
||||
name: string;
|
||||
category?: string;
|
||||
size?: number;
|
||||
}) => (
|
||||
<span
|
||||
className="border border-white text-white font-bold text-center tabular-nums shrink-0 inline-flex items-center justify-center"
|
||||
style={{
|
||||
height: size,
|
||||
minWidth: size * 1.6,
|
||||
fontSize: Math.max(10, size * 0.44),
|
||||
padding: `0 ${size * 0.18}px`,
|
||||
}}
|
||||
>
|
||||
export const SBBLineBadge = ({ name }: { name: string; category?: string }) => (
|
||||
<span className="border border-white text-white px-2 py-0.5 font-bold min-w-[56px] text-center text-xl inline-block shrink-0">
|
||||
{name}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useSize } from '../../hooks/useSize';
|
|||
|
||||
export const Clock = () => {
|
||||
const alwaysOn = useAlwaysOn();
|
||||
const { w, h, ref } = useSize();
|
||||
const { h, ref } = useSize();
|
||||
const [time, setTime] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -12,7 +12,6 @@ export const Clock = () => {
|
|||
const id = setInterval(() => setTime(new Date()), 1000);
|
||||
return () => clearInterval(id);
|
||||
}
|
||||
// In alwaysOn mode: sync to the next full minute, then tick every 60 s
|
||||
let interval: ReturnType<typeof setInterval>;
|
||||
const now = new Date();
|
||||
const msUntilNext = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
|
||||
|
|
@ -24,11 +23,13 @@ export const Clock = () => {
|
|||
}, [alwaysOn]);
|
||||
|
||||
const effectiveH = h || 80;
|
||||
const effectiveW = w || 400;
|
||||
|
||||
const showSeconds = !alwaysOn && effectiveH > 100;
|
||||
const showDate = effectiveH > 55 || effectiveW > 280;
|
||||
const longDate = effectiveH > 130;
|
||||
// Show seconds when not in alwaysOn and there is enough vertical room
|
||||
const showSeconds = !alwaysOn && effectiveH > 90;
|
||||
// Stack time and date vertically when tall enough; otherwise inline
|
||||
const stacked = effectiveH > 110;
|
||||
// Show full weekday + month name when stacked, short otherwise
|
||||
const longDate = stacked;
|
||||
|
||||
const timeStr = time.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
|
|
@ -39,28 +40,24 @@ export const Clock = () => {
|
|||
weekday: longDate ? 'long' : 'short',
|
||||
day: 'numeric',
|
||||
month: longDate ? 'long' : 'short',
|
||||
...(effectiveH > 200 ? { year: 'numeric' } : {}),
|
||||
...(effectiveH > 160 ? { year: 'numeric' } : {}),
|
||||
});
|
||||
|
||||
// Fluid font size: fill width or height, whichever is tighter.
|
||||
// Each character is ~0.60 em wide in tabular-nums.
|
||||
const charCount = timeStr.length;
|
||||
const fontByW = (effectiveW * 0.90) / (charCount * 0.60);
|
||||
const fontByH = showDate ? effectiveH * 0.50 : effectiveH * 0.72;
|
||||
const fontSize = Math.max(16, Math.min(fontByW, fontByH, 220));
|
||||
const dateFontSize = Math.max(12, Math.min(fontSize * 0.22, 32));
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col justify-center overflow-hidden">
|
||||
<div
|
||||
className="tabular-nums leading-none"
|
||||
style={{ fontSize, fontWeight: alwaysOn ? 300 : 700, letterSpacing: '-0.02em' }}
|
||||
>
|
||||
{stacked ? (
|
||||
<>
|
||||
<div className={`text-7xl tabular-nums leading-none ${alwaysOn ? 'font-light' : 'font-bold'}`}>
|
||||
{timeStr}
|
||||
</div>
|
||||
{showDate && (
|
||||
<div className="text-gray-400" style={{ fontSize: dateFontSize, marginTop: `${fontSize * 0.08}px` }}>
|
||||
{dateStr}
|
||||
<div className="text-2xl text-gray-400 mt-2">{dateStr}</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-baseline gap-6 flex-wrap">
|
||||
<div className={`text-7xl tabular-nums ${alwaysOn ? 'font-light' : 'font-bold'}`}>
|
||||
{timeStr}
|
||||
</div>
|
||||
<div className="text-2xl text-gray-400">{dateStr}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,33 +2,23 @@ import { LineBadge } from '../atoms/LineBadge';
|
|||
import { Departure } from '../../types';
|
||||
import { useAlwaysOn } from '../../contexts/AlwaysOnContext';
|
||||
|
||||
export const DepartureItem = ({
|
||||
departure,
|
||||
rowHeight = 48,
|
||||
}: {
|
||||
departure: Departure;
|
||||
rowHeight?: number;
|
||||
}) => {
|
||||
export const DepartureItem = ({ departure }: { departure: Departure }) => {
|
||||
const alwaysOn = useAlwaysOn();
|
||||
const depTime = new Date(departure.scheduled);
|
||||
const diffMin = Math.round((depTime.getTime() - Date.now()) / 60000);
|
||||
const timeText = diffMin <= 0 ? 'Now' : `${diffMin} min`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex justify-between items-center border-b border-zinc-700 shrink-0"
|
||||
style={{ height: rowHeight, fontSize: Math.max(11, rowHeight * 0.40) }}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 overflow-hidden">
|
||||
<div className={`flex justify-between items-center py-3 border-b border-zinc-700 text-2xl ${alwaysOn ? 'font-light' : ''}`}>
|
||||
<div className="flex items-center gap-4 min-w-0 overflow-hidden">
|
||||
<LineBadge
|
||||
designation={departure.line.designation}
|
||||
mode={departure.line.transport_mode}
|
||||
groupOfLines={departure.line.group_of_lines}
|
||||
size={rowHeight * 0.65}
|
||||
/>
|
||||
<span className="truncate">{departure.destination}</span>
|
||||
</div>
|
||||
<span className={`shrink-0 ml-3 ${alwaysOn ? '' : 'font-bold'}`}>{timeText}</span>
|
||||
<span className={`shrink-0 ml-4 ${alwaysOn ? 'font-normal' : 'font-bold'}`}>{timeText}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@ import { useAlwaysOn } from '../../contexts/AlwaysOnContext';
|
|||
|
||||
export const SBBDepartureItem = ({
|
||||
departure,
|
||||
rowHeight = 48,
|
||||
showPlatform = false,
|
||||
}: {
|
||||
departure: SBBDeparture;
|
||||
rowHeight?: number;
|
||||
showPlatform?: boolean;
|
||||
}) => {
|
||||
const alwaysOn = useAlwaysOn();
|
||||
|
|
@ -16,31 +14,19 @@ export const SBBDepartureItem = ({
|
|||
const diffMin = dep ? Math.round((dep.getTime() - Date.now()) / 60000) : null;
|
||||
const timeText = diffMin === null ? '—' : diffMin <= 0 ? 'Now' : `${diffMin} min`;
|
||||
const delay = departure.stop.delay;
|
||||
const fontSize = Math.max(11, rowHeight * 0.40);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex justify-between items-center border-b border-zinc-700 shrink-0"
|
||||
style={{ height: rowHeight, fontSize }}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 overflow-hidden">
|
||||
<SBBLineBadge
|
||||
name={`${departure.category} ${departure.number}`}
|
||||
category={departure.category}
|
||||
size={rowHeight * 0.65}
|
||||
/>
|
||||
<div className={`flex justify-between items-center py-3 border-b border-zinc-700 text-2xl ${alwaysOn ? 'font-light' : ''}`}>
|
||||
<div className="flex items-center gap-4 min-w-0 overflow-hidden">
|
||||
<SBBLineBadge name={`${departure.category} ${departure.number}`} category={departure.category} />
|
||||
<span className="truncate">{departure.to}</span>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 shrink-0 ml-3 ${alwaysOn ? '' : 'font-bold'}`}>
|
||||
<div className={`flex items-center gap-2 shrink-0 ml-4 ${alwaysOn ? 'font-normal' : 'font-bold'}`}>
|
||||
{showPlatform && departure.stop.platform && (
|
||||
<span className="text-gray-400 font-normal" style={{ fontSize: fontSize * 0.75 }}>
|
||||
Pl.{departure.stop.platform}
|
||||
</span>
|
||||
<span className="text-sm text-gray-400 font-normal">Pl.{departure.stop.platform}</span>
|
||||
)}
|
||||
{delay != null && delay > 0 && (
|
||||
<span className="text-orange-400 font-normal" style={{ fontSize: fontSize * 0.75 }}>
|
||||
+{delay}'
|
||||
</span>
|
||||
<span className="text-lg text-orange-400 font-normal">+{delay}'</span>
|
||||
)}
|
||||
<span>{timeText}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import { useSize } from '../../hooks/useSize';
|
||||
import { DepartureItem } from '../molecules/DepartureItem';
|
||||
import { Departure } from '../../types';
|
||||
import { useAlwaysOn } from '../../contexts/AlwaysOnContext';
|
||||
|
||||
// text-2xl (line-height 2rem = 32px) + py-3 (2 × 12px) = 56 px per row
|
||||
const ROW_H = 56;
|
||||
// text-xl header + pb-1 + a little breathing room
|
||||
const HEADER_H = 38;
|
||||
|
||||
export const DepartureList = ({
|
||||
departures,
|
||||
|
|
@ -11,46 +17,28 @@ export const DepartureList = ({
|
|||
loading: boolean;
|
||||
stationName?: string;
|
||||
}) => {
|
||||
const { h, w, ref } = useSize();
|
||||
const effectiveH = h || 200;
|
||||
const alwaysOn = useAlwaysOn();
|
||||
const { h, ref } = useSize();
|
||||
const effectiveH = h || 300;
|
||||
|
||||
// Header sizing
|
||||
const headerH = stationName ? Math.max(24, Math.min(effectiveH * 0.17, 44)) : 0;
|
||||
const headerFontSz = Math.max(11, headerH * 0.55);
|
||||
|
||||
// Row sizing: taller containers get bigger rows
|
||||
const listH = effectiveH - headerH - (headerH ? 6 : 0);
|
||||
const rowH = listH > 500 ? 68 : listH > 360 ? 54 : listH > 240 ? 42 : listH > 150 ? 34 : 27;
|
||||
const maxRows = Math.max(1, Math.floor(listH / rowH));
|
||||
const listH = effectiveH - (stationName ? HEADER_H : 0);
|
||||
const maxRows = Math.max(1, Math.floor(listH / ROW_H));
|
||||
const visible = departures.slice(0, maxRows);
|
||||
|
||||
if (loading && departures.length === 0) {
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex items-center">
|
||||
<span className="text-gray-500 text-sm">Loading…</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col overflow-hidden">
|
||||
{stationName && (
|
||||
<div
|
||||
className="text-gray-200 uppercase tracking-wider font-bold shrink-0 flex items-center border-b border-zinc-600"
|
||||
style={{ height: headerH, fontSize: headerFontSz }}
|
||||
>
|
||||
<h2 className={`text-xl uppercase tracking-wider shrink-0 pb-1 ${alwaysOn ? 'font-normal' : 'font-bold'}`}>
|
||||
{stationName}
|
||||
</div>
|
||||
</h2>
|
||||
)}
|
||||
{visible.length === 0 ? (
|
||||
<span className="text-gray-500 mt-2 text-sm">No departures</span>
|
||||
{loading && departures.length === 0 ? (
|
||||
<p className="text-gray-500 text-xl mt-4">Loading…</p>
|
||||
) : visible.length === 0 ? (
|
||||
<p className="text-gray-500 text-xl mt-4">No departures</p>
|
||||
) : (
|
||||
visible.map((dep, i) => (
|
||||
<DepartureItem
|
||||
key={`${dep.line.designation}-${dep.scheduled}-${i}`}
|
||||
departure={dep}
|
||||
rowHeight={rowH}
|
||||
/>
|
||||
<DepartureItem key={`${dep.line.designation}-${dep.scheduled}-${i}`} departure={dep} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { useSize } from '../../hooks/useSize';
|
||||
import { SBBDepartureItem } from '../molecules/SBBDepartureItem';
|
||||
import { SBBDeparture } from '../../types';
|
||||
import { useAlwaysOn } from '../../contexts/AlwaysOnContext';
|
||||
|
||||
const ROW_H = 56;
|
||||
const HEADER_H = 38;
|
||||
|
||||
export const SBBDepartureList = ({
|
||||
departures,
|
||||
|
|
@ -11,46 +15,32 @@ export const SBBDepartureList = ({
|
|||
loading: boolean;
|
||||
stationName?: string;
|
||||
}) => {
|
||||
const alwaysOn = useAlwaysOn();
|
||||
const { h, w, ref } = useSize();
|
||||
const effectiveH = h || 200;
|
||||
const effectiveH = h || 300;
|
||||
|
||||
// Header sizing
|
||||
const headerH = stationName ? Math.max(24, Math.min(effectiveH * 0.17, 44)) : 0;
|
||||
const headerFontSz = Math.max(11, headerH * 0.55);
|
||||
|
||||
// Row sizing: taller containers get bigger rows and platform info
|
||||
const listH = effectiveH - headerH - (headerH ? 6 : 0);
|
||||
const rowH = listH > 500 ? 68 : listH > 360 ? 54 : listH > 240 ? 42 : listH > 150 ? 34 : 27;
|
||||
const maxRows = Math.max(1, Math.floor(listH / rowH));
|
||||
const showPlatform = rowH >= 54 && (w || 0) > 300;
|
||||
const listH = effectiveH - (stationName ? HEADER_H : 0);
|
||||
const maxRows = Math.max(1, Math.floor(listH / ROW_H));
|
||||
// Platform column only when the slot is wide enough to show it comfortably
|
||||
const showPlatform = (w || 0) > 320;
|
||||
const visible = departures.slice(0, maxRows);
|
||||
|
||||
if (loading && departures.length === 0) {
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex items-center">
|
||||
<span className="text-gray-500 text-sm">Loading…</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col overflow-hidden">
|
||||
{stationName && (
|
||||
<div
|
||||
className="text-gray-200 uppercase tracking-wider font-bold shrink-0 flex items-center border-b border-zinc-600"
|
||||
style={{ height: headerH, fontSize: headerFontSz }}
|
||||
>
|
||||
<h2 className={`text-xl uppercase tracking-wider shrink-0 pb-1 ${alwaysOn ? 'font-normal' : 'font-bold'}`}>
|
||||
{stationName}
|
||||
</div>
|
||||
</h2>
|
||||
)}
|
||||
{visible.length === 0 ? (
|
||||
<span className="text-gray-500 mt-2 text-sm">No departures</span>
|
||||
{loading && departures.length === 0 ? (
|
||||
<p className="text-gray-500 text-xl mt-4">Loading…</p>
|
||||
) : visible.length === 0 ? (
|
||||
<p className="text-gray-500 text-xl mt-4">No departures</p>
|
||||
) : (
|
||||
visible.map((dep, i) => (
|
||||
<SBBDepartureItem
|
||||
key={`${dep.name}-${dep.stop.departure}-${i}`}
|
||||
departure={dep}
|
||||
rowHeight={rowH}
|
||||
showPlatform={showPlatform}
|
||||
/>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -20,60 +20,38 @@ export const SpotifyWidget = () => {
|
|||
const effectiveH = h || 100;
|
||||
const effectiveW = w || 300;
|
||||
|
||||
// Progressive disclosure
|
||||
const showLabel = effectiveH > 80;
|
||||
const showArtist = effectiveH > 65 || effectiveW > 240;
|
||||
const showAlbum = effectiveH > 120 && effectiveW > 260;
|
||||
const showProgress = !alwaysOn && effectiveH > 95 && effectiveW > 200;
|
||||
const showProgressTime = showProgress && effectiveW > 280;
|
||||
|
||||
// Font sizes derived from container
|
||||
const trackFS = Math.min(effectiveH * 0.28, effectiveW * 0.10, 40);
|
||||
const artistFS = Math.max(11, trackFS * 0.70);
|
||||
const albumFS = Math.max(10, trackFS * 0.55);
|
||||
const labelFS = Math.max(9, trackFS * 0.45);
|
||||
const barH = Math.max(2, effectiveH * 0.018);
|
||||
// Progressive disclosure — text sizes are fixed, only visibility changes
|
||||
const showAlbum = effectiveH > 110 && effectiveW > 260;
|
||||
const showProgress = !alwaysOn && effectiveH > 90 && effectiveW > 200;
|
||||
const showTimes = showProgress && effectiveW > 280;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col justify-center overflow-hidden">
|
||||
{showLabel && (
|
||||
<div className="text-gray-400 uppercase tracking-wider" style={{ fontSize: labelFS, marginBottom: '0.3em' }}>
|
||||
Now Playing
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-sm uppercase tracking-wider text-gray-400 mb-1 font-normal">Now Playing</h2>
|
||||
{data?.playing && data.track ? (
|
||||
<>
|
||||
<div
|
||||
className="leading-tight truncate"
|
||||
style={{ fontSize: trackFS, fontWeight: alwaysOn ? 400 : 700 }}
|
||||
>
|
||||
<p className={`text-2xl leading-tight truncate ${alwaysOn ? 'font-normal' : 'font-bold'}`}>
|
||||
{data.track.name}
|
||||
</div>
|
||||
{showArtist && (
|
||||
<div className="text-gray-300 truncate" style={{ fontSize: artistFS, marginTop: '0.15em' }}>
|
||||
{data.track.artist}
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-lg text-gray-300 mt-0.5 truncate">{data.track.artist}</p>
|
||||
{showAlbum && (
|
||||
<div className="text-gray-500 truncate" style={{ fontSize: albumFS, marginTop: '0.1em' }}>
|
||||
{data.track.album}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 truncate">{data.track.album}</p>
|
||||
)}
|
||||
{showProgress && (
|
||||
<div className="flex items-center gap-2" style={{ marginTop: '0.4em' }}>
|
||||
{showProgressTime && (
|
||||
<span className="text-gray-500 font-mono shrink-0" style={{ fontSize: albumFS }}>
|
||||
<div className="mt-1.5 flex items-center gap-2">
|
||||
{showTimes && (
|
||||
<span className="text-xs text-gray-500 font-mono w-10 shrink-0">
|
||||
{fmtMs(data.track.progressMs)}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 bg-zinc-800 relative" style={{ height: barH }}>
|
||||
<div className="flex-1 h-1.5 bg-zinc-800 relative">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-white"
|
||||
style={{ width: `${(data.track.progressMs / data.track.durationMs) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
{showProgressTime && (
|
||||
<span className="text-gray-500 font-mono shrink-0 text-right" style={{ fontSize: albumFS }}>
|
||||
{showTimes && (
|
||||
<span className="text-xs text-gray-500 font-mono w-10 shrink-0 text-right">
|
||||
{fmtMs(data.track.durationMs)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -81,7 +59,7 @@ export const SpotifyWidget = () => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-gray-500" style={{ fontSize: artistFS }}>Nothing playing</div>
|
||||
<p className="text-gray-500 text-lg">Nothing playing</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ interface SystemData {
|
|||
hostname: string;
|
||||
}
|
||||
|
||||
const MetricRow = ({
|
||||
label, percent, detail, rowH, barH, fontSize,
|
||||
}: {
|
||||
label: string; percent: number; detail: string;
|
||||
rowH: number; barH: number; fontSize: number;
|
||||
}) => (
|
||||
<div className="flex items-center gap-2 font-mono shrink-0" style={{ height: rowH, fontSize }}>
|
||||
<span className="text-gray-400 shrink-0" style={{ width: '3.2em' }}>{label}</span>
|
||||
<div className="flex-1 min-w-0 bg-zinc-800 relative" style={{ height: barH }}>
|
||||
const Bar = ({ percent }: { percent: number }) => (
|
||||
<div className="flex-1 h-1.5 bg-zinc-800 relative">
|
||||
<div className="absolute inset-y-0 left-0 bg-white" style={{ width: `${percent}%` }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Row = ({ label, percent, detail }: { label: string; percent: number; detail: string }) => (
|
||||
<div className="flex items-center gap-3 text-sm font-mono">
|
||||
<span className="w-10 text-gray-400 shrink-0">{label}</span>
|
||||
<Bar percent={percent} />
|
||||
<span className="w-8 text-right shrink-0">{percent}%</span>
|
||||
<span className="text-gray-500 shrink-0">{detail}</span>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -39,52 +39,27 @@ export const SystemWidget = () => {
|
|||
const effectiveH = h || 120;
|
||||
const effectiveW = w || 300;
|
||||
|
||||
// Progressive disclosure
|
||||
const showHostname = effectiveH > 55;
|
||||
// Progressive disclosure — fixed text-sm rows, just show more when taller/wider
|
||||
const showDisk = effectiveH > 95;
|
||||
const showUptime = showHostname && (effectiveH > 120 || effectiveW > 450);
|
||||
const showLoadDetail = effectiveH > 150 && effectiveW > 380;
|
||||
|
||||
// Row sizing
|
||||
const metricCount = 2 + (showDisk ? 1 : 0);
|
||||
const hostH = showHostname ? Math.min(effectiveH * 0.22, 32) : 0;
|
||||
const availH = effectiveH - hostH - (metricCount - 1) * 5;
|
||||
const rowH = Math.max(14, Math.min(availH / metricCount, 52));
|
||||
const fontSize = Math.max(10, rowH * 0.52);
|
||||
const barH = Math.max(2, rowH * 0.22);
|
||||
const hostFontSz = Math.max(12, Math.min(effectiveH * 0.14, 28));
|
||||
const showUptime = effectiveH > 110 || effectiveW > 450;
|
||||
const showLoadDetail = effectiveH > 140 && effectiveW > 380;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex flex-col justify-center overflow-hidden" style={{ gap: 5 }}>
|
||||
{showHostname && (
|
||||
<div className="flex justify-between items-baseline shrink-0" style={{ height: hostH }}>
|
||||
<span className="font-bold truncate" style={{ fontSize: hostFontSz }}>{data.hostname}</span>
|
||||
<div ref={ref} className="w-full h-full flex flex-col justify-center gap-3 overflow-hidden">
|
||||
<div className="flex justify-between items-baseline">
|
||||
<span className="font-bold text-lg">{data.hostname}</span>
|
||||
{showUptime && (
|
||||
<span className="text-gray-500 font-mono shrink-0 ml-2" style={{ fontSize: hostFontSz * 0.65 }}>
|
||||
up {data.uptime}
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm font-mono">up {data.uptime}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<MetricRow
|
||||
<Row
|
||||
label="CPU"
|
||||
percent={data.cpu.percent}
|
||||
detail={showLoadDetail ? data.cpu.load.join(' ') : `${data.cpu.percent}%`}
|
||||
rowH={rowH} barH={barH} fontSize={fontSize}
|
||||
/>
|
||||
<MetricRow
|
||||
label="MEM"
|
||||
percent={data.memory.percent}
|
||||
detail={`${data.memory.usedGb}/${data.memory.totalGb}G`}
|
||||
rowH={rowH} barH={barH} fontSize={fontSize}
|
||||
detail={showLoadDetail ? `load ${data.cpu.load.join(' ')}` : `load ${data.cpu.load[0]}`}
|
||||
/>
|
||||
<Row label="MEM" percent={data.memory.percent} detail={`${data.memory.usedGb} / ${data.memory.totalGb} GB`} />
|
||||
{showDisk && (
|
||||
<MetricRow
|
||||
label="DISK"
|
||||
percent={data.disk.percent}
|
||||
detail={`${data.disk.usedGb}/${data.disk.totalGb}G`}
|
||||
rowH={rowH} barH={barH} fontSize={fontSize}
|
||||
/>
|
||||
<Row label="DISK" percent={data.disk.percent} detail={`${data.disk.usedGb} / ${data.disk.totalGb} GB`} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@ function getAsciiKey(desc: string): string {
|
|||
if (d.includes('mostly cloudy') || d.includes('very')) return 'cloudy';
|
||||
if (d.includes('partly') || d.includes('mostly sunny')) return 'partlycloudy';
|
||||
if (d.includes('cloudy')) return 'cloudy';
|
||||
if (d.includes('sunny') || d.includes('clear')) return 'sunny';
|
||||
return 'cloudy';
|
||||
return 'sunny';
|
||||
}
|
||||
|
||||
export const WeatherWidget = () => {
|
||||
|
|
@ -44,9 +43,6 @@ export const WeatherWidget = () => {
|
|||
refetchInterval: 10 * 60 * 1000,
|
||||
});
|
||||
|
||||
const effectiveH = h || 100;
|
||||
const effectiveW = w || 350;
|
||||
|
||||
if (isError || !data || (data as any).error) {
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex items-center">
|
||||
|
|
@ -55,49 +51,43 @@ export const WeatherWidget = () => {
|
|||
);
|
||||
}
|
||||
|
||||
// Progressive disclosure based on available space
|
||||
const showAscii = effectiveH > 200 && effectiveW > 380;
|
||||
const showHourly = effectiveH > 140 && effectiveW > 260;
|
||||
const showSunMoon = effectiveH > 95 || effectiveW > 460;
|
||||
const effectiveH = h || 80;
|
||||
const effectiveW = w || 350;
|
||||
|
||||
// Font sizes derived from container
|
||||
const tempFontSize = Math.min(effectiveH * (showAscii ? 0.34 : 0.42), 84);
|
||||
const descFontSize = Math.max(12, tempFontSize * 0.36);
|
||||
const metaFontSize = Math.max(10, tempFontSize * 0.27);
|
||||
const asciiFontSize = Math.max(9, effectiveH / 8);
|
||||
// Progressive disclosure — everything is the same size, just more/less shown
|
||||
const showAscii = effectiveH > 180 && effectiveW > 380;
|
||||
const showHourly = effectiveH > 120 && effectiveW > 260;
|
||||
const showSunMoon = effectiveH > 80 || effectiveW > 460;
|
||||
const maxHours = effectiveW > 500 ? 6 : effectiveW > 380 ? 4 : 3;
|
||||
|
||||
const art = ASCII[getAsciiKey(data.description)] ?? ASCII.cloudy;
|
||||
const moon = MOON_CHAR[data.moonPhase] ?? data.moonPhase;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full h-full flex items-center gap-5 overflow-hidden">
|
||||
<div ref={ref} className="w-full h-full flex items-center gap-4 overflow-hidden">
|
||||
{showAscii && (
|
||||
<pre
|
||||
className="text-gray-300 shrink-0 select-none font-mono leading-tight"
|
||||
style={{ fontSize: asciiFontSize }}
|
||||
>
|
||||
<pre className="text-gray-300 text-[11px] leading-tight select-none font-mono shrink-0">
|
||||
{art.join('\n')}
|
||||
</pre>
|
||||
)}
|
||||
<div className="flex flex-col gap-1 min-w-0 overflow-hidden">
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<div className="flex items-baseline gap-3 flex-wrap">
|
||||
<span style={{ fontSize: tempFontSize, fontWeight: 700, lineHeight: 1 }}>{data.temperature}°C</span>
|
||||
<span style={{ fontSize: descFontSize }} className="text-gray-300">{data.description}</span>
|
||||
<span className="text-4xl font-bold">{data.temperature}°C</span>
|
||||
<span className="text-lg text-gray-300">{data.description}</span>
|
||||
</div>
|
||||
{showSunMoon && (
|
||||
<div className="flex flex-wrap gap-3 text-gray-400 font-mono" style={{ fontSize: metaFontSize }}>
|
||||
<div className="flex flex-wrap gap-4 text-sm text-gray-400 font-mono">
|
||||
<span>↑ {data.sunrise}</span>
|
||||
<span>↓ {data.sunset}</span>
|
||||
<span title={data.moonPhase}>{moon} {data.moonPhase}</span>
|
||||
</div>
|
||||
)}
|
||||
{showHourly && data.hourly.length > 0 && (
|
||||
<div className="flex gap-4 mt-1">
|
||||
<div className="flex gap-3 mt-1">
|
||||
{data.hourly.slice(0, maxHours).map((entry, i) => (
|
||||
<div key={i} className="text-center shrink-0">
|
||||
<div style={{ fontSize: metaFontSize * 0.85 }} className="text-gray-500">{entry.time}</div>
|
||||
<div style={{ fontSize: metaFontSize }} className="font-bold">{entry.temp}°</div>
|
||||
<div className="text-xs text-gray-500">{entry.time}</div>
|
||||
<div className="text-sm font-bold">{entry.temp}°</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue