improved webUI display on narrow screens

- 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

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"