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

Make padding consistent

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-29 12:08:42 -06:00
parent 9b72f2dedd
commit 14f13f4ab9
7 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.tsx
View File

@ -31,7 +31,7 @@ function App() {
{isMobile && <Bottombar />} {isMobile && <Bottombar />}
<div <div
id="pageRoot" id="pageRoot"
className={`absolute top-2 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-16 bottom-8"}`} className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-12 bottom-8"}`}
> >
<Suspense> <Suspense>
<Routes> <Routes>

2
web/src/pages/Logs.tsx
View File

@ -53,7 +53,7 @@ function Logs() {
); );
return ( return (
<div className="size-full flex flex-col pr-2"> <div className="size-full p-2 flex flex-col">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<ToggleGroup <ToggleGroup
className="*:px-3 *:py-4 *:rounded-2xl" className="*:px-3 *:py-4 *:rounded-2xl"

4
web/src/views/events/EventView.tsx
View File

@ -205,7 +205,7 @@ export default function EventView({
} }
return ( return (
<div className="flex flex-col size-full"> <div className="py-2 flex flex-col size-full">
<div className="h-11 px-2 relative flex justify-between items-center"> <div className="h-11 px-2 relative flex justify-between items-center">
{isMobile && ( {isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" /> <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
@ -492,7 +492,7 @@ function DetectionReview({
<> <>
<div <div
ref={contentRef} ref={contentRef}
className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar" className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
> >
{filter?.before == undefined && ( {filter?.before == undefined && (
<NewReviewData <NewReviewData

12
web/src/views/events/RecordingView.tsx
View File

@ -230,7 +230,7 @@ export function RecordingView({
return "w-full aspect-wide"; return "w-full aspect-wide";
} else if (mainCameraAspect == "tall") { } else if (mainCameraAspect == "tall") {
if (isDesktop) { if (isDesktop) {
return "h-full aspect-tall flex flex-col justify-center"; return "size-full aspect-tall flex flex-col justify-center";
} else { } else {
return "size-full"; return "size-full";
} }
@ -240,7 +240,7 @@ export function RecordingView({
}, [mainCameraAspect]); }, [mainCameraAspect]);
return ( return (
<div ref={contentRef} className="size-full flex flex-col"> <div ref={contentRef} className="size-full pt-2 flex flex-col">
<Toaster /> <Toaster />
<div <div
className={`w-full h-11 px-2 relative flex items-center justify-between`} className={`w-full h-11 px-2 relative flex items-center justify-between`}
@ -338,17 +338,17 @@ export function RecordingView({
</div> </div>
<div <div
className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`} className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
> >
<div className="flex flex-1 flex-wrap"> <div className="flex flex-1 flex-wrap">
<div <div
className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`} className={`size-full flex px-4 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
> >
<div <div
key={mainCamera} key={mainCamera}
className={ className={
isDesktop isDesktop
? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}` ? `flex justify-center ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}`
: `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}` : `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
} }
style={{ style={{
@ -491,7 +491,7 @@ function Timeline({
<div <div
className={`${ className={`${
isDesktop isDesktop
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar` ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
: "flex-grow overflow-hidden" : "flex-grow overflow-hidden"
} relative`} } relative`}
> >

6
web/src/views/live/LiveBirdseyeView.tsx
View File

@ -116,7 +116,7 @@ export default function LiveBirdseyeView() {
className={ className={
fullscreen fullscreen
? `fixed inset-0 bg-black z-30` ? `fixed inset-0 bg-black z-30`
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}` : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
} }
> >
<div <div
@ -128,11 +128,11 @@ export default function LiveBirdseyeView() {
> >
{!fullscreen ? ( {!fullscreen ? (
<Button <Button
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`} className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
size={isMobile ? "icon" : "default"} size={isMobile ? "icon" : "default"}
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
> >
<IoMdArrowBack className="size-5 lg:mr-[10px]" /> <IoMdArrowBack className="size-5" />
{isDesktop && "Back"} {isDesktop && "Back"}
</Button> </Button>
) : ( ) : (

4
web/src/views/live/LiveCameraView.tsx
View File

@ -204,7 +204,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
className={ className={
fullscreen fullscreen
? `fixed inset-0 bg-black z-30` ? `fixed inset-0 bg-black z-30`
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}` : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
} }
> >
<div <div
@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
)} )}
<TooltipProvider> <TooltipProvider>
<div <div
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`} className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
> >
{!isIOS && ( {!isIOS && (
<CameraFeatureToggle <CameraFeatureToggle

6
web/src/views/live/LiveDashboardView.tsx
View File

@ -129,9 +129,9 @@ export default function LiveDashboardView({
const birdseyeConfig = useMemo(() => config?.birdseye, [config]); const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
return ( return (
<div className="size-full overflow-y-auto"> <div className="size-full p-2 overflow-y-auto">
{isMobile && ( {isMobile && (
<div className="h-11 px-2 relative flex items-center justify-between"> <div className="h-11 relative flex items-center justify-between">
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" /> <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<CameraGroupSelector /> <CameraGroupSelector />
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -164,7 +164,7 @@ export default function LiveDashboardView({
{events && events.length > 0 && ( {events && events.length > 0 && (
<ScrollArea> <ScrollArea>
<TooltipProvider> <TooltipProvider>
<div className="flex gap-2 items-center"> <div className="px-1 flex gap-2 items-center">
{events.map((event) => { {events.map((event) => {
return <AnimatedEventCard key={event.id} event={event} />; return <AnimatedEventCard key={event.id} event={event} />;
})} })}