andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 15:59:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

layout improvements

Browse Source
This commit is contained in:
Proddy
2023-05-13 16:55:49 +02:00
parent 26f5c9debf
commit c224abfc61
1 changed files with 54 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
interface/src/project/DashboardDevices.tsx
View File

@@ -50,22 +50,8 @@ import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react';
import { extractErrorMessage } from 'utils';
const useWindowSize = () => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
};
const DashboardDevices: FC = () => {
useWindowSize();
const [size, setSize] = useState([0, 0]);
const { me } = useContext(AuthenticatedContext);
const { LL } = useI18nContext();
const [deviceData, setDeviceData] = useState<DeviceData>({ data: [] });
@@ -79,6 +65,15 @@ const DashboardDevices: FC = () => {
devices: []
});
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
const leftOffset = () => {
const left = document.getElementById('devices-window')?.getBoundingClientRect().left;
const right = document.getElementById('devices-window')?.getBoundingClientRect().right;
@@ -103,7 +98,7 @@ const DashboardDevices: FC = () => {
}
`,
Row: `
background-color: #1e1e1e;
background-color: #1E1E1E;
position: relative;
cursor: pointer;
.td {
@@ -155,16 +150,22 @@ const DashboardDevices: FC = () => {
Table: `
--data-table-library_grid-template-columns: minmax(0, 1fr) 150px 40px;
height: auto;
max-height: 93%;
max-height: 100%;
overflow-y: scroll;
::-webkit-scrollbar {
display:none;
}
`,
BaseCell: `
&:nth-of-type(1) {
border-left: 1px solid #177ac9;
},
&:nth-of-type(2) {
text-align: right;
},
&:nth-of-type(3) {
border-right: 1px solid #177ac9;
}
`,
HeaderRow: `
.th {
@@ -485,14 +486,15 @@ const DashboardDevices: FC = () => {
sx={{
backgroundColor: 'black',
position: 'absolute',
right: 16,
bottom: 16,
top: 128,
left: () => leftOffset(),
border: '1px solid #177ac9',
right: 16,
bottom: 0,
top: 128,
maxHeight: () => size[1] - 210,
zIndex: 'modal'
}}
>
<Box sx={{ border: '1px solid #177ac9' }}>
<Grid container justifyContent="space-between">
<Box color="warning.main" ml={1}>
<Typography noWrap variant="h6">
@@ -507,7 +509,7 @@ const DashboardDevices: FC = () => {
</Grid>
</Grid>
<Grid>
<Grid item xs>
<IconButton onClick={() => setShowDeviceInfo(true)}>
<InfoOutlinedIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
@@ -525,6 +527,7 @@ const DashboardDevices: FC = () => {
<RefreshIcon color="primary" sx={{ fontSize: 18, verticalAlign: 'middle' }} />
</IconButton>
</Grid>
</Box>
<Table
data={{ nodes: shown_data }}