mirror of
https://github.com/kbenestad/invoice.git
synced 2026-06-18 16:14:33 +00:00
Move Charge To card under Invoice Details in right column
Restructure the top section from a flat 2x2 grid to: Sender on the left, Invoice Details + Charge To stacked in the right column, Payment as a full-width card below. https://claude.ai/code/session_0151QtsUhzXmgzEhSvXG2SDt
This commit is contained in:
Claude
parent
501404ed7f
commit
c6a84590ce
1 changed files with 74 additions and 72 deletions
146
app/index.html
146
app/index.html
|
|
@ -498,81 +498,83 @@ function buildForm() {
|
||||||
<div class="fi"><label id="lbl-stax">${t("vat-id")}:</label>
|
<div class="fi"><label id="lbl-stax">${t("vat-id")}:</label>
|
||||||
<input id="stax" type="text" data-ls="stax"></div>
|
<input id="stax" type="text" data-ls="stax"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div style="display:flex;flex-direction:column;gap:12px">
|
||||||
<div class="card-title" id="sec-invdet">${t("invoice-details-section")}</div>
|
<div class="card">
|
||||||
<div class="fg"><label id="lbl-idate" for="idate">${t("invoice-date")}</label>
|
<div class="card-title" id="sec-invdet">${t("invoice-details-section")}</div>
|
||||||
<input id="idate" type="date" value="${dateDef}"></div>
|
<div class="fg"><label id="lbl-idate" for="idate">${t("invoice-date")}</label>
|
||||||
<div class="fg"><label id="lbl-icur" for="icur">${t("invoice-currency")}</label>
|
<input id="idate" type="date" value="${dateDef}"></div>
|
||||||
<select id="icur" data-ls="icur">${curOpts}</select></div>
|
<div class="fg"><label id="lbl-icur" for="icur">${t("invoice-currency")}</label>
|
||||||
<div class="fg"><label id="lbl-pcode" for="pcode">${t("project-code")}</label>
|
<select id="icur" data-ls="icur">${curOpts}</select></div>
|
||||||
<select id="pcode" data-ls="pcode">
|
<div class="fg"><label id="lbl-pcode" for="pcode">${t("project-code")}</label>
|
||||||
<option value="">${t("select")}</option>
|
<select id="pcode" data-ls="pcode">
|
||||||
${pcOpts}
|
<option value="">${t("select")}</option>
|
||||||
<option value="__other__">${t("other")}</option>
|
${pcOpts}
|
||||||
</select></div>
|
<option value="__other__">${t("other")}</option>
|
||||||
<div class="fg" id="pcode-other-wrap" style="display:none">
|
</select></div>
|
||||||
<label id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
|
<div class="fg" id="pcode-other-wrap" style="display:none">
|
||||||
<input id="pcode-other" type="text" data-ls="pcode-other">
|
<label id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
|
||||||
|
<input id="pcode-other" type="text" data-ls="pcode-other">
|
||||||
|
</div>
|
||||||
|
<div class="fg"><label id="lbl-ino" for="ino">${t("invoice-no")}</label>
|
||||||
|
<input id="ino" type="text" data-ls="ino"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fg"><label id="lbl-ino" for="ino">${t("invoice-no")}</label>
|
<div class="card">
|
||||||
<input id="ino" type="text" data-ls="ino"></div>
|
<div class="card-title" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
|
||||||
</div>
|
<span id="sec-ct">${t("charge-to")}:</span>
|
||||||
<div class="card">
|
<select id="ct-pick" style="width:auto;font-size:12px">
|
||||||
<div class="card-title" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
|
<option value="">${t("select")}</option>
|
||||||
<span id="sec-ct">${t("charge-to")}:</span>
|
${ctOpts}
|
||||||
<select id="ct-pick" style="width:auto;font-size:12px">
|
<option value="__other__">${t("other")}</option>
|
||||||
<option value="">${t("select")}</option>
|
</select>
|
||||||
${ctOpts}
|
</div>
|
||||||
<option value="__other__">${t("other")}</option>
|
<div id="ct-fields" class="locked">
|
||||||
</select>
|
<div class="fg"><label id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
|
||||||
</div>
|
<input id="ctn" type="text"></div>
|
||||||
<div id="ct-fields" class="locked">
|
<div class="fg"><label id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
|
||||||
<div class="fg"><label id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
|
<input id="ca1" type="text"></div>
|
||||||
<input id="ctn" type="text"></div>
|
<div class="fg"><label id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
|
||||||
<div class="fg"><label id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
|
<input id="ca2" type="text"></div>
|
||||||
<input id="ca1" type="text"></div>
|
<div class="fg"><label id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
|
||||||
<div class="fg"><label id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
|
<input id="ca3" type="text"></div>
|
||||||
<input id="ca2" type="text"></div>
|
<div class="fg"><label id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
|
||||||
<div class="fg"><label id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
|
<input id="ca4" type="text"></div>
|
||||||
<input id="ca3" type="text"></div>
|
<div class="fg"><label id="lbl-cc" for="cc">${t("charge-to-country")}</label>
|
||||||
<div class="fg"><label id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
|
<select id="cc">${countryOpts("")}</select></div>
|
||||||
<input id="ca4" type="text"></div>
|
<div class="fi"><label id="lbl-cph">${t("charge-to-phone")}:</label>
|
||||||
<div class="fg"><label id="lbl-cc" for="cc">${t("charge-to-country")}</label>
|
<input id="cph" type="tel"></div>
|
||||||
<select id="cc">${countryOpts("")}</select></div>
|
<div class="fi"><label id="lbl-cem">${t("charge-to-email")}:</label>
|
||||||
<div class="fi"><label id="lbl-cph">${t("charge-to-phone")}:</label>
|
<input id="cem" type="email"></div>
|
||||||
<input id="cph" type="tel"></div>
|
<div class="fi"><label id="lbl-cvat">${t("vat-id")}:</label>
|
||||||
<div class="fi"><label id="lbl-cem">${t("charge-to-email")}:</label>
|
<input id="cvat" type="text"></div>
|
||||||
<input id="cem" type="email"></div>
|
<div class="fi"><label id="lbl-creg">${t("registration-no")}:</label>
|
||||||
<div class="fi"><label id="lbl-cvat">${t("vat-id")}:</label>
|
<input id="creg" type="text"></div>
|
||||||
<input id="cvat" type="text"></div>
|
</div>
|
||||||
<div class="fi"><label id="lbl-creg">${t("registration-no")}:</label>
|
|
||||||
<input id="creg" type="text"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
</div>
|
||||||
<div class="card-title" id="lbl-pay-sec">${t("payment")}</div>
|
<div class="card" style="margin-bottom:14px">
|
||||||
<div class="pay-terms-row">
|
<div class="card-title" id="lbl-pay-sec">${t("payment")}</div>
|
||||||
<label id="lbl-pterm">${t("payment-terms")}:</label>
|
<div class="pay-terms-row">
|
||||||
<input id="pterm" type="number" min="0" value="7" oninput="calcPayBy()" data-ls="pterm">
|
<label id="lbl-pterm">${t("payment-terms")}:</label>
|
||||||
<span id="lbl-days">${t("payment-days")}</span>
|
<input id="pterm" type="number" min="0" value="7" oninput="calcPayBy()" data-ls="pterm">
|
||||||
</div>
|
<span id="lbl-days">${t("payment-days")}</span>
|
||||||
<div class="pay-by-row">
|
</div>
|
||||||
<label id="lbl-paybyl">${t("pay-by")}:</label>
|
<div class="pay-by-row">
|
||||||
<span id="paybydisp"></span>
|
<label id="lbl-paybyl">${t("pay-by")}:</label>
|
||||||
</div>
|
<span id="paybydisp"></span>
|
||||||
<div id="bank-section" style="display:none">
|
</div>
|
||||||
<div class="fg"><label id="lbl-pacct">${t("account-holder")}</label>
|
<div id="bank-section" style="display:none">
|
||||||
<input id="pacct" type="text" data-ls="pacct"></div>
|
<div class="fg"><label id="lbl-pacct">${t("account-holder")}</label>
|
||||||
<div class="fg"><label id="lbl-piban">${t("account-no")}</label>
|
<input id="pacct" type="text" data-ls="pacct"></div>
|
||||||
<input id="piban" type="text" data-ls="piban"></div>
|
<div class="fg"><label id="lbl-piban">${t("account-no")}</label>
|
||||||
<div class="fg"><label id="lbl-pbic">${t("bank-bic")}</label>
|
<input id="piban" type="text" data-ls="piban"></div>
|
||||||
<input id="pbic" type="text" data-ls="pbic"></div>
|
<div class="fg"><label id="lbl-pbic">${t("bank-bic")}</label>
|
||||||
<div class="fg"><label id="lbl-pbadr">${t("bank-address")}</label>
|
<input id="pbic" type="text" data-ls="pbic"></div>
|
||||||
<input id="pbadr1" type="text" data-ls="pbadr1">
|
<div class="fg"><label id="lbl-pbadr">${t("bank-address")}</label>
|
||||||
<input id="pbadr2" type="text" style="margin-top:6px" data-ls="pbadr2"></div>
|
<input id="pbadr1" type="text" data-ls="pbadr1">
|
||||||
<div class="fg"><label id="lbl-pref">${t("payment-ref")}</label>
|
<input id="pbadr2" type="text" style="margin-top:6px" data-ls="pbadr2"></div>
|
||||||
<input id="pref" type="text" data-ls="pref"></div>
|
<div class="fg"><label id="lbl-pref">${t("payment-ref")}</label>
|
||||||
</div>
|
<input id="pref" type="text" data-ls="pref"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue