aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-03 11:23:36 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-03 11:23:36 -0700
commit0ed3111ec95e588f90e8d4f14472b651714444d9 (patch)
treef08fc2af0b50f13da51d1d88cb497b0c36fead4e /modern
parent0fb931d6b2193891eb8cefd002ef941eb6daed75 (diff)
downloadtrackermap-web-0ed3111ec95e588f90e8d4f14472b651714444d9.tar.gz
trackermap-web-0ed3111ec95e588f90e8d4f14472b651714444d9.tar.bz2
trackermap-web-0ed3111ec95e588f90e8d4f14472b651714444d9.zip
Smaller card header
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/StatusCard.js42
1 files changed, 21 insertions, 21 deletions
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index b42f9f3a..788235d5 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -6,9 +6,7 @@ import {
CardContent,
Typography,
CardActions,
- CardHeader,
IconButton,
- Avatar,
Table,
TableBody,
TableRow,
@@ -25,7 +23,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
import InfoIcon from '@mui/icons-material/Info';
import { useTranslation } from '../common/components/LocalizationProvider';
-import { formatStatus } from '../common/util/formatter';
import RemoveDialog from '../common/components/RemoveDialog';
import PositionValue from '../common/components/PositionValue';
import dimensions from '../common/theme/dimensions';
@@ -34,12 +31,21 @@ import usePersistedState from '../common/util/usePersistedState';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import { devicesActions } from '../store';
import { useCatch } from '../reactHelper';
-import { mapIcons } from '../map/core/preloadImages';
const useStyles = makeStyles((theme) => ({
card: {
width: dimensions.popupMaxWidth,
},
+ header: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ padding: theme.spacing(1, 1, 1, 2),
+ },
+ content: {
+ paddingTop: 0,
+ paddingBottom: theme.spacing(1),
+ },
negative: {
color: theme.palette.colors.negative,
},
@@ -50,8 +56,8 @@ const useStyles = makeStyles((theme) => ({
},
table: {
'& .MuiTableCell-sizeSmall': {
- paddingLeft: theme.spacing(0.5),
- paddingRight: theme.spacing(0.5),
+ paddingLeft: 0,
+ paddingRight: 0,
},
},
cell: {
@@ -112,22 +118,16 @@ const StatusCard = ({ deviceId, onClose }) => {
<>
{device && (
<Card elevation={3} className={classes.card}>
- <CardHeader
- avatar={(
- <Avatar>
- <img className={classes.icon} src={mapIcons[device.category || 'default']} alt="" />
- </Avatar>
- )}
- action={(
- <IconButton onClick={onClose}>
- <CloseIcon />
- </IconButton>
- )}
- title={device.name}
- subheader={formatStatus(device.status, t)}
- />
+ <div className={classes.header}>
+ <Typography variant="body2" color="textSecondary">
+ {device.name}
+ </Typography>
+ <IconButton size="small" onClick={onClose}>
+ <CloseIcon fontSize="small" />
+ </IconButton>
+ </div>
{position && (
- <CardContent>
+ <CardContent className={classes.content}>
<Table size="small" classes={{ root: classes.table }}>
<TableBody>
{positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (