diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index d7aabb1..be406e3 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -1409,6 +1409,159 @@ div.edit-page textarea.mps-content-description { max-width: 100%; } +/* ── Edit-page Material cards ─────────────────────────────────────────── + Wells on the edit page get card-style elevation, rounded corners, + border accent, and a subtle hover lift. The goal: each section + reads as a discrete step the owner can act on. */ +div.edit-page > section.well2 { + background: var(--surface, #fff); + border-radius: var(--radius-lg, 12px); + box-shadow: var(--elevation-1, 0 1px 3px rgba(0,0,0,0.06)); + border: 1px solid var(--color-border, #eee); + transition: box-shadow var(--motion-fast, 150ms) ease, + transform var(--motion-fast, 150ms) ease; +} + +div.edit-page > section.well2:hover, +div.edit-page > section.well2:focus-within { + box-shadow: var(--elevation-3, 0 4px 12px rgba(0,0,0,0.07)); +} + +/* Card header — h3 with leading icon. Class .edit-card-icon turns + any inline glyph into a 32px circular badge. */ +div.edit-page > section.well2 > h3:first-child, +div.edit-page > section.well2 > form > h3:first-child { + display: flex; + align-items: center; + gap: var(--space-3, 12px); + margin-bottom: var(--space-3, 12px); + padding-bottom: var(--space-3, 12px); + border-bottom: 1px solid var(--color-border, #eee); + color: var(--color-text-primary, #222); +} + +.edit-card-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--color-blue-tint, #e8efff); + color: var(--color-navy, #5871ad); + font-size: 1.1rem; + flex-shrink: 0; +} + +/* Status pill — at the top of the edit page, surfaces "ready / not ready" + and the visibility state at a glance. */ +.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); +} + +.edit-status-pill { + display: inline-flex; + align-items: center; + gap: var(--space-1, 4px); + padding: var(--space-1, 4px) var(--space-3, 12px); + border-radius: var(--radius-pill, 999px); + font-size: 0.85em; + font-weight: 600; + background: var(--color-text-muted, #888); + color: #fff; +} + +.edit-status-pill-ready { + background: var(--color-green-dark, #8ab34e); +} + +.edit-status-pill-incomplete { + background: var(--color-gold, #d4a843); + color: #333; +} + +.edit-status-pill-public { + background: var(--color-blue, #5871ad); +} + +.edit-status-pill-private { + background: var(--color-text-muted, #888); +} + +.edit-status-pill-unlisted { + background: var(--color-purple, #9B59B6); +} + +/* Primary save action — sticky at the bottom of the form and rendered + as a filled, prominent button. Counter-balances the floating save + that lives inside the form. */ +div.edit-page input.mps-submit[value="Save Settings"], +div.edit-page button.mps-submit-primary, +.mps-button-primary { + float: none; + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-3, 12px) var(--space-6, 24px); + background: var(--color-navy, #5871ad); + color: #fff; + border: 1px solid var(--color-navy, #5871ad); + border-radius: var(--radius-md, 8px); + font-weight: 600; + font-size: 1rem; + box-shadow: var(--elevation-1, 0 1px 3px rgba(0,0,0,0.12)); + cursor: pointer; + transition: background var(--motion-fast, 150ms) ease, + box-shadow var(--motion-fast, 150ms) ease; +} + +div.edit-page input.mps-submit[value="Save Settings"]:hover, +div.edit-page button.mps-submit-primary:hover, +.mps-button-primary:hover { + background: var(--color-navy-dark, #44588a); + box-shadow: var(--elevation-2, 0 2px 6px rgba(0,0,0,0.15)); +} + +div.edit-page input.mps-submit[value="Save Settings"]:disabled, +div.edit-page button.mps-submit-primary:disabled, +.mps-button-primary:disabled { + opacity: 0.5; + cursor: not-allowed; + box-shadow: none; +} + +/* Sticky save bar at the bottom of the edit page — keeps Save Settings + in view while user scrolls through long edit forms. */ +.edit-save-bar { + position: sticky; + bottom: var(--space-3, 12px); + margin-top: var(--space-5, 20px); + padding: var(--space-3, 12px) var(--space-4, 16px); + background: var(--surface, #fff); + border-radius: var(--radius-md, 8px); + box-shadow: var(--elevation-3, 0 4px 12px rgba(0,0,0,0.07)); + border: 1px solid var(--color-border, #eee); + display: flex; + justify-content: flex-end; + align-items: center; + gap: var(--space-3, 12px); + z-index: 10; +} + +.edit-save-bar-status { + flex: 1; + color: var(--color-text-muted, #666); + font-size: 0.9em; +} + hr { color: var(--border-light, #EEEEEE); } diff --git a/make_post_sell/templates/product_edit.j2 b/make_post_sell/templates/product_edit.j2 index c7451d3..15835eb 100644 --- a/make_post_sell/templates/product_edit.j2 +++ b/make_post_sell/templates/product_edit.j2 @@ -12,13 +12,37 @@ permanent link: {{ product.absolut {% 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. #} +
+ {% if product.visibility == 1 %} + Public + {% elif product.visibility == 2 %} + Unlisted + {% else %} + Private + {% endif %} + + {% if product.is_ready %} + ✓ Ready to sell + {% else %} + ⚠ Missing required files + {% endif %} + + {% if product.is_sellable %} + ${{ '{:.2f}'.format(price) }} + {% endif %} +
+
{% if product.is_bundle %} -

Product IDs or URLs to include in this bundle

+

+ 📦 + Product IDs or URLs to include in this bundle +