screenshot display size and position tweaks

This commit is contained in:
makearmy 2025-09-28 00:22:55 -04:00
parent 8e45fba2e6
commit e2d5042e60

View file

@ -16,7 +16,6 @@ export default function FiberSettingDetailPage() {
const [claimErr, setClaimErr] = useState<string | null>(null); const [claimErr, setClaimErr] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
// include owner + screen in fields
const url = const url =
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}` + `${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}` +
`?fields=` + `?fields=` +
@ -106,11 +105,11 @@ export default function FiberSettingDetailPage() {
const openSearchInNewTab = (value: string) => { const openSearchInNewTab = (value: string) => {
const url = new URL("/fiber-settings", window.location.origin); const url = new URL("/fiber-settings", window.location.origin);
url.searchParams.set("query", value); url.searchParams.set("query", value);
const anchor = document.createElement("a"); const a = document.createElement("a");
anchor.href = url.toString(); a.href = url.toString();
anchor.target = "_blank"; a.target = "_blank";
anchor.rel = "noopener noreferrer"; a.rel = "noopener noreferrer";
anchor.click(); a.click();
}; };
const onClaim = async () => { const onClaim = async () => {
@ -180,7 +179,6 @@ export default function FiberSettingDetailPage() {
)} )}
</div> </div>
{/* keep your existing back link for now (external detail view) */}
<a <a
href="/fiber-settings" href="/fiber-settings"
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start" className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
@ -192,7 +190,6 @@ export default function FiberSettingDetailPage() {
{/* Result Photo + Material */} {/* Result Photo + Material */}
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start"> <div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
<div className="flex justify-center"> <div className="flex justify-center">
{/* Primary result photo */}
{setting.photo?.filename_disk && ( {setting.photo?.filename_disk && (
<a <a
href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`} href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
@ -258,36 +255,34 @@ export default function FiberSettingDetailPage() {
<small>-Values Focus Closer | +Values Focus Further</small> <small>-Values Focus Closer | +Values Focus Further</small>
</div> </div>
{/* Laser (now shows the screen image, side-by-side with specs) */} {/* Laser (heading above specs; screen image same size as result) */}
<div className="card bg-card p-4"> <div className="card bg-card p-4">
<h2 className="text-xl font-semibold mb-2">Laser</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
{/* Screenshot on the left (if present) */} {/* Screen image */}
<div className="flex justify-center">
{setting.screen?.filename_disk ? ( {setting.screen?.filename_disk ? (
<a <a
href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`} href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex justify-center"
title={setting.screen?.title || "Screenshot"} title={setting.screen?.title || "Screenshot"}
> >
<Image <Image
src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`} src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
alt={setting.screen?.title || "Screenshot"} alt={setting.screen?.title || "Screenshot"}
width={300} width={250}
height={300} height={250}
className="rounded object-contain max-w-[300px] max-h-[300px]" className="rounded object-contain max-w-[250px] max-h-[250px]"
/> />
</a> </a>
) : ( ) : (
<div className="text-sm text-muted-foreground md:justify-self-center"> <div className="text-sm text-muted-foreground">No screenshot</div>
No screenshot
</div>
)} )}
</div>
{/* Specs on the right */} {/* Specs + heading */}
<div> <div>
<h2 className="text-xl font-semibold mb-2">Laser</h2>
<p> <p>
<strong>Source Make:</strong> {setting.source?.make || "—"} <strong>Source Make:</strong> {setting.source?.make || "—"}
</p> </p>