fix mobile view: Scenes

YeonV · Jan 14, 2025 · 2140369 · 2140369
1 parent 78631e4
commit 2140369
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 51 deletions.
diff --git a/src/pages/Pages.tsx b/src/pages/Pages.tsx
@@ -6,7 +6,7 @@ import {
 } from 'react-router-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
 import isElectron from 'is-electron'
-import { Box, useTheme } from '@mui/material'
+import { Box, useMediaQuery, useTheme } from '@mui/material'
 import ScrollToTop from '../utils/scrollToTop'
 import '../App.css'
 
@@ -54,6 +54,8 @@ const Routings = ({ handleWs }: any) => {
   const features = useStore((state) => state.features)
   const setFeatures = useStore((state) => state.setFeatures)
   const setShowFeatures = useStore((state) => state.setShowFeatures)
+  const xsmallScreen = useMediaQuery('(max-width: 475px)')
+
   const smartBarOpen = useStore(
     (state) => state.ui.bars && state.ui.bars.smartBar.open
   )
@@ -102,7 +104,7 @@ const Routings = ({ handleWs }: any) => {
         sx={{
           flexGrow: 1,
           background: 'transparent',
-          padding: ios ? 0 : theme.spacing(0),
+          padding: ios || xsmallScreen ? '0 !important' : theme.spacing(0),
           transition: theme.transitions.create('margin', {
             easing: leftBarOpen
               ? theme.transitions.easing.easeOut

diff --git a/src/pages/Scenes/Scenes.tsx b/src/pages/Scenes/Scenes.tsx
@@ -9,7 +9,8 @@ import {
   Chip,
   useTheme,
   Alert,
-  Collapse
+  Collapse,
+  useMediaQuery
 } from '@mui/material'
 import useStore from '../../store/useStore'
 import NoYet from '../../components/NoYet'
@@ -35,6 +36,7 @@ const Scenes = () => {
   const infoAlerts = useStore((state) => state.uiPersist.infoAlerts)
   const setInfoAlerts = useStore((state) => state.setInfoAlerts)
   const sceneActiveTags = useStore((state) => state.ui.sceneActiveTags)
+  const xsmallScreen = useMediaQuery('(max-width: 475px)')
 
   const toggletSceneActiveTag = useStore(
     (state) => state.ui.toggletSceneActiveTag
@@ -99,16 +101,18 @@ const Scenes = () => {
           <Grid
             container
             spacing={[0, 0, 2, 2, 2]}
-            justifyContent="center"
+            justifyContent={xsmallScreen ? 'flex-start' : 'center'}
             m={['0 auto', '0 auto', '0.5rem', '0.5rem', '0.5rem']}
             sx={{ maxWidth: '100%' }}
           >
             <Grid
               item
               mt={['0.5rem', '0.5rem', 0, 0, 0]}
-              mb={['5rem', '5rem', 0, 0, 0]}
-              p="8px !important"
-              width={450}
+              mb={['2rem', '5rem', 0, 0, 0]}
+              ml="auto"
+              mr="auto"
+              p={`${xsmallScreen ? '0' : '8'}px !important`}
+              width={xsmallScreen ? 'calc(100% - 16px)' : 450}
             >
               <ScenesRecent
                 scenes={scenes}
@@ -119,9 +123,11 @@ const Scenes = () => {
             <Grid
               item
               mt={['0.5rem', '0.5rem', 0, 0, 0]}
-              mb={['5rem', '5rem', 0, 0, 0]}
-              p="8px !important"
-              width={450}
+              mb={['2rem', '5rem', 0, 0, 0]}
+              ml="auto"
+              mr="auto"
+              p={`${xsmallScreen ? '0' : '8'}px !important`}
+              width={xsmallScreen ? 'calc(100% - 16px)' : 450}
             >
               <ScenesMostUsed
                 scenes={scenes}
@@ -132,9 +138,11 @@ const Scenes = () => {
             <Grid
               item
               mt={['0.5rem', '0.5rem', 0, 0, 0]}
-              mb={['5rem', '5rem', 0, 0, 0]}
-              p="8px !important"
-              width={450}
+              mb={['2rem', '5rem', 0, 0, 0]}
+              ml="auto"
+              mr="auto"
+              p={`${xsmallScreen ? '0' : '8'}px !important`}
+              width={xsmallScreen ? 'calc(100% - 16px)' : 450}
             >
               <ScenesPlaylist
                 scenes={scenes}
@@ -180,7 +188,7 @@ const Scenes = () => {
       <Grid
         container
         spacing={[0, 0, 2, 2, 2]}
-        justifyContent="center"
+        justifyContent={xsmallScreen ? 'unset' : 'center'}
         m={['0 auto', '0 auto', '0.5rem', '0.5rem', '0.5rem']}
         sx={{ maxWidth: '100%' }}
       >

diff --git a/src/pages/Scenes/ScenesMostUsed.tsx b/src/pages/Scenes/ScenesMostUsed.tsx
@@ -6,7 +6,7 @@ import {
   GridEventListener,
   GridRenderCellParams
 } from '@mui/x-data-grid'
-import { Card, Typography, useTheme } from '@mui/material'
+import { Card, Typography, useMediaQuery, useTheme } from '@mui/material'
 import useStore from '../../store/useStore'
 import SceneImage from './ScenesImage'
 
@@ -22,6 +22,7 @@ export default function ScenesMostUsed({
   const mostUsedScenes = useStore((state) => state.mostUsedScenes)
   const setMostUsedScenes = useStore((state) => state.setMostUsedScenes)
   const getVirtuals = useStore((state) => state.getVirtuals)
+  const xsmallScreen = useMediaQuery('(max-width: 475px)')
 
   const sceneBlenderFilter = (sc: string) =>
     scenes[sc] && !scenes[sc].scene_tags?.split(',')?.includes('blender')
@@ -42,7 +43,7 @@ export default function ScenesMostUsed({
     {
       field: 'scene_image',
       headerName: 'Image',
-      width: db ? 100 : 150,
+      width: xsmallScreen || db ? 100 : 150,
       renderCell: (params: GridRenderCellParams) => (
         <SceneImage iconName={params.value || 'Wallpaper'} list />
       )
@@ -56,22 +57,23 @@ export default function ScenesMostUsed({
       field: 'used',
       headerName: 'Used',
       type: 'number',
-      width: 20
+      width: 70
     }
   ]
 
   return (
     <Card
       sx={{
         background: db ? 'transparent' : '',
-        borderColor: db ? 'transparent' : ''
+        borderColor: db ? 'transparent' : '',
+        maxWidth: xsmallScreen ? '100%' : 'unset'
       }}
     >
       <Box
         sx={{
           height: db ? 301 : 293,
           width: '100%',
-          maxWidth: '470px',
+          maxWidth: xsmallScreen ? 'unset' : '470px',
           m: '0 auto'
         }}
       >
@@ -98,6 +100,8 @@ export default function ScenesMostUsed({
           hideFooter
           // headerHeight={1}
           pageSizeOptions={[5]}
+          disableColumnSorting={xsmallScreen}
+          disableColumnMenu={xsmallScreen}
           disableRowSelectionOnClick
           rows={Object.values(mostUsedScenes)
             .filter((scene: any) => sceneBlenderFilter(scene.name))

diff --git a/src/pages/Scenes/ScenesPlaylist.tsx b/src/pages/Scenes/ScenesPlaylist.tsx
@@ -7,6 +7,7 @@ import {
   IconButton,
   TextField,
   Typography,
+  useMediaQuery,
   useTheme
 } from '@mui/material'
 import {
@@ -46,6 +47,7 @@ export default function ScenesPlaylist({
   const scenePLinterval = useStore((state) => state.scenePLinterval)
   const setScenePLinterval = useStore((state) => state.setScenePLinterval)
   const setScenePLactiveIndex = useStore((state) => state.setScenePLactiveIndex)
+  const xsmallScreen = useMediaQuery('(max-width: 475px)')
 
   useEffect(() => {
     const current = scenePL.map((key: string, id: number) => ({
@@ -106,15 +108,15 @@ export default function ScenesPlaylist({
     {
       field: 'scene_image',
       headerName: 'Image',
-      width: db ? 100 : 150,
+      width: xsmallScreen ? 70 : db ? 100 : 150,
       renderCell: (params: GridRenderCellParams) => (
         <SceneImage iconName={params.value || 'Wallpaper'} list />
       )
     },
     {
       field: 'name',
       headerName: 'Name',
-      width: db ? 136 : 200,
+      width: xsmallScreen ? 160 : db ? 136 : 200,
       renderCell: (params: GridRenderCellParams) => (
         <Typography
           variant="body2"
@@ -170,7 +172,7 @@ export default function ScenesPlaylist({
     {
       field: 'scene_id',
       headerName: 'Remove',
-      width: 70,
+      width: 80,
       renderCell: (params: GridRenderCellParams) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const removeScene2PL = useStore((state) => state.removeScene2PL)
@@ -213,7 +215,7 @@ export default function ScenesPlaylist({
             borderColor: db ? 'transparent' : theme.palette.divider,
             borderBottom: 0,
             display: 'flex',
-            justifyContent: 'space-between',
+            justifyContent: xsmallScreen ? 'flex-start' : 'space-between',
             alignItems: 'center'
           }}
         >
@@ -266,12 +268,12 @@ export default function ScenesPlaylist({
                 {sceneUseIntervals ? <Timer /> : <TimerOff />}
               </Button>
             )}
-            {db ? '' : 'sec'}
+            {db || xsmallScreen ? '' : 'sec'}
             <TextField
               variant="standard"
               disabled={!sceneUseIntervals}
               sx={{
-                width: 70,
+                width: 60,
                 // border: '1px solid',
                 // borderColor: theme.palette.divider,
                 marginRight: 1,
@@ -309,7 +311,7 @@ export default function ScenesPlaylist({
               </IconButton>
             ) : (
               <Button
-                sx={{ mr: 1 }}
+                // sx={{ mr: 1 }}
                 onClick={() => {
                   if (scenePLplay) {
                     setScenePLactiveIndex(-1)
@@ -330,6 +332,8 @@ export default function ScenesPlaylist({
           rowHeight={50}
           columns={columns}
           hideFooter
+          disableColumnSorting={xsmallScreen}
+          disableColumnMenu={xsmallScreen}
           // headerHeight={1}
           // pageSize={5}
           disableRowSelectionOnClick
@@ -362,6 +366,9 @@ export default function ScenesPlaylist({
             },
             '&.MuiDataGrid-root .row--active': {
               background: `${theme.palette.primary.main}30`
+            },
+            '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeaderTitle': {
+              textOverflow: 'clip'
             }
           }}
         />

diff --git a/src/pages/Scenes/ScenesRecent.tsx b/src/pages/Scenes/ScenesRecent.tsx
@@ -6,37 +6,38 @@ import {
   GridEventListener,
   GridRenderCellParams
 } from '@mui/x-data-grid'
-import { Card, Typography, useTheme } from '@mui/material'
+import { Card, Typography, useMediaQuery, useTheme } from '@mui/material'
 import useStore from '../../store/useStore'
 import SceneImage from './ScenesImage'
 
-const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', width: 70 },
-  {
-    field: 'scene_image',
-    headerName: 'Image',
-    width: 150,
-    renderCell: (params: GridRenderCellParams) => (
-      <SceneImage iconName={params.value || 'Wallpaper'} />
-    )
-  },
-  {
-    field: 'name',
-    headerName: 'Name',
-    width: 220
-  },
-  {
-    field: 'used',
-    type: 'number',
-    headerName: 'Order',
-    width: 20
-  }
-]
-
 export default function ScenesRecent({ scenes, activateScene, title }: any) {
   const theme = useTheme()
   const recentScenes = useStore((state) => state.recentScenes)
   const [theScenes, setTheScenes] = useState({})
+  const xsmallScreen = useMediaQuery('(max-width: 475px)')
+
+  const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', width: 70 },
+    {
+      field: 'scene_image',
+      headerName: 'Image',
+      width: xsmallScreen ? 100 : 150,
+      renderCell: (params: GridRenderCellParams) => (
+        <SceneImage iconName={params.value || 'Wallpaper'} list />
+      )
+    },
+    {
+      field: 'name',
+      headerName: 'Name',
+      width: 220
+    },
+    {
+      field: 'used',
+      type: 'number',
+      headerName: 'Order',
+      width: 70
+    }
+  ]
 
   const sceneBlenderFilter = (sc: string) =>
     scenes[sc] && !scenes[sc].scene_tags?.split(',')?.includes('blender')
@@ -56,7 +57,7 @@ export default function ScenesRecent({ scenes, activateScene, title }: any) {
   }, [scenes, recentScenes])
 
   return (
-    <Card>
+    <Card sx={{ width: '100%', maxWidth: 'unset' }}>
       <Box sx={{ height: 293, width: '100%', maxWidth: '470px', m: '0 auto' }}>
         <Typography
           color="GrayText"
@@ -73,6 +74,8 @@ export default function ScenesRecent({ scenes, activateScene, title }: any) {
           {title}
         </Typography>
         <DataGrid
+          disableColumnSorting={xsmallScreen}
+          disableColumnMenu={xsmallScreen}
           onRowClick={handleEvent}
           rowHeight={50}
           columns={columns}