administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 10:45:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Optimize layout for mobile and web

Browse Source
This commit is contained in:
Nick Mowen 2023-01-19 15:27:12 -07:00
parent b408676bf2
commit fd52caddcb
3 changed files with 72 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
web/src/components/CameraControlPanel.jsx
View File

@ -104,79 +104,81 @@ export default function CameraControlPanel({ camera = '' }) {
}); });
return ( return (
<div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div data-testid="control-panel" className="p-4 sm:flex justify-start">
{ptz.features.includes('pt') && ( {ptz.features.includes('zoom') && (
<div className="w-44 px-4"> <div className="flex justify-center">
<Heading size="xs" className="my-4"> <div className="w-44 px-4">
Pan / Tilt <Heading size="xs" className="my-4">
</Heading> Pan / Tilt
<div className="w-full flex justify-center"> </Heading>
<button <div className="w-full flex justify-center">
onMouseDown={(e) => onSetMove(e, 'UP')} <button
onMouseUp={(e) => onSetStop(e)} onMouseDown={(e) => onSetMove(e, 'UP')}
onTouchStart={(e) => { onMouseUp={(e) => onSetStop(e)}
onSetMove(e, 'UP'); onTouchStart={(e) => {
e.preventDefault(); onSetMove(e, 'UP');
}} e.preventDefault();
onTouchEnd={(e) => { }}
onSetStop(e); onTouchEnd={(e) => {
e.preventDefault(); onSetStop(e);
}} e.preventDefault();
> }}
<ArrowUpDouble className="h-12 p-2 bg-slate-500" /> >
</button> <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
</div> </button>
<div className="w-full flex justify-between"> </div>
<button <div className="w-full flex justify-between">
onMouseDown={(e) => onSetMove(e, 'LEFT')} <button
onMouseUp={(e) => onSetStop(e)} onMouseDown={(e) => onSetMove(e, 'LEFT')}
onTouchStart={(e) => { onMouseUp={(e) => onSetStop(e)}
onSetMove(e, 'LEFT'); onTouchStart={(e) => {
e.preventDefault(); onSetMove(e, 'LEFT');
}} e.preventDefault();
onTouchEnd={(e) => { }}
onSetStop(e); onTouchEnd={(e) => {
e.preventDefault(); onSetStop(e);
}} e.preventDefault();
> }}
<ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" /> >
</button> <ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
<button </button>
onMouseDown={(e) => onSetMove(e, 'RIGHT')} <button
onMouseUp={(e) => onSetStop(e)} onMouseDown={(e) => onSetMove(e, 'RIGHT')}
onTouchStart={(e) => { onMouseUp={(e) => onSetStop(e)}
onSetMove(e, 'RIGHT'); onTouchStart={(e) => {
e.preventDefault(); onSetMove(e, 'RIGHT');
}} e.preventDefault();
onTouchEnd={(e) => { }}
onSetStop(e); onTouchEnd={(e) => {
e.preventDefault(); onSetStop(e);
}} e.preventDefault();
> }}
<ArrowRightDouble className="h-12 p-2 bg-slate-500" /> >
</button> <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
</div> </button>
<div className="flex justify-center"> </div>
<button <div className="flex justify-center">
onMouseDown={(e) => onSetMove(e, 'DOWN')} <button
onMouseUp={(e) => onSetStop(e)} onMouseDown={(e) => onSetMove(e, 'DOWN')}
onTouchStart={(e) => { onMouseUp={(e) => onSetStop(e)}
onSetMove(e, 'DOWN'); onTouchStart={(e) => {
e.preventDefault(); onSetMove(e, 'DOWN');
}} e.preventDefault();
onTouchEnd={(e) => { }}
onSetStop(e); onTouchEnd={(e) => {
e.preventDefault(); onSetStop(e);
}} e.preventDefault();
> }}
<ArrowDownDouble className="h-12 p-2 bg-slate-500" /> >
</button> <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
</button>
</div>
</div> </div>
</div> </div>
)} )}
{ptz.features.includes('zoom') && ( {ptz.features.includes('zoom') && (
<div className="w-44 px-4"> <div className="px-4 sm:w-44">
<Heading size="xs" className="my-4"> <Heading size="xs" className="my-4">
Zoom Zoom
</Heading> </Heading>

2
web/src/routes/Birdseye.jsx
View File

@ -94,7 +94,7 @@ export default function Birdseye() {
{player} {player}
{ptzCameras && ( {ptzCameras && (
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-fit"> <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-full sm:w-min">
<Heading size="sm">Control Panel</Heading> <Heading size="sm">Control Panel</Heading>
{ptzCameras.map((camera) => ( {ptzCameras.map((camera) => (
<div className="p-4" key={camera}> <div className="p-4" key={camera}>

2
web/src/routes/Camera.jsx
View File

@ -190,7 +190,7 @@ export default function Camera({ camera }) {
{player} {player}
{cameraConfig?.onvif?.host && ( {cameraConfig?.onvif?.host && (
<div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-fit"> <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 w-full sm:w-min">
<Heading size="sm">Control Panel</Heading> <Heading size="sm">Control Panel</Heading>
<CameraControlPanel camera={camera} /> <CameraControlPanel camera={camera} />
</div> </div>