VikingKong
/
UCB_PAYMENT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve CSS styling (for now wide screens only).

Browse Source
master
sync 1 year ago
parent f9fa63e499
commit f5e452438d
5 changed files with 69 additions and 38 deletions
Show Stats Download Patch File Download Diff File

14
src/Form.css
Unescape View File

@ -83,8 +83,8 @@ body {
position: relative; position: relative;
padding: var(--padding); padding: var(--padding);
gap: 8px; gap: 8px;
height: 45vh; height: 35vh;
height: 45svh; height: 35svh;
display: grid; display: grid;
grid-area: 4 / 1 / span 6 / span 4; grid-area: 4 / 1 / span 6 / span 4;
grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr; grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr;
@ -123,8 +123,10 @@ body {
place-content: self-start center; place-content: self-start center;
background: hsl(0deg 100% 100%); background: hsl(0deg 100% 100%);
color: black; color: black;
font-size: 1.3125rem; font-size: 1.2125rem;
/* font-size: 1.3125rem; */ /* font-size: 1.3125rem; */
}
.label {
font-weight: bold; font-weight: bold;
} }
.title { .title {
@ -144,3 +146,9 @@ input, select {
border: 2px solid gray; border: 2px solid gray;
border-radius: 4px; border-radius: 4px;
} }
textarea {
font-size: 16px;
font-size: max(16px, 1em);
font-family: inherit;
width: 92%;
}

59
src/Form.jsx
Unescape View File

@ -274,12 +274,13 @@ function Form() {
<div className="section_line"></div> <div className="section_line"></div>
</div> </div>
<div className="payer"> <div className="payer">
<div className="child">Плательщик:</div> <div className="child label">Плательщик:</div>
<div className="child">{`${payerName} ${clientId}`}</div> <div className="child">{`${payerName} ${clientId}`}</div>
<div className="child">Номер счета:</div> <div className="child label">Номер счета:</div>
<div className="child"> <div className="child">
<select <select
value={payerAccount} value={payerAccount}
style={{ width: '40ch' }}
onChange={(e) => { onChange={(e) => {
setPayerAccount(e.target.value); setPayerAccount(e.target.value);
handleBlur(); handleBlur();
@ -294,9 +295,9 @@ function Form() {
))} ))}
</select> </select>
</div> </div>
<div className="child">ИНН:</div> <div className="child label">ИНН:</div>
<div className="child">{payerINN}</div> <div className="child">{payerINN}</div>
<div className="child">Сумма:</div> <div className="child label">Сумма:</div>
<div className="child"> <div className="child">
<span> <span>
<input <input
@ -309,13 +310,13 @@ function Form() {
RUB RUB
</span> </span>
</div> </div>
<div className="child">Телефон или электронный адрес:</div> <div className="child label">Телефон или электронный адрес:</div>
<div className="child">{payerPhoneEmail}</div> <div className="child">{payerPhoneEmail}</div>
<div className="child"></div> <div className="child"></div>
<div className="child"></div> <div className="child"></div>
<div className="child">Адрес места жительства:</div> <div className="child label">Адрес места жительства:</div>
<div className="child">{payerAddress}</div> <div className="child">{payerAddress}</div>
<div className="child">Комиссии и расходы:</div> <div className="child label">Комиссии и расходы:</div>
<div className="child"> <div className="child">
<select <select
value={chargesDetails} value={chargesDetails}
@ -337,7 +338,7 @@ function Form() {
<div className="receiver_1"> <div className="receiver_1">
<div className="child"></div> <div className="child"></div>
<div className="child"></div> <div className="child"></div>
<div className="child">БИК:</div> <div className="child label">БИК:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_bank_bic" id="bnf_bank_bic"
@ -350,22 +351,21 @@ function Form() {
}} }}
/> />
</div> </div>
<div className="child">№ Корр. счета:</div> <div className="child label">№ Корр. счета:</div>
<div className="child"> <div className="child">
<select <select
onChange={(e) => { onChange={(e) => {
setBNFBankAccount(e.target.value); setBNFBankAccount(e.target.value);
/* handleBlur(); */
}} }}
value={bnfBankAccount} value={bnfBankAccount}
style={{ maxWidth: '34ch' }} style={{ width: '28ch' }}
> >
{bnfBankAccounts.map((item, ind) => ( {bnfBankAccounts.map((item, ind) => (
<option key={`bnfBankAccount_${ind}`}>{item}</option> <option key={`bnfBankAccount_${ind}`}>{item}</option>
))} ))}
</select> </select>
</div> </div>
<div className="child">Номер счета:</div> <div className="child label">Номер счета:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_account" id="bnf_account"
@ -378,7 +378,7 @@ function Form() {
}} }}
/> />
</div> </div>
<div className="child">ИНН:</div> <div className="child label">ИНН:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_inn" id="bnf_inn"
@ -391,7 +391,7 @@ function Form() {
}} }}
/> />
</div> </div>
<div className="child">КПП (103):</div> <div className="child label">КПП (103):</div>
<div className="child"> <div className="child">
<input <input
id="bnf_kpp" id="bnf_kpp"
@ -406,7 +406,7 @@ function Form() {
</div> </div>
</div> </div>
<div className="receiver_2"> <div className="receiver_2">
<div className="child">Наименование:</div> <div className="child label">Наименование:</div>
<div className="child"> <div className="child">
<input <input
id="bnf_name" id="bnf_name"
@ -414,14 +414,14 @@ function Form() {
onChange={(e) => setBNFName(e.target.value)} onChange={(e) => setBNFName(e.target.value)}
onBlur={handleBlur} onBlur={handleBlur}
style={{ style={{
width: '100ch', width: '91%',
borderColor: getBorderColor('bnf_name'), borderColor: getBorderColor('bnf_name'),
}} }}
/> />
</div> </div>
<div className="child">Банк получателя:</div> <div className="child label">Банк получателя:</div>
<div className="child">{bnfBankName}</div> <div className="child">{bnfBankName}</div>
<div className="child">Назначение платежа:</div> <div className="child label">Назначение платежа:</div>
<div className="child"> <div className="child">
<textarea <textarea
id="payment_details" id="payment_details"
@ -430,29 +430,34 @@ function Form() {
onBlur={handleBlur} onBlur={handleBlur}
style={{ style={{
height: '60px', height: '60px',
width: '133ch',
borderColor: getBorderColor('payment_details'), borderColor: getBorderColor('payment_details'),
}} }}
/> />
</div> </div>
<div className="child">Код вида дохода:</div> <div className="child label">Код вида дохода:</div>
<div className="child"> <div className="child">
<select <select
style={{ width: '102ch' }} style={{ width: '60ch' }}
value={codePurpose} value={codePurpose}
onChange={(e) => { onChange={(e) => {
setCodePurpose(e.target.value); setCodePurpose(e.target.value);
handleBlur(); handleBlur();
}} }}
> >
<option>1</option> <option>1 - напр., заработная плата</option>
<option>2</option> <option>2 - алименты (периодические выплаты)</option>
<option>3</option> <option>
<option>4</option> 3 - возмещение вреда здоровью (периодические выплаты)
<option>5</option> </option>
<option>
4 - мат. помощь на рождение ребенка (единовременная выплата)
</option>
<option>
5 - возмещение вреда здоровью (единовременная выплата)
</option>
</select> </select>
</div> </div>
<div className="child">Код (УИП) (22):</div> <div className="child label">Код (УИП) (22):</div>
<div className="child"> <div className="child">
<input <input
value={taxUINCode} value={taxUINCode}

17
src/Messages.css
Unescape View File

@ -0,0 +1,17 @@
.message_error {
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,36,36,0.9528186274509804) 0%, rgba(249,126,126,1) 100%);
min-width: 460px;
margin: 3px;
border-radius: 2em / 4em;
cursor: pointer;
}
.message_warning {
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,179,36,0.9528186274509804) 0%, rgba(249,229,126,1) 100%);
min-width: 460px;
margin: 3px;
cursor: pointer;
border-radius: 2em / 4em;
}

14
src/Messages.jsx
Unescape View File

@ -1,21 +1,19 @@
import errorIcon from './assets/error.svg'; import errorIcon from './assets/error.svg';
import warningIcon from './assets/warning.svg'; import warningIcon from './assets/warning.svg';
import './Messages.css';
function Messages(props) { function Messages(props) {
return Object.keys(props.messages) return Object.keys(props.messages)
?.filter((item) => props.messages[item]?.status !== 'OK') ?.filter((item) => props.messages[item]?.status !== 'OK')
.map((item, ind) => ( .map((item, ind) => (
<div <div
className={
props.messages[item].status === 'ERROR'
? 'message_error'
: 'message_warning'
}
onClick={() => props.focusField(item)} onClick={() => props.focusField(item)}
key={`messages_${ind}`} key={`messages_${ind}`}
style={{
backgroundColor:
props.messages[item].status === 'ERROR' ? '#ffcccc' : '#ffebcc',
width: '500px',
padding: '5px',
border: 'solid 1px',
cursor: 'pointer',
}}
> >
<img <img
style={{ height: '20px' }} style={{ height: '20px' }}

3
src/Payment.css
Unescape View File

@ -9,4 +9,7 @@
.payment_messages { .payment_messages {
float: left; float: left;
max-width: 25%; max-width: 25%;
height: 100vh;
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,255,255,0.9528186274509804) 0%, rgba(236,236,234,1) 100%);
} }

Write Preview
Loading…
Cancel
Save