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);
useEffect(() => {
// include owner + screen in fields
const url =
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}` +
`?fields=` +
@ -106,11 +105,11 @@ export default function FiberSettingDetailPage() {
const openSearchInNewTab = (value: string) => {
const url = new URL("/fiber-settings", window.location.origin);
url.searchParams.set("query", value);
const anchor = document.createElement("a");
anchor.href = url.toString();
anchor.target = "_blank";
anchor.rel = "noopener noreferrer";
anchor.click();
const a = document.createElement("a");
a.href = url.toString();
a.target = "_blank";
a.rel = "noopener noreferrer";
a.click();
};
const onClaim = async () => {
@ -180,7 +179,6 @@ export default function FiberSettingDetailPage() {
)}
</div>
{/* keep your existing back link for now (external detail view) */}
<a
href="/fiber-settings"
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 */}
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
<div className="flex justify-center">
{/* Primary result photo */}
{setting.photo?.filename_disk && (
<a
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>
</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">
<h2 className="text-xl font-semibold mb-2">Laser</h2>
<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 ? (
<a
href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
target="_blank"
rel="noopener noreferrer"
className="flex justify-center"
title={setting.screen?.title || "Screenshot"}
>
<Image
src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
alt={setting.screen?.title || "Screenshot"}
width={300}
height={300}
className="rounded object-contain max-w-[300px] max-h-[300px]"
width={250}
height={250}
className="rounded object-contain max-w-[250px] max-h-[250px]"
/>
</a>
) : (
<div className="text-sm text-muted-foreground md:justify-self-center">
No screenshot
</div>
<div className="text-sm text-muted-foreground">No screenshot</div>
)}
</div>
{/* Specs on the right */}
{/* Specs + heading */}
<div>
<h2 className="text-xl font-semibold mb-2">Laser</h2>
<p>
<strong>Source Make:</strong> {setting.source?.make || "—"}
</p>