screenshot display size and position tweaks
This commit is contained in:
parent
8e45fba2e6
commit
e2d5042e60
1 changed files with 15 additions and 20 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue