sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #591 from ironcalc/dani/app/mobile-adjustments

Browse Source 
fix: mobile issues in app
This commit is contained in:
Daniel González-Albo
2025-11-26 00:51:08 +01:00
committed by GitHub
parent 080574b112 167d169f1a
commit cd0baf5ba7
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
webapp/app.ironcalc.com/frontend/src/App.tsx
View File

@@ -227,16 +227,19 @@ const Wrapper = styled("div")`
`; `;
const DRAWER_WIDTH = 264; const DRAWER_WIDTH = 264;
const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 440; export const MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE = 768;
const MainContent = styled("div")<{ isDrawerOpen: boolean }>` const MainContent = styled("div")<{ isDrawerOpen: boolean }>`
margin-left: ${({ isDrawerOpen }) => (isDrawerOpen ? "0px" : `-${DRAWER_WIDTH}px`)}; margin-left: ${({ isDrawerOpen }) =>
width: ${({ isDrawerOpen }) => (isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%")}; isDrawerOpen ? "0px" : `-${DRAWER_WIDTH}px`};
width: ${({ isDrawerOpen }) =>
isDrawerOpen ? `calc(100% - ${DRAWER_WIDTH}px)` : "100%"};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@media (max-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px) { @media (max-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px) {
${({ isDrawerOpen }) => isDrawerOpen && `min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px;`} ${({ isDrawerOpen }) =>
isDrawerOpen && `min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE}px;`}
} }
`; `;
@@ -247,7 +250,7 @@ const MobileOverlay = styled("div")`
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
z-index: 1; z-index: 100;
cursor: pointer; cursor: pointer;
@media (min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE + 1}px) { @media (min-width: ${MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE + 1}px) {

8
webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx
View File

@@ -3,6 +3,7 @@ import type { Model } from "@ironcalc/workbook";
import { IconButton, Tooltip } from "@mui/material"; import { IconButton, Tooltip } from "@mui/material";
import { CloudOff, PanelLeftClose, PanelLeftOpen } from "lucide-react"; import { CloudOff, PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { useLayoutEffect, useRef, useState } from "react"; import { useLayoutEffect, useRef, useState } from "react";
import { MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE } from "../App";
import { FileMenu } from "./FileMenu"; import { FileMenu } from "./FileMenu";
import { HelpMenu } from "./HelpMenu"; import { HelpMenu } from "./HelpMenu";
import { downloadModel } from "./rpc"; import { downloadModel } from "./rpc";
@@ -77,7 +78,7 @@ export function FileBar(properties: {
{properties.isDrawerOpen ? <PanelLeftClose /> : <PanelLeftOpen />} {properties.isDrawerOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
</DrawerButton> </DrawerButton>
</Tooltip> </Tooltip>
{width > 440 && ( {width > MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE && (
<FileMenu <FileMenu
newModel={properties.newModel} newModel={properties.newModel}
newModelFromTemplate={properties.newModelFromTemplate} newModelFromTemplate={properties.newModelFromTemplate}
@@ -92,7 +93,7 @@ export function FileBar(properties: {
onDelete={properties.onDelete} onDelete={properties.onDelete}
/> />
)} )}
{width > 440 && <HelpMenu />} {width > MIN_MAIN_CONTENT_WIDTH_FOR_MOBILE && <HelpMenu />}
<WorkbookTitleWrapper> <WorkbookTitleWrapper>
<WorkbookTitle <WorkbookTitle
name={properties.model.getName()} name={properties.model.getName()}
@@ -112,7 +113,8 @@ export function FileBar(properties: {
<div style={{ fontWeight: "bold" }}>{cloudWarningText2}</div> <div style={{ fontWeight: "bold" }}>{cloudWarningText2}</div>
</div> </div>
} }
placement="bottom-start" placement="bottom"
enterTouchDelay={0}
enterDelay={500} enterDelay={500}
slotProps={{ slotProps={{
popper: { popper: {