fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mobile design

Browse source
This commit is contained in:
Fuhrmann 2025-03-17 15:20:35 +01:00
parent 913af8fba6
commit 7d197d73ef
4 changed files with 61 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/components/Form.tsx
View file

@ -36,7 +36,7 @@ function Toggle({
defaultChecked={defaultChecked ? true : false}
/>
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
<span className="ms-3 text-xs xl:text-sm font-medium text-gray-900 dark:text-gray-300">
{title}
</span>
</label>
@ -191,9 +191,23 @@ export function Form() {
}
}
function handleExport() {
if (!sceneView) return;
sceneView.exportOBJ();
}
return (
<div className="w-full max-h-full flex flex-col gap-2">
<div className="w-full h-full flex flex-col gap-3 p-4 border border-gray-200 rounded shadow">
<div className="w-full h-full flex flex-col gap-3 p-2 border border-gray-200 rounded shadow">
<div className="w-full flex justify-end">
<button
onClick={handleExport}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 hover:cursor-pointer"
>
Export as .obj
</button>
</div>
<div className="border border-gray-200 rounded grid grid-cols-2 gap-y-2 p-2">
<Toggle title="Slicing Box" onChange={handleChange} />
<Toggle title="Virtual Profile" onChange={handleDrilling} />

2
app/components/Map.tsx
View file

@ -39,7 +39,7 @@ export function Map() {
}, [divRef, setSceneView]);
return (
<div className="w-full h-full flex flex-col justify-center">
<div className="w-full h-full">
<div className="w-full h-full" ref={divRef}></div>
</div>
);