aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/common/components/StatusCard.js22
-rw-r--r--modern/src/main/MainPage.js26
-rw-r--r--modern/src/other/EventPage.js28
-rw-r--r--modern/src/other/ReplayPage.js26
4 files changed, 37 insertions, 65 deletions
diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js
index 6b8a9fd3..c6ab1f51 100644
--- a/modern/src/common/components/StatusCard.js
+++ b/modern/src/common/components/StatusCard.js
@@ -77,6 +77,20 @@ const useStyles = makeStyles((theme) => ({
actions: {
justifyContent: 'space-between',
},
+ root: ({ desktopPadding }) => ({
+ position: 'fixed',
+ zIndex: 5,
+ left: '50%',
+ [theme.breakpoints.up('md')]: {
+ left: `calc(50% + ${desktopPadding} / 2)`,
+ bottom: theme.spacing(3),
+ },
+ [theme.breakpoints.down('md')]: {
+ left: '50%',
+ bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
+ },
+ transform: 'translateX(-50%)',
+ }),
}));
const StatusRow = ({ name, content }) => {
@@ -94,8 +108,8 @@ const StatusRow = ({ name, content }) => {
);
};
-const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
- const classes = useStyles();
+const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => {
+ const classes = useStyles({ desktopPadding });
const navigate = useNavigate();
const dispatch = useDispatch();
const t = useTranslation();
@@ -153,7 +167,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
}, [navigate]);
return (
- <>
+ <div className={classes.root}>
{device && (
<Draggable
handle={`.${classes.media}, .${classes.header}`}
@@ -259,7 +273,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
itemId={deviceId}
onResult={(removed) => handleRemove(removed)}
/>
- </>
+ </div>
);
};
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index a174096e..4e88733a 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -80,19 +80,6 @@ const useStyles = makeStyles((theme) => ({
deviceList: {
flex: 1,
},
- statusCard: {
- position: 'fixed',
- zIndex: 5,
- [theme.breakpoints.up('md')]: {
- left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`,
- bottom: theme.spacing(3),
- },
- [theme.breakpoints.down('md')]: {
- left: '50%',
- bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
- },
- transform: 'translateX(-50%)',
- },
sidebarToggle: {
position: 'fixed',
left: theme.spacing(1.5),
@@ -367,13 +354,12 @@ const MainPage = () => {
)}
{!features.disableEvents && <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />}
{selectedDeviceId && (
- <div className={classes.statusCard}>
- <StatusCard
- deviceId={selectedDeviceId}
- position={positions[selectedDeviceId]}
- onClose={() => dispatch(devicesActions.select(null))}
- />
- </div>
+ <StatusCard
+ deviceId={selectedDeviceId}
+ position={positions[selectedDeviceId]}
+ onClose={() => dispatch(devicesActions.select(null))}
+ desktopPadding={theme.dimensions.drawerWidthDesktop}
+ />
)}
</div>
);
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index b040bfb3..9da8be79 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -14,7 +14,7 @@ import MapPositions from '../map/MapPositions';
import MapGeofence from '../map/MapGeofence';
import StatusCard from '../common/components/StatusCard';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
root: {
height: '100%',
display: 'flex',
@@ -26,18 +26,6 @@ const useStyles = makeStyles((theme) => ({
mapContainer: {
flexGrow: 1,
},
- statusCard: {
- position: 'fixed',
- zIndex: 5,
- left: '50%',
- [theme.breakpoints.up('md')]: {
- bottom: theme.spacing(3),
- },
- [theme.breakpoints.down('md')]: {
- bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
- },
- transform: 'translateX(-50%)',
- },
}));
const EventPage = () => {
@@ -97,14 +85,12 @@ const EventPage = () => {
</MapView>
{position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
{position && showCard && (
- <div className={classes.statusCard}>
- <StatusCard
- deviceId={position.deviceId}
- position={position}
- onClose={() => setShowCard(false)}
- disableActions
- />
- </div>
+ <StatusCard
+ deviceId={position.deviceId}
+ position={position}
+ onClose={() => setShowCard(false)}
+ disableActions
+ />
)}
</div>
</div>
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index ee9e15d9..ab549eba 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -73,18 +73,6 @@ const useStyles = makeStyles((theme) => ({
marginTop: theme.spacing(1),
},
},
- statusCard: {
- position: 'fixed',
- zIndex: 5,
- left: '50%',
- [theme.breakpoints.up('md')]: {
- bottom: theme.spacing(3),
- },
- [theme.breakpoints.down('md')]: {
- bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
- },
- transform: 'translateX(-50%)',
- },
}));
const ReplayPage = () => {
@@ -228,14 +216,12 @@ const ReplayPage = () => {
</Paper>
</div>
{showCard && index < positions.length && (
- <div className={classes.statusCard}>
- <StatusCard
- deviceId={selectedDeviceId}
- position={positions[index]}
- onClose={() => setShowCard(false)}
- disableActions
- />
- </div>
+ <StatusCard
+ deviceId={selectedDeviceId}
+ position={positions[index]}
+ onClose={() => setShowCard(false)}
+ disableActions
+ />
)}
</div>
);