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

improved webUI display on narrow screens

Browse Source 
- unified vertical spacing (settings page)
- auto switching from 3 to 2 boxes displayed in row on narrow screens
- displaying (at least a part off) names of entities names on dashboard
- fixes MQTT discovery field too small
This commit is contained in:
pswid
2022-11-13 13:46:52 +01:00
parent 058246e2ce
commit dfd7647838
3 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
interface/src/framework/mqtt/MqttSettingsForm.tsx
View File

@@ -214,12 +214,13 @@ const MqttSettingsForm: FC = () => {
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item>
<BlockFormControlLabel
sx={{ pb: 2 }}
control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
label={LL.MQTT_PUBLISH_TEXT_3()}
/>
</Grid>
{data.ha_enabled && (
<Grid item xs={2}>
<Grid item sx={{ pb: 3 }}>
<ValidatedTextField
name="discovery_prefix"
label={LL.MQTT_PUBLISH_TEXT_4()}
@@ -233,11 +234,11 @@ const MqttSettingsForm: FC = () => {
)}
</Grid>
)}
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
<Typography variant="h6" color="primary">
{LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
</Typography>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_boiler"
@@ -253,7 +254,7 @@ const MqttSettingsForm: FC = () => {
margin="normal"
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_thermostat"
@@ -269,7 +270,7 @@ const MqttSettingsForm: FC = () => {
margin="normal"
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_solar"
@@ -285,7 +286,7 @@ const MqttSettingsForm: FC = () => {
margin="normal"
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_mixer"
@@ -301,7 +302,7 @@ const MqttSettingsForm: FC = () => {
margin="normal"
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_sensor"
@@ -317,7 +318,7 @@ const MqttSettingsForm: FC = () => {
margin="normal"
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="publish_time_other"

2
interface/src/project/DashboardData.tsx
View File

@@ -172,7 +172,7 @@ const DashboardData: FC = () => {
common_theme,
{
Table: `
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) minmax(140px, max-content) 40px;
--data-table-library_grid-template-columns: minmax(0, 1fr) 35% 40px;
`,
BaseRow: `
.td {

36
interface/src/project/SettingsApplication.tsx
View File

@@ -141,8 +141,8 @@ const SettingsApplication: FC = () => {
</ValidatedTextField>
{data.board_profile === 'CUSTOM' && (
<>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}>
<Grid container spacing={1} sx={{ pt: 1 }} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="rx_gpio"
@@ -156,7 +156,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="tx_gpio"
@@ -170,7 +170,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="pbutton_gpio"
@@ -184,7 +184,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="dallas_gpio"
@@ -198,7 +198,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="led_gpio"
@@ -212,7 +212,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="phy_type"
label={LL.PHY_TYPE()}
@@ -231,8 +231,8 @@ const SettingsApplication: FC = () => {
</Grid>
</Grid>
{data.phy_type !== 0 && (
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}>
<Grid container spacing={1} sx={{ pt: 1 }} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="eth_power"
label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -245,7 +245,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="eth_phy_addr"
label={LL.ADDRESS_OF('PHY I²C')}
@@ -258,7 +258,7 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="eth_clock_mode"
label="PHY Clk"
@@ -399,13 +399,14 @@ const SettingsApplication: FC = () => {
disabled={saving}
/>
<BlockFormControlLabel
sx={{ pb: 2 }}
control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />}
label={LL.ENABLE_SHOWER_ALERT()}
disabled={!data.shower_timer}
/>
{data.shower_alert && (
<>
<Grid>
<Grid item sx={{ pr: 1, pb: 2 }}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="shower_alert_trigger"
@@ -421,8 +422,7 @@ const SettingsApplication: FC = () => {
disabled={!data.shower_timer}
/>
</Grid>
&nbsp;&nbsp;
<Grid item xs={4}>
<Grid item sx={{ pb: 3 }}>
<ValidatedTextField
fieldErrors={fieldErrors}
name="shower_alert_coldshot"
@@ -441,11 +441,11 @@ const SettingsApplication: FC = () => {
</>
)}
</Grid>
<Typography sx={{ pt: 2 }} variant="h6" color="primary">
<Typography variant="h6" color="primary">
{LL.FORMATTING_OPTIONS()}
</Typography>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="bool_dashboard"
label={LL.BOOLEAN_FORMAT_DASHBOARD()}
@@ -462,7 +462,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={5}>1/0</MenuItem>
</ValidatedTextField>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="bool_format"
label={LL.BOOLEAN_FORMAT_API()}
@@ -481,7 +481,7 @@ const SettingsApplication: FC = () => {
<MenuItem value={6}>1/0</MenuItem>
</ValidatedTextField>
</Grid>
<Grid item xs={4}>
<Grid item xs={6} sm={4}>
<ValidatedTextField
name="enum_format"
label={LL.ENUM_FORMAT()}