style(http-proxy): fix margin for responsive design (#1194)

This commit is contained in:
Fallenbagel
2024-12-30 05:09:23 +08:00
committed by GitHub
parent b6e2e6ce61
commit 5fc4ae57c0

View File

@@ -563,151 +563,157 @@ const SettingsMain = () => {
</div> </div>
{values.proxyEnabled && ( {values.proxyEnabled && (
<> <>
<div className="form-row"> <div className="mr-2 ml-4">
<label htmlFor="proxyHostname" className="checkbox-label"> <div className="form-row">
<span className="mr-2 ml-4"> <label
htmlFor="proxyHostname"
className="checkbox-label"
>
{intl.formatMessage(messages.proxyHostname)} {intl.formatMessage(messages.proxyHostname)}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <div className="form-input-field">
<div className="form-input-field"> <Field
<Field id="proxyHostname"
id="proxyHostname" name="proxyHostname"
name="proxyHostname" type="text"
type="text" />
/> </div>
{errors.proxyHostname &&
touched.proxyHostname &&
typeof errors.proxyHostname === 'string' && (
<div className="error">
{errors.proxyHostname}
</div>
)}
</div> </div>
{errors.proxyHostname &&
touched.proxyHostname &&
typeof errors.proxyHostname === 'string' && (
<div className="error">{errors.proxyHostname}</div>
)}
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label htmlFor="proxyPort" className="checkbox-label">
<label htmlFor="proxyPort" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyPort)} {intl.formatMessage(messages.proxyPort)}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <div className="form-input-field">
<div className="form-input-field"> <Field
<Field id="proxyPort" name="proxyPort" type="text" /> id="proxyPort"
name="proxyPort"
type="text"
/>
</div>
{errors.proxyPort &&
touched.proxyPort &&
typeof errors.proxyPort === 'string' && (
<div className="error">{errors.proxyPort}</div>
)}
</div> </div>
{errors.proxyPort &&
touched.proxyPort &&
typeof errors.proxyPort === 'string' && (
<div className="error">{errors.proxyPort}</div>
)}
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label htmlFor="proxySsl" className="checkbox-label">
<label htmlFor="proxySsl" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxySsl)} {intl.formatMessage(messages.proxySsl)}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <Field
<Field type="checkbox"
type="checkbox" id="proxySsl"
id="proxySsl" name="proxySsl"
name="proxySsl" onChange={() => {
onChange={() => { setFieldValue('proxySsl', !values.proxySsl);
setFieldValue('proxySsl', !values.proxySsl); }}
}} />
/> </div>
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label htmlFor="proxyUser" className="checkbox-label">
<label htmlFor="proxyUser" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyUser)} {intl.formatMessage(messages.proxyUser)}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <div className="form-input-field">
<div className="form-input-field"> <Field
<Field id="proxyUser" name="proxyUser" type="text" /> id="proxyUser"
name="proxyUser"
type="text"
/>
</div>
{errors.proxyUser &&
touched.proxyUser &&
typeof errors.proxyUser === 'string' && (
<div className="error">{errors.proxyUser}</div>
)}
</div> </div>
{errors.proxyUser &&
touched.proxyUser &&
typeof errors.proxyUser === 'string' && (
<div className="error">{errors.proxyUser}</div>
)}
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label
<label htmlFor="proxyPassword" className="checkbox-label"> htmlFor="proxyPassword"
<span className="mr-2 ml-4"> className="checkbox-label"
>
{intl.formatMessage(messages.proxyPassword)} {intl.formatMessage(messages.proxyPassword)}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <div className="form-input-field">
<div className="form-input-field"> <Field
<Field id="proxyPassword"
id="proxyPassword" name="proxyPassword"
name="proxyPassword" type="password"
type="password" />
/> </div>
{errors.proxyPassword &&
touched.proxyPassword &&
typeof errors.proxyPassword === 'string' && (
<div className="error">
{errors.proxyPassword}
</div>
)}
</div> </div>
{errors.proxyPassword &&
touched.proxyPassword &&
typeof errors.proxyPassword === 'string' && (
<div className="error">{errors.proxyPassword}</div>
)}
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label
<label htmlFor="proxyBypassFilter"
htmlFor="proxyBypassFilter" className="checkbox-label"
className="checkbox-label" >
>
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyBypassFilter)} {intl.formatMessage(messages.proxyBypassFilter)}
</span> <span className="label-tip">
<span className="label-tip ml-4"> {intl.formatMessage(messages.proxyBypassFilterTip)}
{intl.formatMessage(messages.proxyBypassFilterTip)} </span>
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <div className="form-input-field">
<div className="form-input-field"> <Field
<Field id="proxyBypassFilter"
id="proxyBypassFilter" name="proxyBypassFilter"
name="proxyBypassFilter" type="text"
type="text" />
/> </div>
{errors.proxyBypassFilter &&
touched.proxyBypassFilter &&
typeof errors.proxyBypassFilter === 'string' && (
<div className="error">
{errors.proxyBypassFilter}
</div>
)}
</div> </div>
{errors.proxyBypassFilter &&
touched.proxyBypassFilter &&
typeof errors.proxyBypassFilter === 'string' && (
<div className="error">
{errors.proxyBypassFilter}
</div>
)}
</div> </div>
</div> <div className="form-row">
<div className="form-row"> <label
<label htmlFor="proxyBypassLocalAddresses"
htmlFor="proxyBypassLocalAddresses" className="checkbox-label"
className="checkbox-label" >
>
<span className="mr-2 ml-4">
{intl.formatMessage( {intl.formatMessage(
messages.proxyBypassLocalAddresses messages.proxyBypassLocalAddresses
)} )}
</span> </label>
</label> <div className="form-input-area">
<div className="form-input-area"> <Field
<Field type="checkbox"
type="checkbox" id="proxyBypassLocalAddresses"
id="proxyBypassLocalAddresses" name="proxyBypassLocalAddresses"
name="proxyBypassLocalAddresses" onChange={() => {
onChange={() => { setFieldValue(
setFieldValue( 'proxyBypassLocalAddresses',
'proxyBypassLocalAddresses', !values.proxyBypassLocalAddresses
!values.proxyBypassLocalAddresses );
); }}
}} />
/> </div>
</div> </div>
</div> </div>
</> </>