Fix ProxyEditor stylings

This commit is contained in:
Ilya Ig. Petrov 2017-06-01 14:11:28 +05:00
parent a97c76c345
commit 5a1f788247

View File

@ -7,6 +7,10 @@ export default function getProxyEditor(theState) {
const scopedCss = css` const scopedCss = css`
form.root {
width: 100%;
}
table.editor { table.editor {
border-collapse: collapse; border-collapse: collapse;
/*border-style: hidden;*/ /*border-style: hidden;*/
@ -19,6 +23,11 @@ export default function getProxyEditor(theState) {
color: #c9c9c9; color: #c9c9c9;
} }
table.editor th.shrink,
table.editor td.shrink {
width: 1%;
}
table.editor td, table.editor th { table.editor td, table.editor th {
border: 1px solid #ccc; border: 1px solid #ccc;
text-align: left; text-align: left;
@ -45,7 +54,7 @@ export default function getProxyEditor(theState) {
{ {
font-size: 0.9em; font-size: 0.9em;
} }
table.editor tr.addPanel td:nth-last-child(2) input /* PORT */ table.editor tr.addPanel td:nth-last-child(2) /* PORT */
{ {
min-width: 4em; min-width: 4em;
} }
@ -102,6 +111,7 @@ export default function getProxyEditor(theState) {
/* LAST COLUMN: BUTTONS */ /* LAST COLUMN: BUTTONS */
table.editor tr > *:nth-last-child(1), table.editor tr > *:nth-last-child(1),
table.editor tr > *:nth-last-child(2),
table.editor tr.proxyRow > td:first-child { table.editor tr.proxyRow > td:first-child {
text-align: center; text-align: center;
padding: 0; padding: 0;
@ -250,11 +260,14 @@ export default function getProxyEditor(theState) {
render(props) { render(props) {
return ( return (
<form onSubmit={linkEvent(this, this.handleSubmit)}> <form onSubmit={linkEvent(this, this.handleSubmit)} class={scopedCss.root}>
<table class={scopedCss.editor}> <table class={scopedCss.editor}>
<thead> <thead>
<tr> <tr>
<th colspan="2">протокол</th> <th>домен / IP</th> <th>порт</th> <th> <th colspan="2" class={scopedCss.shrink}>протокол</th>
<th>домен / IP</th>
<th class={scopedCss.shrink}>порт</th>
<th>
<SwitchButton title="импорт/экспорт" onClick={linkEvent(this, this.handleModeSwitch)}/> <SwitchButton title="импорт/экспорт" onClick={linkEvent(this, this.handleModeSwitch)}/>
</th> </th>
</tr> </tr>
@ -291,7 +304,7 @@ export default function getProxyEditor(theState) {
<td> <td>
{/* LAST-1: PORT */} {/* LAST-1: PORT */}
<input required type="number" disabled={props.ifInputsDisabled} <input required type="number" disabled={props.ifInputsDisabled}
class={scopedCss.noPad + ' ' + scopedCss.padLeft} class={scopedCss.noPad + ' ' + scopedCss.padLeft + ' ' + scopedCss.only}
placeholder="9150" placeholder="9150"
min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}" min="0" step="1" max={MAX_PORT} pattern="[0-9]{1,5}"
name="newPort" name="newPort"
@ -442,7 +455,7 @@ export default function getProxyEditor(theState) {
const reset = linkEvent(this, this.resetState); const reset = linkEvent(this, this.resetState);
return ( return (
<form onSubmit={linkEvent(this, this.handleSubmit)}> <form onSubmit={linkEvent(this, this.handleSubmit)} class={scopedCss.root}>
<table class={scopedCss.editor}> <table class={scopedCss.editor}>
<thead> <thead>
<tr> <tr>