daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: 2152 Smartphone compatible design for user interface

Browse Source
This commit is contained in:
ArtemBaskal
2020-10-06 11:54:06 +03:00
parent 8856dd6e4c
commit c98f18747c
12 changed files with 134 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/Settings/Dhcp/Interfaces.js
View File

@@ -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>
</>;
};

31
client/src/components/Settings/Dhcp/index.css Normal file
View File

@@ -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%;
}
}

45
client/src/components/Settings/Dhcp/index.js
View File

@@ -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
&& <>

11
client/src/components/Settings/FormButton.css Normal file
View File

@@ -0,0 +1,11 @@
.form__button {
margin-left: 1.5rem;
}
@media (max-width: 500px) {
.form__button {
margin-left: 0;
margin-top: 1rem;
display: block;
}
}

3
client/src/components/Settings/LogsConfig/Form.js
View File

@@ -6,6 +6,7 @@ import flow from 'lodash/flow';
import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
import '../FormButton.css';
const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
@@ -68,7 +69,7 @@ const Form = (props) => {
</button>
<button
type="button"
className="btn btn-outline-secondary btn-standard ml-5"
className="btn btn-outline-secondary btn-standard form__button"
onClick={() => handleClear()}
disabled={processingClear}
>

3
client/src/components/Settings/StatsConfig/Form.js
View File

@@ -6,6 +6,7 @@ import flow from 'lodash/flow';
import { renderRadioField, toNumber } from '../../../helpers/form';
import { FORM_NAME, STATS_INTERVALS_DAYS } from '../../../helpers/constants';
import '../FormButton.css';
const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => {
const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
@@ -52,7 +53,7 @@ const Form = (props) => {
</button>
<button
type="button"
className="btn btn-outline-secondary btn-standard ml-5"
className="btn btn-outline-secondary btn-standard form__button"
onClick={() => handleReset()}
disabled={processingReset}
>