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

edit page: move status pills into call_to_action header area

Browse source 
Per fox: status data was "in the wrong spot" — it had been rendered at
the top of the content area as a standalone full-width row above the
edit-page grid. Moved into the call_to_action block (top-right of the
page, same area where the permanent link lives) so the at-a-glance
state sits naturally above the form rather than splitting visual flow.

- Pills (visibility / ready / price) and permanent link now render
  together in call_to_action
- .edit-status-bar restyled: no background, no border, right-justified
  flex row (matches the right-aligned page header area)
- .edit-permanent-link: right-aligned, muted, small

Tests still pass (9 in target slice).
This commit is contained in:
russell@unturf.com 2026-05-10 18:34:03 -04:00
parent 9495452e98
commit 84a241221d
No known key found for this signature in database
2 changed files with 20 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1453,18 +1453,23 @@ div.edit-page > section.well2 > form > h3:first-child {
flex-shrink: 0;
}
/* Status pill — at the top of the edit page, surfaces "ready / not ready"
and the visibility state at a glance. */
/* Status pill — lives in the call_to_action block (top-right of page,
alongside permanent link). Surfaces visibility + ready state + price
at a glance. No background since it sits in the page header area. */
.edit-status-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 8px);
align-items: center;
margin-bottom: var(--space-4, 16px);
padding: var(--space-3, 12px) var(--space-4, 16px);
border-radius: var(--radius-md, 8px);
background: var(--surface-dim, #f9f9fa);
border: 1px solid var(--color-border, #eee);
justify-content: flex-end;
margin: 0 0 var(--space-2, 8px);
}
.edit-permanent-link {
text-align: right;
margin: 0;
color: var(--color-text-muted, #666);
font-size: 0.85em;
}
.edit-status-pill {

20
make_post_sell/templates/product_edit.j2
View file

@ -1,18 +1,6 @@
{% extends "base.j2" -%}
{%- block call_to_action -%}
<br/>
<br/>
permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolute_url(request) }}</a>
{%- endblock call_to_action -%}
{% block content -%}
{% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
{% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
{% set image_extensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"] %}
{# Status bar: at-a-glance state. Visibility + ready-to-sell. #}
<section class="edit-status-bar">
{% if product.visibility == 1 %}
<span class="edit-status-pill edit-status-pill-public">Public</span>
@ -32,6 +20,14 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
<span class="edit-status-pill" style="background: var(--color-text-muted, #888);">${{ '{:.2f}'.format(price) }}</span>
{% endif %}
</section>
<p class="edit-permanent-link">permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolute_url(request) }}</a></p>
{%- endblock call_to_action -%}
{% block content -%}
{% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
{% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
{% set image_extensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"] %}
<div class="edit-page">