engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

product offer form: breathing room around bid + optional message

Browse source 
Per fox: "a touch more whitespace around the bid and optional message".
The expanded Make-an-offer form had the label, amount input, message
input, and submit button stacked flush against each other inside the
$42.00 well — no vertical rhythm.

New .product-offer-form CSS:
- display: grid; gap: var(--space-3, 12px)
- top margin var(--space-3) separates it from the summary button
- inputs get box-sizing: border-box, width: 100%, padding 8px 12px so
  they fill the column with comfortable internal spacing

Grid only.
This commit is contained in:
russell@unturf.com 2026-05-11 18:13:53 -04:00
parent 9c00d52dfd
commit f9b73bb9de
No known key found for this signature in database
2 changed files with 22 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

21
make_post_sell/static/css/common.css
View file

@ -1584,6 +1584,27 @@ div.edit-page > section.edit-card-full {
grid-column: 1 / -1;
}
/* Make-an-offer form (expanded from the <details> on product pages).
Grid layout gives consistent vertical rhythm — the inputs and label
would otherwise sit flush against each other and against the
summary button above. */
.product-offer-form {
display: grid;
gap: var(--space-3, 12px);
margin-top: var(--space-3, 12px);
}
.product-offer-form label {
margin: 0;
}
.product-offer-form input[type="number"],
.product-offer-form input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: var(--space-2, 8px) var(--space-3, 12px);
}
/* Render order on the edit page (CSS order property reorders without
changing HTML source order):
1. Edit Title, Description, or Visibility (full width, top)

2
make_post_sell/templates/product.j2
View file

@ -245,7 +245,7 @@
{% if product.offers_allowed and request.user and request.user.authenticated and request.user not in product.shop.owners %}
<details style="margin-top: var(--space-3)">
<summary class="mps-button">Make an offer</summary>
<form method="POST" action="/p/{{ product.id }}/offer" style="margin-top: var(--space-2)">
<form method="POST" action="/p/{{ product.id }}/offer" class="product-offer-form">
{% include "snippets/csrf.j2" %}
<label for="offer_amount">Your offer (USD)</label>
<input type="number" step="0.01" min="0.01" name="amount" id="offer_amount" required />