hide saved garden HUD on mobile

FarmBot · Feb 3, 2025 · 408f403 · 408f403
1 parent 11da0de
commit 408f403
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/frontend/farm_designer/__tests__/index_test.tsx b/frontend/farm_designer/__tests__/index_test.tsx
@@ -5,6 +5,13 @@ jest.mock("../../api/crud", () => ({
 
 jest.mock("../../plants/plant_inventory", () => ({ Plants: () => <div /> }));
 
+let mockIsMobile = false;
+let mockIsDesktop = false;
+jest.mock("../../screen_size", () => ({
+  isMobile: () => mockIsMobile,
+  isDesktop: () => mockIsDesktop,
+}));
+
 import React from "react";
 import {
   getDefaultAxisLength, getGridSize, RawFarmDesigner as FarmDesigner,
@@ -122,13 +129,38 @@ describe("<FarmDesigner />", () => {
   });
 
   it("renders saved garden indicator", () => {
+    mockIsMobile = false;
+    mockIsDesktop = true;
+    const p = fakeProps();
+    p.designer.openedSavedGarden = 1;
+    p.designer.panelOpen = false;
+    const wrapper = mount(<FarmDesigner {...p} />);
+    expect(wrapper.text().toLowerCase()).toContain("viewing saved garden");
+    expect(wrapper.html()).not.toContain("three-d-garden");
+  });
+
+  it("renders saved garden indicator on medium screens", () => {
+    mockIsMobile = false;
+    mockIsDesktop = false;
     const p = fakeProps();
     p.designer.openedSavedGarden = 1;
+    p.designer.panelOpen = false;
     const wrapper = mount(<FarmDesigner {...p} />);
     expect(wrapper.text().toLowerCase()).toContain("viewing saved garden");
     expect(wrapper.html()).not.toContain("three-d-garden");
   });
 
+  it("doesn't render saved garden indicator", () => {
+    mockIsMobile = true;
+    mockIsDesktop = false;
+    const p = fakeProps();
+    p.designer.openedSavedGarden = 1;
+    p.designer.panelOpen = false;
+    const wrapper = mount(<FarmDesigner {...p} />);
+    expect(wrapper.text().toLowerCase()).not.toContain("viewing saved garden");
+    expect(wrapper.html()).not.toContain("three-d-garden");
+  });
+
   it("toggles setting", () => {
     const p = fakeProps();
     const state = fakeState();

diff --git a/frontend/farm_designer/index.tsx b/frontend/farm_designer/index.tsx
@@ -27,6 +27,7 @@ import { ThreeDGardenMap } from "./three_d_garden_map";
 import { Outlet } from "react-router";
 import { ErrorBoundary } from "../error_boundary";
 import { get3DConfigValueFunction } from "../settings/three_d_settings";
+import { isDesktop, isMobile } from "../screen_size";
 
 export const getDefaultAxisLength =
   (getConfigValue: GetWebAppConfigValue): Record<Xyz, number> => {
@@ -268,7 +269,9 @@ export class RawFarmDesigner
             dispatch={this.props.dispatch} />
         </div>}
 
-      {this.props.designer.openedSavedGarden &&
+      {this.props.designer.openedSavedGarden
+        && !isMobile()
+        && (isDesktop() || !this.props.designer.panelOpen) &&
         <SavedGardenHUD dispatch={this.props.dispatch} />}
 
       {!this.props.getConfigValue(BooleanSetting.three_d_garden) &&