asxpi/asxpio
asxpi/asxpio
1
0
Fork 0
Code Issues Pull requests Packages 1 Activity Actions

admin: restore form styling

Browse source 
The invoice form's text inputs, textareas and label layout depended on
.contact-form rules that were deleted with the contact form, so they
fell back to white browser defaults with labels running inline. Give
every admin form (.invoice-form) one style: labels above fields, gray
inputs on the surface token, a focus state, single column on phones,
and the submit button styled like the rest.

Assisted-by: Claude:opus-5
This commit is contained in:
Sergei Poljanski 2026-10-10 08:32:28 +04:00
commit 97919f3f71
Signed by: asxpi
GPG key ID: 4F8851660FA4121B
2 changed files with 65 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

73
public/style.css
View file

@ -498,7 +498,20 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
color: var(--text-strong);
border-color: var(--text-ghost);
}
.invoice-form select {
.invoice-form .field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
margin-bottom: 16px;
}
.invoice-form label {
color: var(--text-dim);
font-size: 0.85rem;
}
.invoice-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.invoice-form select,
.invoice-form textarea {
width: 100%;
box-sizing: border-box;
background: var(--surface);
@ -508,18 +521,55 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
padding: 8px 10px;
font-family: inherit;
font-size: 0.95rem;
color-scheme: dark;
}
.invoice-form input[type="date"] {
width: 100%;
box-sizing: border-box;
background: var(--surface);
color: var(--text-strong);
border: 1px solid var(--border);
border-radius: 3px;
padding: 8px 10px;
.invoice-form input[type="date"],
.invoice-form input[inputmode="decimal"] {
font-family: var(--font-mono);
font-size: 0.92rem;
color-scheme: dark;
}
.invoice-form textarea {
resize: vertical;
min-height: 72px;
}
.invoice-form input::placeholder,
.invoice-form textarea::placeholder {
color: var(--text-ghost);
}
.invoice-form input:focus,
.invoice-form select:focus,
.invoice-form textarea:focus {
outline: none;
border-color: var(--text-ghost);
background: var(--surface-alt);
}
.invoice-form input[type="file"] {
padding: 6px;
color: var(--text-dim);
}
.invoice-form label:has(> input[type="checkbox"]) {
display: flex;
gap: 8px;
align-items: center;
color: var(--text-strong);
}
.invoice-form .field .link-button {
align-self: flex-start;
margin: 2px 0 0;
}
.invoice-form h2 {
margin-top: 32px;
}
.invoice-form fieldset[disabled] input,
.invoice-form fieldset[disabled] select,
.invoice-form fieldset[disabled] textarea {
opacity: 0.7;
}
.invoice-form > .download-button,
.invoice-form fieldset > .download-button {
margin-top: 8px;
cursor: pointer;
font-family: inherit;
}
.download-button {
display: inline-block;
@ -538,6 +588,9 @@ fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
}
@media (max-width: 560px) {
.invoice-grid {
grid-template-columns: 1fr;
}
dl.kv {
grid-template-columns: 1fr;
gap: 2px 0;

4
views/admin/invoices/new.erb
View file

@ -12,7 +12,7 @@
<% end %>
<section class="section">
<form class="contact-form invoice-form" method="post" action="/admin/invoices" autocomplete="off">
<form class="invoice-form" method="post" action="/admin/invoices" autocomplete="off">
<input type="hidden" name="authenticity_token" value="<%= csrf_token %>" />
<h2>Client</h2>
@ -117,7 +117,7 @@
</div>
<script type="application/json" id="crypto-defaults"><%== CryptoAsset.default_addresses.to_json %></script>
<button type="submit">Create invoice</button>
<button type="submit" class="download-button">Create invoice</button>
</form>
</section>