admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-4545: fix responsive ecu table (#367)

Browse Source 
* CEC-4545: fix responsive ecu table
This commit is contained in:
Tristan Timblin
2023-06-21 13:41:40 -04:00
committed by GitHub
parent 5120c27187
commit 224b4b2157
7 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -11276,6 +11276,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
</div>
<div
aria-labelledby="tab-0"
class="makeStyles-tabContainer-0"
id="tabpanel-0"
role="tabpanel"
>
@@ -11528,54 +11529,63 @@ exports[`App Route /vehicle-status authenticated 1`] = `
</div>
<div
aria-labelledby="tab-1"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-1"
role="tabpanel"
/>
<div
aria-labelledby="tab-2"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-2"
role="tabpanel"
/>
<div
aria-labelledby="tab-3"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-3"
role="tabpanel"
/>
<div
aria-labelledby="tab-4"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-4"
role="tabpanel"
/>
<div
aria-labelledby="tab-5"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-5"
role="tabpanel"
/>
<div
aria-labelledby="tab-6"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-6"
role="tabpanel"
/>
<div
aria-labelledby="tab-7"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-7"
role="tabpanel"
/>
<div
aria-labelledby="tab-8"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-8"
role="tabpanel"
/>
<div
aria-labelledby="tab-9"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-9"
role="tabpanel"

2
src/components/Cars/Status/ECUsTab.jsx
View File

@@ -16,7 +16,7 @@ const MainForm = ({ vin }) => {
} = useUserContext();
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<div className={clsx(classes.tableSize, classes.textCenterAlign)}>
<Typography variant="h6" className={classes.labelInline}>
Car ECUs
</Typography>

4
src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
View File

@@ -9,7 +9,7 @@ exports[`ECUsTab Render 1`] = `
data-testid="mocked-userprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
class="makeStyles-tableSize-0 makeStyles-textCenterAlign-0"
>
<h6
class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
@@ -17,7 +17,7 @@ exports[`ECUsTab Render 1`] = `
Car ECUs
</h6>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
class="MuiTableContainer-root"
>
<table
class="MuiTable-root"

10
src/components/Cars/Status/__snapshots__/index.test.jsx.snap
View File

@@ -223,6 +223,7 @@ exports[`CarStatus Render 1`] = `
</div>
<div
aria-labelledby="tab-0"
class="makeStyles-tabContainer-0"
id="tabpanel-0"
role="tabpanel"
>
@@ -418,54 +419,63 @@ exports[`CarStatus Render 1`] = `
</div>
<div
aria-labelledby="tab-1"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-1"
role="tabpanel"
/>
<div
aria-labelledby="tab-2"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-2"
role="tabpanel"
/>
<div
aria-labelledby="tab-3"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-3"
role="tabpanel"
/>
<div
aria-labelledby="tab-4"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-4"
role="tabpanel"
/>
<div
aria-labelledby="tab-5"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-5"
role="tabpanel"
/>
<div
aria-labelledby="tab-6"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-6"
role="tabpanel"
/>
<div
aria-labelledby="tab-7"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-7"
role="tabpanel"
/>
<div
aria-labelledby="tab-8"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-8"
role="tabpanel"
/>
<div
aria-labelledby="tab-9"
class="makeStyles-tabContainer-0"
hidden=""
id="tabpanel-9"
role="tabpanel"

7
src/components/Cars/Status/index.jsx
View File

@@ -147,7 +147,12 @@ const CarStatus = () => {
</Tabs>
</Box>
{tabs.map((item, index) => (
<TabPanel key={index} value={tabIndex} index={index}>
<TabPanel
key={index}
value={tabIndex}
index={index}
className={classes.tabContainer}
>
<item.component vin={vin} />
</TabPanel>
))}

6
src/components/Controls/CarECUsTable/index.jsx
View File

@@ -2,12 +2,12 @@ import {
Table,
TableBody,
TableCell,
TableContainer,
TableFooter,
TablePagination,
TableRow,
Tooltip
} from "@material-ui/core";
import clsx from "clsx";
import React, { useEffect, useState } from "react";
import { logger } from "../../../services/monitoring";
@@ -122,7 +122,7 @@ const CarECUsTable = ({ vin, token, classes }) => {
};
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<TableContainer>
<Table>
<TableHeaderSortable
classes={classes}
@@ -166,7 +166,7 @@ const CarECUsTable = ({ vin, token, classes }) => {
</TableRow>
</TableFooter>
</Table>
</div>
</TableContainer>
);
};

7
src/components/useStyles.jsx
View File

@@ -267,7 +267,12 @@ const useStyles = makeStyles((theme) => ({
textDecoration: "inherit",
color: "inherit",
},
tableSize: { height: 700, width: "100%" },
tableSize: {
width: "100%",
},
tabContainer: {
maxWidth: "100%",
},
whiteBackground: { backgroundColor: "White" },
progressIcon: { width: 40, height: 40 },
progressSuccess: { color: "green" },