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

style: shop settings — promote every section to a content-card

Browse source 
The settings page was visibly butting disparate sections together
(dim-gray .well + .well, no real margin between them) because each
section was wrapped in section.shop-settings.well, which only ever
got the legacy .well treatment (surface-dim, padding 10px) — none of
the elevation/border/rhythm of the design-system content-card.

This is a CSS-only upgrade: section.shop-settings.well now gets the
same chrome as .content-card (surface-base, --border-light, elevation
-1, --radius-lg, --space-5 padding, --space-5 margin-bottom). The 18
shop-settings sections in shop_settings.j2 pick this up with zero
markup churn. The legacy <br/><br/> intra-section spacers stay
(harmless block whitespace inside the card).

Dark mode override added (--surface-container / --border-default).
.mps-submit gets a top margin so the Save Settings button isn't
glued to the last field. Styleguide entry under #wells documents the
pattern so future setting forms (or refactors) stay consistent.

57 tests in the shop_settings/styleguide slice still green.
This commit is contained in:
russell@unturf.com 2026-05-15 14:26:21 -04:00
parent 56649db952
commit 5aa6d1e756
No known key found for this signature in database
2 changed files with 60 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2178,6 +2178,44 @@ div.edit-page > section.edit-card-full {
}
.settings-form-actions .mps-submit { grid-column: 2; }
/* Shop settings page — every section is wrapped in
<section class="shop-settings well">. Promote that combo to the
design-system content-card treatment (surface-base, light border,
elevation-1, generous padding) so the page reads as a stack of
clearly-separated cards instead of dim-gray slabs touching each
other. The legacy .well rule still sets surface-dim — we override
it back to surface-base + a real shadow. Grid only — no flex. */
.shop-settings.well,
.shop-settings {
background-color: var(--surface-base, #FFFFFF);
border-radius: var(--radius-lg, 12px);
border: 1px solid var(--border-light, #eeeeee);
box-shadow: var(--elevation-1);
padding: var(--space-5, 20px);
margin-bottom: var(--space-5, 20px);
}
[data-theme="dark"] .shop-settings.well,
[data-theme="dark"] .shop-settings {
background-color: var(--surface-container, #161b22);
border-color: var(--border-default, #30363d);
}
.shop-settings > h3 {
margin: 0 0 var(--space-3, 12px) 0;
}
/* Pin the Save Settings button to the right of its section like every
other primary action surface in the app. The submit input is
typically followed by a couple of <br/> spacers — those collapse to
harmless whitespace in a block context. */
.shop-settings .mps-submit {
display: inline-block;
margin-top: var(--space-3, 12px);
}
/* Tighten the legacy <br/><br/> rhythm a touch so settings forms don't
feel airy between every field. Visual delta only — markup untouched. */
.shop-settings br + br {
line-height: 0.6;
}
/* Public user profile (profile.j2). Grid only. */
.profile-page { display: grid; gap: var(--space-4, 16px); }
.profile-card-header {

22
make_post_sell/templates/styleguide.j2
View file

@ -766,6 +766,28 @@ Grid only — no flex.</div>
.content-card-meta — small muted meta line (dates, hints)
Dark mode: surface-container + border-default override (auto).</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Shop settings section card (shop_settings.j2)</div>
<section class="shop-settings well" style="max-width: 520px;">
<h3>Subscription Settings</h3>
<p>Allow visitors to subscribe to email digests of new products and content.</p>
<label><input type="checkbox" /> Enable digest subscriptions</label>
<br/><br/>
<input type="submit" class="mps-submit" value="Save Settings" />
</section>
<div class="sg-code">section.shop-settings.well
— same chrome as .content-card (surface-base, border-light,
elevation-1, radius-lg) but addressed by the existing
class combo so every shop-settings section on the
Settings page picks it up with no markup change.
— margin-bottom: var(--space-5) gives consistent gaps
between sections (the &lt;br&gt;&lt;br&gt; tags between sections
in the markup are visual whitespace, harmless).
— &gt; h3 reset to 0 top margin, var(--space-3) bottom.
— .mps-submit gets margin-top var(--space-3) so it
sits below the last field with breathing room.</div>
</div>
</div>