+ client: 2152 Smartphone compatible design for user interface

client/src/components/Settings/Dhcp/Interfaces.js

@@ -46,7 +46,7 @@ const renderInterfaceValues = ({
     gateway_ip,
     hardware_address,
     ip_addresses,
-}) => <div className='d-flex align-items-end col-6'>
+}) => <div className='d-flex align-items-end col-md'>
     <ul className="list-unstyled m-0">
         {getInterfaceValues({
             gateway_ip,
@@ -78,11 +78,11 @@ const Interfaces = () => {
             && interfaces
             && <>
                 <div className="row align-items-center pb-2">
-                    <div className="col-6">
+                    <div className="col col__dhcp">
                         <Field
                                 name="interface_name"
                                 component={renderSelectField}
-                                className="form-control custom-select"
+                                className="form-control custom-select pl-4 col-md"
                                 validate={[validateRequiredValue]}
                                 label='dhcp_interface_select'
                         >
@@ -91,9 +91,9 @@ const Interfaces = () => {
                             </option>
                             {renderInterfaces(interfaces)}
                         </Field>
+                        {interfaceValue
+                        && renderInterfaceValues(interfaceValue)}
                     </div>
-                    {interfaceValue
-                    && renderInterfaceValues(interfaceValue)}
                 </div>
             </>;
 };

client/src/components/Settings/Dhcp/index.css

@@ -0,0 +1,31 @@
+.dhcp-form__button {
+    margin: 0 1rem;
+}
+
+.page-title--dhcp {
+    display: flex;
+    align-items: center;
+}
+
+.col__dhcp {
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+@media (max-width: 991.98px) {
+    .dhcp-form__button {
+        margin: 0.5rem 0;
+        display: block;
+    }
+
+    .page-title--dhcp {
+        flex-direction: column;
+        align-items: flex-start;
+        padding-bottom: 0.5rem;
+    }
+
+    .col__dhcp {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}

client/src/components/Settings/Dhcp/index.js

@@ -31,6 +31,7 @@ import {
     calculateDhcpPlaceholdersIpv4,
     calculateDhcpPlaceholdersIpv6,
 } from '../../../helpers/helpers';
+import './index.css';
 
 const Dhcp = () => {
     const { t } = useTranslation();
@@ -114,7 +115,7 @@ const Dhcp = () => {
             .every(Boolean) || Object.values(v6)
             .every(Boolean));
 
-        const className = classNames('btn btn-sm mr-2', {
+        const className = classNames('btn btn-sm', {
             'btn-gray': enabled,
             'btn-outline-success': !enabled,
         });
@@ -141,7 +142,7 @@ const Dhcp = () => {
         </button>;
     };
 
-    const statusButtonClass = classNames('btn btn-sm mx-2', {
+    const statusButtonClass = classNames('btn btn-sm dhcp-form__button', {
         'btn-loading btn-primary': processingStatus,
         'btn-outline-primary': !processingStatus,
     });
@@ -171,28 +172,24 @@ const Dhcp = () => {
     const toggleDhcpButton = getToggleDhcpButton();
 
     return <>
-        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')}>
-            <div className="page-title__actions">
-                <div className="mb-3">
-                    {toggleDhcpButton}
-                    <button
-                        type="button"
-                        className={statusButtonClass}
-                        onClick={onClick}
-                        disabled={enabled || !interface_name || processingConfig}
-                    >
-                        <Trans>check_dhcp_servers</Trans>
-                    </button>
-                    <button
-                        type="button"
-                        className='btn btn-sm mx-2 btn-outline-secondary'
-                        disabled={!enteredSomeValue || processingConfig}
-                        onClick={clear}
-                    >
-                        <Trans>reset_settings</Trans>
-                    </button>
-                </div>
-            </div>
+        <PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')} containerClass="page-title--dhcp">
+            {toggleDhcpButton}
+            <button
+                    type="button"
+                    className={statusButtonClass}
+                    onClick={onClick}
+                    disabled={enabled || !interface_name || processingConfig}
+            >
+                <Trans>check_dhcp_servers</Trans>
+            </button>
+            <button
+                    type="button"
+                    className='btn btn-sm btn-outline-secondary'
+                    disabled={!enteredSomeValue || processingConfig}
+                    onClick={clear}
+            >
+                <Trans>reset_settings</Trans>
+            </button>
         </PageTitle>
         {!processing && !processingInterfaces
         && <>