From f25262c191ac1de07d908d74d6d289948032fcb5 Mon Sep 17 00:00:00 2001
From: pswid <78219494+pswid@users.noreply.github.com>
Date: Mon, 7 Nov 2022 10:41:57 +0100
Subject: [PATCH 1/2] fix: cosmetic webUI improvements

mainly in custom board profile and analog sensors settings. Now it looks more consistent with other settings pages.
---
 .../src/framework/mqtt/MqttSettingsForm.tsx   |  4 +-
 interface/src/project/DashboardData.tsx       | 59 ++++++++++---------
 interface/src/project/SettingsApplication.tsx | 52 ++++++++--------
 3 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/interface/src/framework/mqtt/MqttSettingsForm.tsx b/interface/src/framework/mqtt/MqttSettingsForm.tsx
index 8de9f71fc..b013bf276 100644
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -219,7 +219,7 @@ const MqttSettingsForm: FC = () => {
               />
             </Grid>
             {data.ha_enabled && (
-              <Grid item xs={6}>
+              <Grid item xs={2}>
                 <ValidatedTextField
                   name="discovery_prefix"
                   label={LL.MQTT_PUBLISH_TEXT_4()}
@@ -227,7 +227,7 @@ const MqttSettingsForm: FC = () => {
                   variant="outlined"
                   value={data.discovery_prefix}
                   onChange={updateFormValue}
-                  margin="normal"
+                  size="small"
                 />
               </Grid>
             )}
diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx
index 4f4e00c6f..7fcf237df 100644
--- a/interface/src/project/DashboardData.tsx
+++ b/interface/src/project/DashboardData.tsx
@@ -172,7 +172,7 @@ const DashboardData: FC = () => {
     common_theme,
     {
       Table: `
-        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 140px 40px;
+        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) minmax(140px, max-content) 40px;
       `,
       BaseRow: `
         .td {
@@ -1038,32 +1038,34 @@ const DashboardData: FC = () => {
           </DialogTitle>
           <DialogContent dividers>
             <Grid container spacing={2}>
-              <Grid item>
+              <Grid item xs={12}>
                 <ValidatedTextField
-                  name="g"
-                  label="GPIO"
-                  value={analog.g}
-                  type="number"
+                  name="n"
+                  label={LL.ENTITY_NAME()}
+                  value={analog.n}
+                  fullWidth
                   variant="outlined"
-                  autoFocus
                   onChange={updateValue(setAnalog)}
                 />
               </Grid>
-              <Grid item>
+              <Grid item xs={4}>
                 <ValidatedTextField
-                  name="n"
-                  label={LL.ENTITY_NAME()}
-                  value={analog.n}
-                  sx={{ width: '20ch' }}
+                  name="g"
+                  label="GPIO"
+                  value={analog.g}
+                  fullWidth
+                  type="number"
                   variant="outlined"
+                  autoFocus
                   onChange={updateValue(setAnalog)}
                 />
               </Grid>
-              <Grid item>
+              <Grid item xs={8}>
                 <ValidatedTextField
                   name="t"
                   label={LL.TYPE()}
                   value={analog.t}
+                  fullWidth
                   select
                   onChange={updateValue(setAnalog)}
                 >
@@ -1076,11 +1078,12 @@ const DashboardData: FC = () => {
               </Grid>
               {analog.t >= AnalogType.COUNTER && analog.t <= AnalogType.RATE && (
                 <>
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="u"
                       label={LL.UNIT()}
                       value={analog.u}
+                      fullWidth
                       select
                       onChange={updateValue(setAnalog)}
                     >
@@ -1092,12 +1095,12 @@ const DashboardData: FC = () => {
                     </ValidatedTextField>
                   </Grid>
                   {analog.t === AnalogType.ADC && (
-                    <Grid item>
+                    <Grid item xs={4}>
                       <ValidatedTextField
                         name="o"
                         label={LL.OFFSET()}
                         value={numberValue(analog.o)}
-                        sx={{ width: '20ch' }}
+                        fullWidth
                         type="number"
                         variant="outlined"
                         onChange={updateValue(setAnalog)}
@@ -1109,12 +1112,12 @@ const DashboardData: FC = () => {
                     </Grid>
                   )}
                   {analog.t === AnalogType.COUNTER && (
-                    <Grid item>
+                    <Grid item xs={4}>
                       <ValidatedTextField
                         name="o"
                         label={LL.STARTVALUE()}
                         value={numberValue(analog.o)}
-                        sx={{ width: '20ch' }}
+                        fullWidth
                         type="number"
                         variant="outlined"
                         onChange={updateValue(setAnalog)}
@@ -1122,12 +1125,12 @@ const DashboardData: FC = () => {
                       />
                     </Grid>
                   )}
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="f"
                       label={LL.FACTOR()}
                       value={numberValue(analog.f)}
-                      sx={{ width: '20ch' }}
+                      fullWidth
                       type="number"
                       variant="outlined"
                       onChange={updateValue(setAnalog)}
@@ -1138,12 +1141,12 @@ const DashboardData: FC = () => {
               )}
               {analog.t === AnalogType.DIGITAL_OUT && (analog.id === '25' || analog.id === '26') && (
                 <>
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="o"
                       label={LL.VALUE(0)}
                       value={numberValue(analog.o)}
-                      sx={{ width: '20ch' }}
+                      fullWidth
                       type="number"
                       variant="outlined"
                       onChange={updateValue(setAnalog)}
@@ -1154,12 +1157,12 @@ const DashboardData: FC = () => {
               )}
               {analog.t === AnalogType.DIGITAL_OUT && analog.id !== '25' && analog.id !== '26' && (
                 <>
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="o"
                       label={LL.VALUE(0)}
                       value={numberValue(analog.o)}
-                      sx={{ width: '20ch' }}
+                      fullWidth
                       type="number"
                       variant="outlined"
                       onChange={updateValue(setAnalog)}
@@ -1170,12 +1173,12 @@ const DashboardData: FC = () => {
               )}
               {analog.t >= AnalogType.PWM_0 && (
                 <>
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="f"
                       label={LL.FREQ()}
                       value={numberValue(analog.f)}
-                      sx={{ width: '20ch' }}
+                      fullWidth
                       type="number"
                       variant="outlined"
                       onChange={updateValue(setAnalog)}
@@ -1185,12 +1188,12 @@ const DashboardData: FC = () => {
                       }}
                     />
                   </Grid>
-                  <Grid item>
+                  <Grid item xs={4}>
                     <ValidatedTextField
                       name="o"
                       label={LL.DUTY_CYCLE()}
                       value={numberValue(analog.o)}
-                      sx={{ width: '20ch' }}
+                      fullWidth
                       type="number"
                       variant="outlined"
                       onChange={updateValue(setAnalog)}
diff --git a/interface/src/project/SettingsApplication.tsx b/interface/src/project/SettingsApplication.tsx
index f462d7bb6..ab906a814 100644
--- a/interface/src/project/SettingsApplication.tsx
+++ b/interface/src/project/SettingsApplication.tsx
@@ -127,6 +127,7 @@ const SettingsApplication: FC = () => {
           label={LL.BOARD_PROFILE()}
           value={data.board_profile}
           disabled={processingBoard}
+          fullWidth
           variant="outlined"
           onChange={changeBoardProfile}
           margin="normal"
@@ -183,7 +184,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item>
+              <Grid item xs={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="dallas_gpio"
@@ -197,7 +198,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item>
+              <Grid item xs={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="led_gpio"
@@ -211,27 +212,27 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-            </Grid>
-            <Grid item xs={4}>
-              <ValidatedTextField
-                name="phy_type"
-                label={LL.PHY_TYPE()}
-                disabled={saving}
-                value={data.phy_type}
-                fullWidth
-                variant="outlined"
-                onChange={updateFormValue}
-                margin="normal"
-                select
-              >
-                <MenuItem value={0}>{LL.DISABLED(1)}</MenuItem>
-                <MenuItem value={1}>LAN8720</MenuItem>
-                <MenuItem value={2}>TLK110</MenuItem>
-              </ValidatedTextField>
+              <Grid item xs={4}>
+                <ValidatedTextField
+                  name="phy_type"
+                  label={LL.PHY_TYPE()}
+                  disabled={saving}
+                  value={data.phy_type}
+                  fullWidth
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  select
+                >
+                  <MenuItem value={0}>{LL.DISABLED(1)}</MenuItem>
+                  <MenuItem value={1}>LAN8720</MenuItem>
+                  <MenuItem value={2}>TLK110</MenuItem>
+                </ValidatedTextField>
+              </Grid>
             </Grid>
             {data.phy_type !== 0 && (
               <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-                <Grid item>
+                <Grid item xs={4}>
                   <ValidatedTextField
                     name="eth_power"
                     label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -244,7 +245,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item>
+                <Grid item xs={4}>
                   <ValidatedTextField
                     name="eth_phy_addr"
                     label={LL.ADDRESS_OF('PHY I²C')}
@@ -257,7 +258,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item>
+                <Grid item xs={4}>
                   <ValidatedTextField
                     name="eth_clock_mode"
                     label="PHY Clk"
@@ -279,7 +280,7 @@ const SettingsApplication: FC = () => {
             )}
           </>
         )}
-        <Typography variant="h6" color="primary">
+        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.SETTINGS_OF(LL.EMS_BUS(0))}
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
@@ -404,7 +405,7 @@ const SettingsApplication: FC = () => {
           />
           {data.shower_alert && (
             <>
-              <Grid item xs={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_trigger"
@@ -416,9 +417,11 @@ const SettingsApplication: FC = () => {
                   value={data.shower_alert_trigger}
                   type="number"
                   onChange={updateFormValue}
+                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>
+              &nbsp;&nbsp;
               <Grid item xs={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
@@ -431,6 +434,7 @@ const SettingsApplication: FC = () => {
                   value={data.shower_alert_coldshot}
                   type="number"
                   onChange={updateFormValue}
+                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>

From dfd7647838072731ec73ed392a0142924a878a11 Mon Sep 17 00:00:00 2001
From: pswid <78219494+pswid@users.noreply.github.com>
Date: Sun, 13 Nov 2022 13:46:52 +0100
Subject: [PATCH 2/2] 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
---
 .../src/framework/mqtt/MqttSettingsForm.tsx   | 17 ++++-----
 interface/src/project/DashboardData.tsx       |  2 +-
 interface/src/project/SettingsApplication.tsx | 36 +++++++++----------
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/interface/src/framework/mqtt/MqttSettingsForm.tsx b/interface/src/framework/mqtt/MqttSettingsForm.tsx
index b013bf276..88b8b2c62 100644
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -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"
diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx
index 7fcf237df..c86bd6145 100644
--- a/interface/src/project/DashboardData.tsx
+++ b/interface/src/project/DashboardData.tsx
@@ -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 {
diff --git a/interface/src/project/SettingsApplication.tsx b/interface/src/project/SettingsApplication.tsx
index ab906a814..a181130f8 100644
--- a/interface/src/project/SettingsApplication.tsx
+++ b/interface/src/project/SettingsApplication.tsx
@@ -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()}