aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-04 10:27:06 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-04 10:27:06 -0700
commit88514a2ff053490b4342caeeaf5abf13355fc5d8 (patch)
treeef6a79a225863a416b96966c7bdaa491db9cec7e
parentc3485f12fbd263c5f3d52eefc6165dc3915edc12 (diff)
downloadtrackermap-web-88514a2ff053490b4342caeeaf5abf13355fc5d8.tar.gz
trackermap-web-88514a2ff053490b4342caeeaf5abf13355fc5d8.tar.bz2
trackermap-web-88514a2ff053490b4342caeeaf5abf13355fc5d8.zip
Better image layout (fix #678)
-rw-r--r--modern/src/main/StatusCard.js45
-rw-r--r--modern/src/other/GeofencesPage.js5
-rw-r--r--modern/src/settings/components/CollectionFab.js3
3 files changed, 32 insertions, 21 deletions
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index e4734437..4067ac1e 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -26,7 +26,6 @@ import InfoIcon from '@mui/icons-material/Info';
import { useTranslation } from '../common/components/LocalizationProvider';
import RemoveDialog from '../common/components/RemoveDialog';
import PositionValue from '../common/components/PositionValue';
-import dimensions from '../common/theme/dimensions';
import { useDeviceReadonly, useReadonly } from '../common/util/permissions';
import usePersistedState from '../common/util/usePersistedState';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
@@ -35,16 +34,26 @@ import { useCatch } from '../reactHelper';
const useStyles = makeStyles((theme) => ({
card: {
- width: dimensions.popupMaxWidth,
+ width: theme.dimensions.popupMaxWidth,
+ },
+ media: {
+ height: theme.dimensions.popupImageHeight,
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'flex-start',
+ },
+ mediaButton: {
+ color: theme.palette.colors.white,
+ mixBlendMode: 'difference',
},
header: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- padding: theme.spacing(1, 1, 1, 2),
+ padding: theme.spacing(1, 1, 0, 2),
},
content: {
- paddingTop: 0,
+ paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
},
negative: {
@@ -121,21 +130,25 @@ const StatusCard = ({ deviceId, onClose }) => {
<>
{device && (
<Card elevation={3} className={classes.card}>
- {deviceImage && (
+ {deviceImage ? (
<CardMedia
- component="img"
- height={dimensions.popupImageHeight}
+ className={classes.media}
image={`/api/media/${device.uniqueId}/${deviceImage}`}
- />
+ >
+ <IconButton size="small" onClick={onClose}>
+ <CloseIcon fontSize="small" className={classes.mediaButton} />
+ </IconButton>
+ </CardMedia>
+ ) : (
+ <div className={classes.header}>
+ <Typography variant="body2" color="textSecondary">
+ {device.name}
+ </Typography>
+ <IconButton size="small" onClick={onClose}>
+ <CloseIcon fontSize="small" />
+ </IconButton>
+ </div>
)}
- <div className={classes.header}>
- <Typography variant="body2" color="textSecondary">
- {device.name}
- </Typography>
- <IconButton size="small" onClick={onClose}>
- <CloseIcon fontSize="small" />
- </IconButton>
- </div>
{position && (
<CardContent className={classes.content}>
<Table size="small" classes={{ root: classes.table }}>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 59dcdc4e..dd6d96c7 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -14,7 +14,6 @@ import MapCurrentLocation from '../map/MapCurrentLocation';
import MapGeofenceEdit from '../map/MapGeofenceEdit';
import GeofencesList from './GeofencesList';
import { useTranslation } from '../common/components/LocalizationProvider';
-import dimensions from '../common/theme/dimensions';
import MapGeocoder from '../map/geocoder/MapGeocoder';
import { errorsActions } from '../store';
@@ -36,10 +35,10 @@ const useStyles = makeStyles((theme) => ({
drawerPaper: {
position: 'relative',
[theme.breakpoints.up('sm')]: {
- width: dimensions.drawerWidthTablet,
+ width: theme.dimensions.drawerWidthTablet,
},
[theme.breakpoints.down('sm')]: {
- height: dimensions.drawerHeightPhone,
+ height: theme.dimensions.drawerHeightPhone,
},
},
mapContainer: {
diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js
index 2fb5b5c9..44f91591 100644
--- a/modern/src/settings/components/CollectionFab.js
+++ b/modern/src/settings/components/CollectionFab.js
@@ -4,7 +4,6 @@ import makeStyles from '@mui/styles/makeStyles';
import AddIcon from '@mui/icons-material/Add';
import { useNavigate } from 'react-router-dom';
import { useReadonly } from '../../common/util/permissions';
-import dimensions from '../../common/theme/dimensions';
const useStyles = makeStyles((theme) => ({
fab: {
@@ -12,7 +11,7 @@ const useStyles = makeStyles((theme) => ({
bottom: theme.spacing(2),
right: theme.spacing(2),
[theme.breakpoints.down('md')]: {
- bottom: dimensions.bottomBarHeight + theme.spacing(2),
+ bottom: theme.dimensions.bottomBarHeight + theme.spacing(2),
},
},
}));